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,
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);
}
};
}

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" />
<!-- 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 -->