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

19
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,7 +568,7 @@ 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");
}); });
} }
@ -571,7 +576,7 @@ function _init() {
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

46
pages/forms/general.html
View File

@ -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">