Modifying the options of AdminLTE's app.js can be done using one of the following ways.
+ +Within the main Javascript file, modify the $.AdminLTE.options object to suit your use case.
Alternatively, you can define a global options variable named AdminLTEOptions and initialize it before loading app.js.
Example
+<script>
+ var AdminLTEOptions = {
+ //Enable sidebar expand on hover effect for sidebar mini
+ //This option is forced to true if both the fixed layout and sidebar mini
+ //are used together
+ sidebarExpandOnHover: true,
+ //BoxRefresh Plugin
+ enableBoxRefresh: true,
+ //Bootstrap.js tooltip
+ enableBSToppltip: true
+ };
+</script>
+<script src='dist/js/app.js' type='text/javascript'></script>{
+ //Add slimscroll to navbar menus
+ //This requires you to load the slimscroll plugin
+ //in every page before app.js
+ navbarMenuSlimscroll: true,
+ navbarMenuSlimscrollWidth: "3px", //The width of the scroll bar
+ navbarMenuHeight: "200px", //The height of the inner menu
+ //Sidebar push menu toggle button selector
+ sidebarToggleSelector: "[data-toggle='offcanvas']",
+ //Activate sidebar push menu
+ sidebarPushMenu: true,
+ //Activate sidebar slimscroll if the fixed layout is set (requires SlimScroll Plugin)
+ sidebarSlimScroll: true,
+ //Enable sidebar expand on hover effect for sidebar mini
+ //This option is forced to true if both the fixed layout and sidebar mini
+ //are used together
+ sidebarExpandOnHover: false,
+ //BoxRefresh Plugin
+ enableBoxRefresh: true,
+ //Bootstrap.js tooltip
+ enableBSToppltip: true,
+ BSTooltipSelector: "[data-toggle='tooltip']",
+ //Enable Fast Click. Fastclick.js creates a more
+ //native touch experience with touch devices. If you
+ //choose to enable the plugin, make sure you load the script
+ //before AdminLTE's app.js
+ enableFastclick: true,
+ //Control Sidebar Options
+ enableControlSidebar: true,
+ controlSidebarOptions: {
+ //Which button should trigger the open/close event
+ toggleBtnSelector: "[data-toggle='control-sidebar']",
+ //The sidebar selector
+ selector: ".control-sidebar",
+ //Enable slide over content
+ slide: true
+ },
+ //Box Widget Plugin. Enable this plugin
+ //to allow boxes to be collapsed and/or removed
+ enableBoxWidget: true,
+ //Box Widget plugin options
+ boxWidgetOptions: {
+ boxWidgetIcons: {
+ //Collapse icon
+ collapse: 'fa-minus',
+ //Open icon
+ open: 'fa-plus',
+ //Remove icon
+ remove: 'fa-times'
+ },
+ boxWidgetSelectors: {
+ //Remove button selector
+ remove: '[data-widget="remove"]',
+ //Collapse button selector
+ collapse: '[data-widget="collapse"]'
+ }
+ },
+ //Direct Chat plugin options
+ directChat: {
+ //Enable direct chat by default
+ enable: true,
+ //The button to open and close the chat contacts pane
+ contactToggleSelector: '[data-widget="chat-pane-toggle"]'
+ },
+ //Define the set of colors to use globally around the website
+ colors: {
+ lightBlue: "#3c8dbc",
+ red: "#f56954",
+ green: "#00a65a",
+ aqua: "#00c0ef",
+ yellow: "#f39c12",
+ blue: "#0073b7",
+ navy: "#001F3F",
+ teal: "#39CCCC",
+ olive: "#3D9970",
+ lime: "#01FF70",
+ orange: "#FF851B",
+ fuchsia: "#F012BE",
+ purple: "#8E24AA",
+ maroon: "#D81B60",
+ black: "#222222",
+ gray: "#d2d6de"
+ },
+ //The standard screen sizes that bootstrap uses.
+ //If you change these in the variables.less file, change
+ //them here too.
+ screenSizes: {
+ xs: 480,
+ sm: 768,
+ md: 992,
+ lg: 1200
+ }
+}The starter page is a good place to start building your app if you'd like to start from scratch.
-A full layout example for a quick start
--<!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8"> - <title>AdminLTE 2 | Dashboard</title> - <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'> - <!-- Bootstrap 3.3.2 --> - <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> - <!-- Font Awesome Icons --> - <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> - <!-- Ionicons --> - <link href="http://code.ionicframework.com/ionicons/2.0.0/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 - 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" /> - - <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> - <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> - <!--[if lt IE 9]> - <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> - <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> - <![endif]--> - </head> - <body class="skin-blue sidebar-mini"> - <!-- Site wrapper --> - <div class="wrapper"> - - <header class="main-header"> - <a href="index2.html" class="logo"><b>Admin</b>LTE</a> - <!-- Header Navbar: style can be found in header.less --> - <nav class="navbar navbar-static-top" role="navigation"> - <!-- Sidebar toggle button--> - <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button"> - <span class="sr-only">Toggle navigation</span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - </a> - <div class="navbar-custom-menu"> - <ul class="nav navbar-nav"> - <!-- Messages: style can be found in dropdown.less--> - <li class="dropdown messages-menu"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown"> - <i class="fa fa-envelope-o"></i> - <span class="label label-success">4</span> - </a> - <ul class="dropdown-menu"> - <li class="header">You have 4 messages</li> - <li> - <!-- inner menu: contains the actual data --> - <ul class="menu"> - <li><!-- start message --> - <a href="#"> - <div class="pull-left"> - <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"/> - </div> - <h4> - Support Team - <small><i class="fa fa-clock-o"></i> 5 mins</small> - </h4> - <p>Why not buy a new awesome theme?</p> - </a> - </li><!-- end message --> - </ul> - </li> - <li class="footer"><a href="#">See All Messages</a></li> - </ul> - </li> - <!-- Notifications: style can be found in dropdown.less --> - <li class="dropdown notifications-menu"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown"> - <i class="fa fa-bell-o"></i> - <span class="label label-warning">10</span> - </a> - <ul class="dropdown-menu"> - <li class="header">You have 10 notifications</li> - <li> - <!-- inner menu: contains the actual data --> - <ul class="menu"> - <li> - <a href="#"> - <i class="fa fa-users text-aqua"></i> 5 new members joined today - </a> - </li> - </ul> - </li> - <li class="footer"><a href="#">View all</a></li> - </ul> - </li> - <!-- Tasks: style can be found in dropdown.less --> - <li class="dropdown tasks-menu"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown"> - <i class="fa fa-flag-o"></i> - <span class="label label-danger">9</span> - </a> - <ul class="dropdown-menu"> - <li class="header">You have 9 tasks</li> - <li> - <!-- inner menu: contains the actual data --> - <ul class="menu"> - <li><!-- Task item --> - <a href="#"> - <h3> - Design some buttons - <small class="pull-right">20%</small> - </h3> - <div class="progress xs"> - <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"> - <span class="sr-only">20% Complete</span> - </div> - </div> - </a> - </li><!-- end task item --> - </ul> - </li> - <li class="footer"> - <a href="#">View all tasks</a> - </li> - </ul> - </li> - <!-- User Account: style can be found in dropdown.less --> - <li class="dropdown user user-menu"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown"> - <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image"/> - <span class="hidden-xs">Alexander Pierce</span> - </a> - <ul class="dropdown-menu"> - <!-- User image --> - <li class="user-header"> - <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" /> - <p> - Alexander Pierce - Web Developer - <small>Member since Nov. 2012</small> - </p> - </li> - <!-- Menu Body --> - <li class="user-body"> - <div class="col-xs-4 text-center"> - <a href="#">Followers</a> - </div> - <div class="col-xs-4 text-center"> - <a href="#">Sales</a> - </div> - <div class="col-xs-4 text-center"> - <a href="#">Friends</a> - </div> - </li> - <!-- Menu Footer--> - <li class="user-footer"> - <div class="pull-left"> - <a href="#" class="btn btn-default btn-flat">Profile</a> - </div> - <div class="pull-right"> - <a href="#" class="btn btn-default btn-flat">Sign out</a> - </div> - </li> - </ul> - </li> - </ul> - </div> - </nav> - </header> - - <!-- =============================================== --> - - <!-- Left side column. contains the sidebar --> - <aside class="main-sidebar"> - <!-- sidebar: style can be found in sidebar.less --> - <section class="sidebar"> - <!-- Sidebar user panel --> - <div class="user-panel"> - <div class="pull-left image"> - <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" /> - </div> - <div class="pull-left info"> - <p>Alexander Pierce</p> - - <a href="#"><i class="fa fa-circle text-success"></i> Online</a> - </div> - </div> - <!-- search form --> - <form action="#" method="get" class="sidebar-form"> - <div class="input-group"> - <input type="text" name="q" class="form-control" placeholder="Search..."/> - <span class="input-group-btn"> - <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button> - </span> - </div> - </form> - <!-- /.search form --> - <!-- sidebar menu: : style can be found in sidebar.less --> - <ul class="sidebar-menu"> - <li class="header">MAIN NAVIGATION</li> - <li class="treeview"> - <a href="#"> - <i class="fa fa-dashboard"></i> <span>Dashboard</span> <i class="fa fa-angle-left pull-right"></i> - </a> - <ul class="treeview-menu"> - <li><a href="index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li> - <li><a href="index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li> - </ul> - </li> - <li class="treeview"> - <a href="#"> - <i class="fa fa-files-o"></i> - <span>Layout Options</span> - <span class="label label-primary pull-right">4</span> - </a> - <ul class="treeview-menu"> - <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li> - <li><a href="../layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li> - <li><a href="../layout/fixed.html"><i class="fa fa-circle-o"></i> Fixed</a></li> - <li><a href="../layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li> - </ul> - </li> - <li> - <a href="../widgets.html"> - <i class="fa fa-th"></i> <span>Widgets</span> <small class="label pull-right bg-green">Hot</small> - </a> - </li> - <li class="treeview"> - <a href="#"> - <i class="fa fa-pie-chart"></i> - <span>Charts</span> - <i class="fa fa-angle-left pull-right"></i> - </a> - <ul class="treeview-menu"> - <li><a href="../charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li> - <li><a href="../charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li> - <li><a href="../charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li> - </ul> - </li> - <li class="treeview"> - <a href="#"> - <i class="fa fa-laptop"></i> - <span>UI Elements</span> - <i class="fa fa-angle-left pull-right"></i> - </a> - <ul class="treeview-menu"> - <li><a href="../UI/general.html"><i class="fa fa-circle-o"></i> General</a></li> - <li><a href="../UI/icons.html"><i class="fa fa-circle-o"></i> Icons</a></li> - <li><a href="../UI/buttons.html"><i class="fa fa-circle-o"></i> Buttons</a></li> - <li><a href="../UI/sliders.html"><i class="fa fa-circle-o"></i> Sliders</a></li> - <li><a href="../UI/timeline.html"><i class="fa fa-circle-o"></i> Timeline</a></li> - <li><a href="../UI/modals.html"><i class="fa fa-circle-o"></i> Modals</a></li> - </ul> - </li> - <li class="treeview"> - <a href="#"> - <i class="fa fa-edit"></i> <span>Forms</span> - <i class="fa fa-angle-left pull-right"></i> - </a> - <ul class="treeview-menu"> - <li><a href="../forms/general.html"><i class="fa fa-circle-o"></i> General Elements</a></li> - <li><a href="../forms/advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li> - <li><a href="../forms/editors.html"><i class="fa fa-circle-o"></i> Editors</a></li> - </ul> - </li> - <li class="treeview"> - <a href="#"> - <i class="fa fa-table"></i> <span>Tables</span> - <i class="fa fa-angle-left pull-right"></i> - </a> - <ul class="treeview-menu"> - <li><a href="../tables/simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li> - <li><a href="../tables/data.html"><i class="fa fa-circle-o"></i> Data tables</a></li> - </ul> - </li> - <li> - <a href="../calendar.html"> - <i class="fa fa-calendar"></i> <span>Calendar</span> - <small class="label pull-right bg-red">3</small> - </a> - </li> - <li> - <a href="../mailbox/mailbox.html"> - <i class="fa fa-envelope"></i> <span>Mailbox</span> - <small class="label pull-right bg-yellow">12</small> - </a> - </li> - <li class="treeview active"> - <a href="#"> - <i class="fa fa-folder"></i> <span>Examples</span> - <i class="fa fa-angle-left pull-right"></i> - </a> - <ul class="treeview-menu"> - <li><a href="invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li> - <li><a href="login.html"><i class="fa fa-circle-o"></i> Login</a></li> - <li><a href="register.html"><i class="fa fa-circle-o"></i> Register</a></li> - <li><a href="lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li> - <li><a href="404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li> - <li><a href="500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li> - <li class="active"><a href="blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li> - </ul> - </li> - <li class="treeview"> - <a href="#"> - <i class="fa fa-share"></i> <span>Multilevel</span> - <i class="fa fa-angle-left pull-right"></i> - </a> - <ul class="treeview-menu"> - <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li> - <li> - <a href="#"><i class="fa fa-circle-o"></i> Level One <i class="fa fa-angle-left pull-right"></i></a> - <ul class="treeview-menu"> - <li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li> - <li> - <a href="#"><i class="fa fa-circle-o"></i> Level Two <i class="fa fa-angle-left pull-right"></i></a> - <ul class="treeview-menu"> - <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li> - <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li> - </ul> - </li> - </ul> - </li> - <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li> - </ul> - </li> - <li><a href="documentation/index.html"><i class="fa fa-book"></i> Documentation</a></li> - <li class="header">LABELS</li> - <li><a href="#"><i class="fa fa-circle-o text-danger"></i> Important</a></li> - <li><a href="#"><i class="fa fa-circle-o text-warning"></i> Warning</a></li> - <li><a href="#"><i class="fa fa-circle-o text-info"></i> Information</a></li> - </ul> - </section> - <!-- /.sidebar --> - </aside> - - <!-- =============================================== --> - - <!-- Right side column. Contains the navbar and content of the page --> - <div class="content-wrapper"> - <!-- Content Header (Page header) --> - <section class="content-header"> - <h1> - Blank page - <small>it all starts here</small> - </h1> - <ol class="breadcrumb"> - <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li> - <li><a href="#">Examples</a></li> - <li class="active">Blank page</li> - </ol> - </section> - - <!-- Main content --> - <section class="content"> - - <!-- Default box --> - <div class="box"> - <div class="box-header with-border"> - <h3 class="box-title">Title</h3> - <div class="box-tools pull-right"> - <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button> - <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button> - </div> - </div> - <div class="box-body"> - Start creating your amazing application! - </div><!-- /.box-body --> - <div class="box-footer"> - Footer - </div><!-- /.box-footer--> - </div><!-- /.box --> - - </section><!-- /.content --> - </div><!-- /.content-wrapper --> - - <footer class="main-footer"> - <div class="pull-right hidden-xs"> - <b>Version</b> 2.0 - </div> - <strong>Copyright © 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved. - </footer> - </div><!-- ./wrapper --> - - <!-- jQuery 2.1.3 --> - <script src="plugins/jQuery/jQuery-2.1.3.min.js"></script> - <!-- Bootstrap 3.3.2 JS --> - <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script> - <!-- SlimScroll --> - <script src="plugins/slimScroll/jquery.slimScroll.min.js" type="text/javascript"></script> - <!-- FastClick --> - <script src='plugins/fastclick/fastclick.min.js'></script> - <!-- AdminLTE App --> - <script src="dist/js/app.min.js" type="text/javascript"></script> - <!-- AdminLTE for demo purposes --> - <script src="dist/js/demo.js" type="text/javascript"></script> - </body> -</html>+
AdminLTE 2.0 provides a set of options to apply to your main layout. Each on of these classes can be added diff --git a/documentation/build/index.html b/documentation/build/index.html index 262872c1ccd92f571823657a43a5ccfc56624066..141d4e84ccf933e7d2597ab60ae5c60dd4fd134c 100644 --- a/documentation/build/index.html +++ b/documentation/build/index.html @@ -63,6 +63,7 @@
Modifying the options of AdminLTE's app.js can be done using one of the following ways.
+ +Within the main Javascript file, modify the $.AdminLTE.options object to suit your use case.
Alternatively, you can define a global options variable named AdminLTEOptions and initialize it before loading app.js.
Example
+<script>
+ var AdminLTEOptions = {
+ //Enable sidebar expand on hover effect for sidebar mini
+ //This option is forced to true if both the fixed layout and sidebar mini
+ //are used together
+ sidebarExpandOnHover: true,
+ //BoxRefresh Plugin
+ enableBoxRefresh: true,
+ //Bootstrap.js tooltip
+ enableBSToppltip: true
+ };
+</script>
+<script src='dist/js/app.js' type='text/javascript'></script>{
+ //Add slimscroll to navbar menus
+ //This requires you to load the slimscroll plugin
+ //in every page before app.js
+ navbarMenuSlimscroll: true,
+ navbarMenuSlimscrollWidth: "3px", //The width of the scroll bar
+ navbarMenuHeight: "200px", //The height of the inner menu
+ //Sidebar push menu toggle button selector
+ sidebarToggleSelector: "[data-toggle='offcanvas']",
+ //Activate sidebar push menu
+ sidebarPushMenu: true,
+ //Activate sidebar slimscroll if the fixed layout is set (requires SlimScroll Plugin)
+ sidebarSlimScroll: true,
+ //Enable sidebar expand on hover effect for sidebar mini
+ //This option is forced to true if both the fixed layout and sidebar mini
+ //are used together
+ sidebarExpandOnHover: false,
+ //BoxRefresh Plugin
+ enableBoxRefresh: true,
+ //Bootstrap.js tooltip
+ enableBSToppltip: true,
+ BSTooltipSelector: "[data-toggle='tooltip']",
+ //Enable Fast Click. Fastclick.js creates a more
+ //native touch experience with touch devices. If you
+ //choose to enable the plugin, make sure you load the script
+ //before AdminLTE's app.js
+ enableFastclick: true,
+ //Control Sidebar Options
+ enableControlSidebar: true,
+ controlSidebarOptions: {
+ //Which button should trigger the open/close event
+ toggleBtnSelector: "[data-toggle='control-sidebar']",
+ //The sidebar selector
+ selector: ".control-sidebar",
+ //Enable slide over content
+ slide: true
+ },
+ //Box Widget Plugin. Enable this plugin
+ //to allow boxes to be collapsed and/or removed
+ enableBoxWidget: true,
+ //Box Widget plugin options
+ boxWidgetOptions: {
+ boxWidgetIcons: {
+ //Collapse icon
+ collapse: 'fa-minus',
+ //Open icon
+ open: 'fa-plus',
+ //Remove icon
+ remove: 'fa-times'
+ },
+ boxWidgetSelectors: {
+ //Remove button selector
+ remove: '[data-widget="remove"]',
+ //Collapse button selector
+ collapse: '[data-widget="collapse"]'
+ }
+ },
+ //Direct Chat plugin options
+ directChat: {
+ //Enable direct chat by default
+ enable: true,
+ //The button to open and close the chat contacts pane
+ contactToggleSelector: '[data-widget="chat-pane-toggle"]'
+ },
+ //Define the set of colors to use globally around the website
+ colors: {
+ lightBlue: "#3c8dbc",
+ red: "#f56954",
+ green: "#00a65a",
+ aqua: "#00c0ef",
+ yellow: "#f39c12",
+ blue: "#0073b7",
+ navy: "#001F3F",
+ teal: "#39CCCC",
+ olive: "#3D9970",
+ lime: "#01FF70",
+ orange: "#FF851B",
+ fuchsia: "#F012BE",
+ purple: "#8E24AA",
+ maroon: "#D81B60",
+ black: "#222222",
+ gray: "#d2d6de"
+ },
+ //The standard screen sizes that bootstrap uses.
+ //If you change these in the variables.less file, change
+ //them here too.
+ screenSizes: {
+ xs: 480,
+ sm: 768,
+ md: 992,
+ lg: 1200
+ }
+}