github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

Added animation speed option to app.js

pull/456/head
Abdullah Almsaeed 2015-05-23 13:09:35 +03:00
parent d08e0e0c69
commit aa6552502d
3 changed files with 80 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
dist/js/app.js vendored
View File

@ -41,6 +41,10 @@ $.AdminLTE.options = {
navbarMenuSlimscroll: true, navbarMenuSlimscroll: true,
navbarMenuSlimscrollWidth: "3px", //The width of the scroll bar navbarMenuSlimscrollWidth: "3px", //The width of the scroll bar
navbarMenuHeight: "200px", //The height of the inner menu navbarMenuHeight: "200px", //The height of the inner menu
//General animation speed for JS animated elements such as box collapse/expand and
//sidebar treeview slide up/down. This options accepts an integer as milliseconds,
//'fast', 'normal', or 'slow'
animationSpeed: 500,
//Sidebar push menu toggle button selector //Sidebar push menu toggle button selector
sidebarToggleSelector: "[data-toggle='offcanvas']", sidebarToggleSelector: "[data-toggle='offcanvas']",
//Activate sidebar push menu //Activate sidebar push menu
@ -378,7 +382,7 @@ function _init() {
*/ */
$.AdminLTE.tree = function (menu) { $.AdminLTE.tree = function (menu) {
var _this = this; var _this = this;
var animationSpeed = $.AdminLTE.options.animationSpeed;
$("li a", $(menu)).on('click', function (e) { $("li a", $(menu)).on('click', function (e) {
//Get the clicked link and the next element //Get the clicked link and the next element
var $this = $(this); var $this = $(this);
@ -387,7 +391,7 @@ function _init() {
//Check if the next element is a menu and is visible //Check if the next element is a menu and is visible
if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible'))) { if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible'))) {
//Close the menu //Close the menu
checkElement.slideUp('normal', function () { checkElement.slideUp(animationSpeed, function () {
checkElement.removeClass('menu-open'); checkElement.removeClass('menu-open');
//Fix the layout in case the sidebar stretches over the height of the window //Fix the layout in case the sidebar stretches over the height of the window
//_this.layout.fix(); //_this.layout.fix();
@ -399,14 +403,14 @@ function _init() {
//Get the parent menu //Get the parent menu
var parent = $this.parents('ul').first(); var parent = $this.parents('ul').first();
//Close all open menus within the parent //Close all open menus within the parent
var ul = parent.find('ul:visible').slideUp('normal'); var ul = parent.find('ul:visible').slideUp(animationSpeed);
//Remove the menu-open class from the parent //Remove the menu-open class from the parent
ul.removeClass('menu-open'); ul.removeClass('menu-open');
//Get the parent li //Get the parent li
var parent_li = $this.parent("li"); var parent_li = $this.parent("li");
//Open the target menu and add the menu-open class //Open the target menu and add the menu-open class
checkElement.slideDown('normal', function () { checkElement.slideDown(animationSpeed, function () {
//Add the class active to the parent li //Add the class active to the parent li
checkElement.addClass('menu-open'); checkElement.addClass('menu-open');
parent.find('li.active').removeClass('active'); parent.find('li.active').removeClass('active');
@ -528,6 +532,7 @@ function _init() {
$.AdminLTE.boxWidget = { $.AdminLTE.boxWidget = {
selectors: $.AdminLTE.options.boxWidgetOptions.boxWidgetSelectors, selectors: $.AdminLTE.options.boxWidgetOptions.boxWidgetSelectors,
icons: $.AdminLTE.options.boxWidgetOptions.boxWidgetIcons, icons: $.AdminLTE.options.boxWidgetOptions.boxWidgetIcons,
animationSpeed: $.AdminLTE.options.animationSpeed,
activate: function () { activate: function () {
var _this = this; var _this = this;
//Listen for collapse event triggers //Listen for collapse event triggers
@ -554,7 +559,7 @@ function _init() {
.removeClass(_this.icons.collapse) .removeClass(_this.icons.collapse)
.addClass(_this.icons.open); .addClass(_this.icons.open);
//Hide the content //Hide the content
box_content.slideUp(300, function () { box_content.slideUp(_this.animationSpeed, function () {
box.addClass("collapsed-box"); box.addClass("collapsed-box");
}); });
} else { } else {
@ -563,15 +568,15 @@ function _init() {
.removeClass(_this.icons.open) .removeClass(_this.icons.open)
.addClass(_this.icons.collapse); .addClass(_this.icons.collapse);
//Show the content //Show the content
box_content.slideDown(300, function () { box_content.slideDown(_this.animationSpeed, function () {
box.removeClass("collapsed-box"); box.removeClass("collapsed-box");
}); });
} }
}, },
remove: function (element) { remove: function (element) {
//Find the box parent //Find the box parent
var box = element.parents(".box").first(); var box = element.parents(".box").first();
box.slideUp(); box.slideUp(this.animationSpeed);
} }
}; };
} }

2
dist/js/app.min.js vendored
View File

File diff suppressed because one or more lines are too long

96
pages/forms/general.html
View File

@ -12,7 +12,7 @@
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" /> <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style --> <!-- Theme style -->
<link href="../../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" /> <link href="../../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
<!-- AdminLTE Skins. Choose a skin from the css/skins <!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. --> folder instead of downloading all of them to reduce the load. -->
<link href="../../dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" /> <link href="../../dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
@ -25,7 +25,7 @@
</head> </head>
<body class="skin-blue sidebar-mini"> <body class="skin-blue sidebar-mini">
<div class="wrapper"> <div class="wrapper">
<header class="main-header"> <header class="main-header">
<!-- Logo --> <!-- Logo -->
<a href="../../index2.html" class="logo"> <a href="../../index2.html" class="logo">
@ -407,7 +407,7 @@
<li><a href="../examples/lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li> <li><a href="../examples/lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
<li><a href="../examples/404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li> <li><a href="../examples/404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li>
<li><a href="../examples/500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li> <li><a href="../examples/500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
<li><a href="../examples/blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li> <li><a href="../examples/blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
</ul> </ul>
</li> </li>
<li class="treeview"> <li class="treeview">
@ -465,7 +465,7 @@
<div class="col-md-6"> <div class="col-md-6">
<!-- general form elements --> <!-- general form elements -->
<div class="box box-primary"> <div class="box box-primary">
<div class="box-header"> <div class="box-header with-border">
<h3 class="box-title">Quick Example</h3> <h3 class="box-title">Quick Example</h3>
</div><!-- /.box-header --> </div><!-- /.box-header -->
<!-- form start --> <!-- form start -->
@ -499,7 +499,7 @@
<!-- Form Element sizes --> <!-- Form Element sizes -->
<div class="box box-success"> <div class="box box-success">
<div class="box-header"> <div class="box-header with-border">
<h3 class="box-title">Different Height</h3> <h3 class="box-title">Different Height</h3>
</div> </div>
<div class="box-body"> <div class="box-body">
@ -512,7 +512,7 @@
</div><!-- /.box --> </div><!-- /.box -->
<div class="box box-danger"> <div class="box box-danger">
<div class="box-header"> <div class="box-header with-border">
<h3 class="box-title">Different Width</h3> <h3 class="box-title">Different Width</h3>
</div> </div>
<div class="box-body"> <div class="box-body">
@ -532,7 +532,7 @@
<!-- Input addon --> <!-- Input addon -->
<div class="box box-info"> <div class="box box-info">
<div class="box-header"> <div class="box-header with-border">
<h3 class="box-title">Input Addon</h3> <h3 class="box-title">Input Addon</h3>
</div> </div>
<div class="box-body"> <div class="box-body">
@ -624,9 +624,45 @@
</div><!--/.col (left) --> </div><!--/.col (left) -->
<!-- right column --> <!-- right column -->
<div class="col-md-6"> <div class="col-md-6">
<!-- Horizontal Form -->
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">Horizontal Form</h3>
</div><!-- /.box-header -->
<!-- form start -->
<form class="form-horizontal">
<div class="box-body">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
</div><!-- /.box-body -->
<div class="box-footer">
<button type="submit" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-info pull-right">Sign in</button>
</div><!-- /.box-footer -->
</form>
</div><!-- /.box -->
<!-- general form elements disabled --> <!-- general form elements disabled -->
<div class="box box-warning"> <div class="box box-warning">
<div class="box-header"> <div class="box-header with-border">
<h3 class="box-title">General Elements</h3> <h3 class="box-title">General Elements</h3>
</div><!-- /.box-header --> </div><!-- /.box-header -->
<div class="box-body"> <div class="box-body">
@ -768,13 +804,13 @@
</div> </div>
<strong>Copyright &copy; 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved. <strong>Copyright &copy; 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
</footer> </footer>
<!-- Control Sidebar --> <!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark"> <aside class="control-sidebar control-sidebar-dark">
<!-- Create the tabs --> <!-- Create the tabs -->
<ul class="nav nav-tabs nav-justified control-sidebar-tabs"> <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
<li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li> <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
<li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li> <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
</ul> </ul>
<!-- Tab panes --> <!-- Tab panes -->
@ -821,59 +857,59 @@
</li> </li>
</ul><!-- /.control-sidebar-menu --> </ul><!-- /.control-sidebar-menu -->
<h3 class="control-sidebar-heading">Tasks Progress</h3> <h3 class="control-sidebar-heading">Tasks Progress</h3>
<ul class='control-sidebar-menu'> <ul class='control-sidebar-menu'>
<li> <li>
<a href='javascript::;'> <a href='javascript::;'>
<h4 class="control-sidebar-subheading"> <h4 class="control-sidebar-subheading">
Custom Template Design Custom Template Design
<span class="label label-danger pull-right">70%</span> <span class="label label-danger pull-right">70%</span>
</h4> </h4>
<div class="progress progress-xxs"> <div class="progress progress-xxs">
<div class="progress-bar progress-bar-danger" style="width: 70%"></div> <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
</div> </div>
</a> </a>
</li> </li>
<li> <li>
<a href='javascript::;'> <a href='javascript::;'>
<h4 class="control-sidebar-subheading"> <h4 class="control-sidebar-subheading">
Update Resume Update Resume
<span class="label label-success pull-right">95%</span> <span class="label label-success pull-right">95%</span>
</h4> </h4>
<div class="progress progress-xxs"> <div class="progress progress-xxs">
<div class="progress-bar progress-bar-success" style="width: 95%"></div> <div class="progress-bar progress-bar-success" style="width: 95%"></div>
</div> </div>
</a> </a>
</li> </li>
<li> <li>
<a href='javascript::;'> <a href='javascript::;'>
<h4 class="control-sidebar-subheading"> <h4 class="control-sidebar-subheading">
Laravel Integration Laravel Integration
<span class="label label-waring pull-right">50%</span> <span class="label label-waring pull-right">50%</span>
</h4> </h4>
<div class="progress progress-xxs"> <div class="progress progress-xxs">
<div class="progress-bar progress-bar-warning" style="width: 50%"></div> <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
</div> </div>
</a> </a>
</li> </li>
<li> <li>
<a href='javascript::;'> <a href='javascript::;'>
<h4 class="control-sidebar-subheading"> <h4 class="control-sidebar-subheading">
Back End Framework Back End Framework
<span class="label label-primary pull-right">68%</span> <span class="label label-primary pull-right">68%</span>
</h4> </h4>
<div class="progress progress-xxs"> <div class="progress progress-xxs">
<div class="progress-bar progress-bar-primary" style="width: 68%"></div> <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
</div> </div>
</a> </a>
</li> </li>
</ul><!-- /.control-sidebar-menu --> </ul><!-- /.control-sidebar-menu -->
</div><!-- /.tab-pane --> </div><!-- /.tab-pane -->
<!-- Stats tab content --> <!-- Stats tab content -->
<div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div><!-- /.tab-pane --> <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div><!-- /.tab-pane -->
<!-- Settings tab content --> <!-- Settings tab content -->
<div class="tab-pane" id="control-sidebar-settings-tab"> <div class="tab-pane" id="control-sidebar-settings-tab">
<form method="post"> <form method="post">
<h3 class="control-sidebar-heading">General Settings</h3> <h3 class="control-sidebar-heading">General Settings</h3>
<div class="form-group"> <div class="form-group">
@ -912,21 +948,21 @@
<label class="control-sidebar-subheading"> <label class="control-sidebar-subheading">
Show me as online Show me as online
<input type="checkbox" class="pull-right" checked /> <input type="checkbox" class="pull-right" checked />
</label> </label>
</div><!-- /.form-group --> </div><!-- /.form-group -->
<div class="form-group"> <div class="form-group">
<label class="control-sidebar-subheading"> <label class="control-sidebar-subheading">
Turn off notifications Turn off notifications
<input type="checkbox" class="pull-right" /> <input type="checkbox" class="pull-right" />
</label> </label>
</div><!-- /.form-group --> </div><!-- /.form-group -->
<div class="form-group"> <div class="form-group">
<label class="control-sidebar-subheading"> <label class="control-sidebar-subheading">
Delete chat history Delete chat history
<a href="javascript::;" class="text-red pull-right"><i class="fa fa-trash-o"></i></a> <a href="javascript::;" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
</label> </label>
</div><!-- /.form-group --> </div><!-- /.form-group -->
</form> </form>
</div><!-- /.tab-pane --> </div><!-- /.tab-pane -->