Added animation speed option to app.js

dist/js/app.js

@@ -41,6 +41,10 @@ $.AdminLTE.options = {
   navbarMenuSlimscroll: true,
   navbarMenuSlimscrollWidth: "3px", //The width of the scroll bar
   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
   sidebarToggleSelector: "[data-toggle='offcanvas']",
   //Activate sidebar push menu
@@ -378,7 +382,7 @@ function _init() {
    */
   $.AdminLTE.tree = function (menu) {
     var _this = this;
-
+    var animationSpeed = $.AdminLTE.options.animationSpeed;
     $("li a", $(menu)).on('click', function (e) {
       //Get the clicked link and the next element
       var $this = $(this);
@@ -387,7 +391,7 @@ function _init() {
       //Check if the next element is a menu and is visible
       if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible'))) {
         //Close the menu
-        checkElement.slideUp('normal', function () {
+        checkElement.slideUp(animationSpeed, function () {
           checkElement.removeClass('menu-open');
           //Fix the layout in case the sidebar stretches over the height of the window
           //_this.layout.fix();
@@ -399,14 +403,14 @@ function _init() {
         //Get the parent menu
         var parent = $this.parents('ul').first();
         //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
         ul.removeClass('menu-open');
         //Get the parent li
         var parent_li = $this.parent("li");
 
         //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
           checkElement.addClass('menu-open');
           parent.find('li.active').removeClass('active');
@@ -528,6 +532,7 @@ function _init() {
   $.AdminLTE.boxWidget = {
     selectors: $.AdminLTE.options.boxWidgetOptions.boxWidgetSelectors,
     icons: $.AdminLTE.options.boxWidgetOptions.boxWidgetIcons,
+    animationSpeed: $.AdminLTE.options.animationSpeed,
     activate: function () {
       var _this = this;
       //Listen for collapse event triggers
@@ -554,7 +559,7 @@ function _init() {
                 .removeClass(_this.icons.collapse)
                 .addClass(_this.icons.open);
         //Hide the content
-        box_content.slideUp(300, function () {
+        box_content.slideUp(_this.animationSpeed, function () {
           box.addClass("collapsed-box");
         });
       } else {
@@ -563,15 +568,15 @@ function _init() {
                 .removeClass(_this.icons.open)
                 .addClass(_this.icons.collapse);
         //Show the content
-        box_content.slideDown(300, function () {
+        box_content.slideDown(_this.animationSpeed, function () {
           box.removeClass("collapsed-box");
         });
       }
     },
-    remove: function (element) {
+    remove: function (element) {     
       //Find the box parent
       var box = element.parents(".box").first();
-      box.slideUp();
+      box.slideUp(this.animationSpeed);
     }
   };
 }

pages/forms/general.html

@@ -12,7 +12,7 @@
     <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
     <!-- Theme style -->
     <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. -->
     <link href="../../dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
 
@@ -25,7 +25,7 @@
   </head>
   <body class="skin-blue sidebar-mini">
     <div class="wrapper">
-      
+
       <header class="main-header">
         <!-- 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/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/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>
             </li>
             <li class="treeview">
@@ -465,7 +465,7 @@
             <div class="col-md-6">
               <!-- general form elements -->
               <div class="box box-primary">
-                <div class="box-header">
+                <div class="box-header with-border">
                   <h3 class="box-title">Quick Example</h3>
                 </div><!-- /.box-header -->
                 <!-- form start -->
@@ -499,7 +499,7 @@
 
               <!-- Form Element sizes -->
               <div class="box box-success">
-                <div class="box-header">
+                <div class="box-header with-border">
                   <h3 class="box-title">Different Height</h3>
                 </div>
                 <div class="box-body">
@@ -512,7 +512,7 @@
               </div><!-- /.box -->
 
               <div class="box box-danger">
-                <div class="box-header">
+                <div class="box-header with-border">
                   <h3 class="box-title">Different Width</h3>
                 </div>
                 <div class="box-body">
@@ -532,7 +532,7 @@
 
               <!-- Input addon -->
               <div class="box box-info">
-                <div class="box-header">
+                <div class="box-header with-border">
                   <h3 class="box-title">Input Addon</h3>
                 </div>
                 <div class="box-body">
@@ -624,9 +624,45 @@
             </div><!--/.col (left) -->
             <!-- right column -->
             <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 -->
               <div class="box box-warning">
-                <div class="box-header">
+                <div class="box-header with-border">
                   <h3 class="box-title">General Elements</h3>
                 </div><!-- /.box-header -->
                 <div class="box-body">
@@ -768,13 +804,13 @@
         </div>
         <strong>Copyright &copy; 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
       </footer>
-      
-      <!-- Control Sidebar -->      
-      <aside class="control-sidebar control-sidebar-dark">                
+
+      <!-- Control Sidebar -->
+      <aside class="control-sidebar control-sidebar-dark">
         <!-- Create the 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-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
         </ul>
         <!-- Tab panes -->
@@ -821,59 +857,59 @@
               </li>
             </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'>
               <li>
-                <a href='javascript::;'>               
+                <a href='javascript::;'>
                   <h4 class="control-sidebar-subheading">
                     Custom Template Design
                     <span class="label label-danger pull-right">70%</span>
                   </h4>
                   <div class="progress progress-xxs">
                     <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
-                  </div>                                    
+                  </div>
                 </a>
-              </li> 
+              </li>
               <li>
-                <a href='javascript::;'>               
+                <a href='javascript::;'>
                   <h4 class="control-sidebar-subheading">
                     Update Resume
                     <span class="label label-success pull-right">95%</span>
                   </h4>
                   <div class="progress progress-xxs">
                     <div class="progress-bar progress-bar-success" style="width: 95%"></div>
-                  </div>                                    
+                  </div>
                 </a>
-              </li> 
+              </li>
               <li>
-                <a href='javascript::;'>               
+                <a href='javascript::;'>
                   <h4 class="control-sidebar-subheading">
                     Laravel Integration
                     <span class="label label-waring pull-right">50%</span>
                   </h4>
                   <div class="progress progress-xxs">
                     <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
-                  </div>                                    
+                  </div>
                 </a>
-              </li> 
+              </li>
               <li>
-                <a href='javascript::;'>               
+                <a href='javascript::;'>
                   <h4 class="control-sidebar-subheading">
                     Back End Framework
                     <span class="label label-primary pull-right">68%</span>
                   </h4>
                   <div class="progress progress-xxs">
                     <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
-                  </div>                                    
+                  </div>
                 </a>
-              </li>               
-            </ul><!-- /.control-sidebar-menu -->         
+              </li>
+            </ul><!-- /.control-sidebar-menu -->
 
           </div><!-- /.tab-pane -->
           <!-- Stats tab content -->
           <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div><!-- /.tab-pane -->
           <!-- Settings tab content -->
-          <div class="tab-pane" id="control-sidebar-settings-tab">            
+          <div class="tab-pane" id="control-sidebar-settings-tab">
             <form method="post">
               <h3 class="control-sidebar-heading">General Settings</h3>
               <div class="form-group">
@@ -912,21 +948,21 @@
                 <label class="control-sidebar-subheading">
                   Show me as online
                   <input type="checkbox" class="pull-right" checked />
-                </label>                
+                </label>
               </div><!-- /.form-group -->
 
               <div class="form-group">
                 <label class="control-sidebar-subheading">
                   Turn off notifications
                   <input type="checkbox" class="pull-right" />
-                </label>                
+                </label>
               </div><!-- /.form-group -->
 
               <div class="form-group">
                 <label class="control-sidebar-subheading">
                   Delete chat history
                   <a href="javascript::;" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
-                </label>                
+                </label>
               </div><!-- /.form-group -->
             </form>
           </div><!-- /.tab-pane -->