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

Updated documentation

pull/399/head
Abdullah Almsaeed 2015-05-07 00:04:48 -04:00
parent d72176caa7
commit 2b8e2c3859
4 changed files with 2061 additions and 1983 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
documentation/build/include/components.html
View File

@ -303,7 +303,7 @@
<div class="box box-solid">
<div class="box-body layout-top-nav">
<span class="eg">Top Nav Example</span>
<header class="main-header">
<header class="main-header">
<nav class="navbar navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
@ -356,7 +356,7 @@
</div>
</div>
<pre class='prettyprint'>
&LT;header class="main-header">
&LT;header class="main-header">
&LT;nav class="navbar navbar-static-top">
&LT;div class="container-fluid">
&LT;div class="navbar-header">
@ -456,9 +456,42 @@
&LT;/ul>&LT;!-- /.sidebar-menu -->
&LT;/div>&LT;!-- /.sidebar -->
&LT;/div>&LT;!-- /.main-sidebar -->
</pre>
&LT;/div>&LT;!-- /.main-sidebar --></pre>
<h3 id="component-control-sidebar">Control Sidebar</h3>
<p class="lead">Control sidebar is the right side bar. It can be used for many purposes and is extremely easy
to create. The sidebar ships with two different show/hide styles. The first allows the sidebar to
slide over the content. The second pushes the content to make space for the sidebar. Either of
these methods can be set through the <a href="#adminlte-options">Javascript options</a>.</p>
<p class="lead">The following code should be placed within the <code>.wrapper</code> div. I prefer
to place it right after the footer.</p>
<p class="lead">Dark Sidebar Markup</p>
<pre class="prettyprint"><code class="lang-html">&LT;!-- The Right Sidebar -->
&LT;aside class="control-sidebar control-sidebar-dark">
&LT;!-- Content of the sidebar goes here -->
&LT;/aside>
&LT;!-- The sidebar's background -->
&LT;!-- This div must placed right after the sidebar for it to work-->
&LT;div class="control-sidebar-bg">&LT;/div></code></pre>
<p class="lead">Light Sidebar Markup</p>
<pre class="prettyprint"><code class="lang-html">&LT;!-- The Right Sidebar -->
&LT;aside class="control-sidebar control-sidebar-light">
&LT;!-- Content of the sidebar goes here -->
&LT;/aside>
&LT;!-- The sidebar's background -->
&LT;!-- This div must placed right after the sidebar for it to work-->
&LT;div class="control-sidebar-bg">&LT;/div></code></pre>
<p class='lead'>Once you create the sidebar, you will need a toggle button to open/close it.
By adding the attribute <code>data-toggle="control-sidebar"</code> to any button, it will
automatically act as the toggle button.</p>
<p class="lead">Toggle Button Example</p>
<button class="btn btn-primary" data-toggle="control-sidebar">Toggle Right Sidebar</button><br /><br />
<p class="lead">Sidebar Toggle Markup</p>
<pre class="prettyprint"><code class="lang-html">&LT;button class="btn btn-default" data-toggle="control-sidebar">Toggle Right Sidebar&LT;/button></code></pre>
<!-- ===================================================================== -->
<h3 id="component-info-box">Info Box</h3>
@ -504,16 +537,14 @@
</div><!-- /.col -->
</div><!-- /.row -->
<p class="lead">Markup</p>
<pre class="prettyprint"><code class="html">
&LT;div class="info-box">
<pre class="prettyprint"><code class="lang-html">&LT;div class="info-box">
&LT;-- Apply any bg-* class to to the icon to color it -->
&LT;span class="info-box-icon bg-red">&LT;i class="fa fa-star-o">&LT;/i>&LT;/span>
&LT;div class="info-box-content">
&LT;span class="info-box-text">Likes&LT;/span>
&LT;span class="info-box-number">93,139&LT;/span>
&LT;/div>&LT;!-- /.info-box-content -->
&LT;/div>&LT;!-- /.info-box -->
</code></pre>
&LT;/div>&LT;!-- /.info-box --></code></pre>
<h4>Second Type of Info Boxes</h4>
<div class="row">
@ -579,8 +610,7 @@
</div><!-- /.col -->
</div><!-- /.row -->
<p class="lead">Markup</p>
<pre class="prettyprint"><code class="html">
&LT;-- Apply any bg-* class to to the info-box to color it -->
<pre class="prettyprint"><code class="lang-html">&LT;-- Apply any bg-* class to to the info-box to color it -->
&LT;div class="info-box bg-red">
&LT;span class="info-box-icon">&LT;i class="fa fa-comments-o">&LT;/i>&LT;/span>
&LT;div class="info-box-content">
@ -594,9 +624,8 @@
70% Increase in 30 Days
&LT;/span>
&LT;/div>&LT;!-- /.info-box-content -->
&LT;/div>&LT;!-- /.info-box -->
</code></pre>
<p class="lead">The only thing you need to change to alternate between these style is change the placement of the bg-* class. For the
&LT;/div>&LT;!-- /.info-box --></code></pre>
<p class="lead">The only thing you need to change to alternate between these style is change the placement of the bg-* class. For the
first style apply any bg-* class to the icon itself. For the other style, apply the bg-* class to the info-box div.</p>
<!-- ===================================================================== -->
@ -621,8 +650,7 @@
The footer of the box
</div><!-- box-footer -->
</div><!-- /.box -->
<pre class="prettyprint">
&LT;div class="box">
<pre class="prettyprint">&LT;div class="box">
&LT;div class="box-header with-border">
&LT;h3 class="box-title">Default Box Example&LT;/h3>
&LT;div class="box-tools pull-right">
@ -703,8 +731,7 @@
</div><!-- /.box -->
</div>
</div><!-- /.row -->
<pre class="prettyprint">
&LT;div class="box box-default">...&LT;/div>
<pre class="prettyprint">&LT;div class="box box-default">...&LT;/div>
&LT;div class="box box-primary">...&LT;/div>
&LT;div class="box box-info">...&LT;/div>
&LT;div class="box box-warning">...&LT;/div>
@ -934,7 +961,7 @@
<div class="box box-default">
<div class="box-header with-border">
<h3 class="box-title">Tootips on buttons</h3>
<div class="box-tools pull-right">
<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><!-- /.box-tools -->
@ -947,7 +974,7 @@
&LT;div class="box box-default">
&LT;div class="box-header with-border">
&LT;h3 class="box-title">Tooltips on buttons&LT;/h3>
&LT;div class="box-tools pull-right">
&LT;div class="box-tools pull-right">
&LT;button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">&LT;i class="fa fa-minus">&LT;/i>&LT;/button>
&LT;button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">&LT;i class="fa fa-times">&LT;/i>&LT;/button>
&LT;/div>&LT;!-- /.box-tools -->
@ -974,7 +1001,7 @@
<i class="fa fa-refresh fa-spin"></i>
</div>
<!-- end loading -->
</div><!-- /.box -->
</div><!-- /.box -->
</div><!-- /.col -->
<div class="col-md-6">
@ -990,11 +1017,11 @@
<i class="fa fa-refresh fa-spin"></i>
</div>
<!-- end loading -->
</div><!-- /.box -->
</div><!-- /.box -->
</div><!-- /.col -->
</div><!-- /.row -->
<p class="lead">
To simulate a loading state, simply place this code before the <code>.box</code> closing tag.
To simulate a loading state, simply place this code before the <code>.box</code> closing tag.
</p>
<pre class="prettyprint"><code class="html">&LT;div class="overlay">
&LT;i class="fa fa-refresh fa-spin">&LT;/i>
@ -1042,7 +1069,7 @@
<div class="direct-chat-text">
You better believe it!
</div><!-- /.direct-chat-text -->
</div><!-- /.direct-chat-msg -->
</div><!-- /.direct-chat-msg -->
</div><!--/.direct-chat-messages-->
<!-- Contacts are loaded here -->
@ -1059,7 +1086,7 @@
<span class='contacts-list-msg'>How have you been? I was...</span>
</div><!-- /.contacts-list-info -->
</a>
</li><!-- End Contact Item -->
</li><!-- End Contact Item -->
</ul><!-- /.contatcts-list -->
</div><!-- /.direct-chat-pane -->
</div><!-- /.box-body -->
@ -1113,7 +1140,7 @@
<div class="direct-chat-text">
You better believe it!
</div><!-- /.direct-chat-text -->
</div><!-- /.direct-chat-msg -->
</div><!-- /.direct-chat-msg -->
</div><!--/.direct-chat-messages-->
<!-- Contacts are loaded here -->
@ -1130,7 +1157,7 @@
<span class='contacts-list-msg'>How have you been? I was...</span>
</div><!-- /.contacts-list-info -->
</a>
</li><!-- End Contact Item -->
</li><!-- End Contact Item -->
</ul><!-- /.contatcts-list -->
</div><!-- /.direct-chat-pane -->
</div><!-- /.box-body -->
@ -1184,7 +1211,7 @@
<div class="direct-chat-text">
You better believe it!
</div><!-- /.direct-chat-text -->
</div><!-- /.direct-chat-msg -->
</div><!-- /.direct-chat-msg -->
</div><!--/.direct-chat-messages-->
<!-- Contacts are loaded here -->
@ -1201,7 +1228,7 @@
<span class='contacts-list-msg'>How have you been? I was...</span>
</div><!-- /.contacts-list-info -->
</a>
</li><!-- End Contact Item -->
</li><!-- End Contact Item -->
</ul><!-- /.contatcts-list -->
</div><!-- /.direct-chat-pane -->
</div><!-- /.box-body -->
@ -1255,7 +1282,7 @@
<div class="direct-chat-text">
You better believe it!
</div><!-- /.direct-chat-text -->
</div><!-- /.direct-chat-msg -->
</div><!-- /.direct-chat-msg -->
</div><!--/.direct-chat-messages-->
<!-- Contacts are loaded here -->
@ -1272,7 +1299,7 @@
<span class='contacts-list-msg'>How have you been? I was...</span>
</div><!-- /.contacts-list-info -->
</a>
</li><!-- End Contact Item -->
</li><!-- End Contact Item -->
</ul><!-- /.contatcts-list -->
</div><!-- /.direct-chat-pane -->
</div><!-- /.box-body -->
@ -1330,7 +1357,7 @@
&LT;div class="direct-chat-text">
You better believe it!
&LT;/div>&LT;!-- /.direct-chat-text -->
&LT;/div>&LT;!-- /.direct-chat-msg -->
&LT;/div>&LT;!-- /.direct-chat-msg -->
&LT;/div>&LT;!--/.direct-chat-messages-->
&LT;!-- Contacts are loaded here -->
@ -1347,7 +1374,7 @@
&LT;span class='contacts-list-msg'>How have you been? I was...&LT;/span>
&LT;/div>&LT;!-- /.contacts-list-info -->
&LT;/a>
&LT;/li>&LT;!-- End Contact Item -->
&LT;/li>&LT;!-- End Contact Item -->
&LT;/ul>&LT;!-- /.contatcts-list -->
&LT;/div>&LT;!-- /.direct-chat-pane -->
&LT;/div>&LT;!-- /.box-body -->
@ -1365,7 +1392,7 @@
<p>Of course you can use direct chat with a solid box by adding the class <code>solid-box</code> to the box. Here are a couple of examples:</p>
<!-- Direct Chat With Solid Boxes -->
<div class="row">
<div class="row">
<div class="col-md-6">
<!-- DIRECT CHAT WARNING -->
<div class="box box-primary box-solid direct-chat direct-chat-primary">
@ -1403,7 +1430,7 @@
<div class="direct-chat-text">
You better believe it!
</div><!-- /.direct-chat-text -->
</div><!-- /.direct-chat-msg -->
</div><!-- /.direct-chat-msg -->
</div><!--/.direct-chat-messages-->
<!-- Contacts are loaded here -->
@ -1420,7 +1447,7 @@
<span class='contacts-list-msg'>How have you been? I was...</span>
</div><!-- /.contacts-list-info -->
</a>
</li><!-- End Contact Item -->
</li><!-- End Contact Item -->
</ul><!-- /.contatcts-list -->
</div><!-- /.direct-chat-pane -->
</div><!-- /.box-body -->
@ -1474,7 +1501,7 @@
<div class="direct-chat-text">
You better believe it!
</div><!-- /.direct-chat-text -->
</div><!-- /.direct-chat-msg -->
</div><!-- /.direct-chat-msg -->
</div><!--/.direct-chat-messages-->
<!-- Contacts are loaded here -->
@ -1491,7 +1518,7 @@
<span class='contacts-list-msg'>How have you been? I was...</span>
</div><!-- /.contacts-list-info -->
</a>
</li><!-- End Contact Item -->
</li><!-- End Contact Item -->
</ul><!-- /.contatcts-list -->
</div><!-- /.direct-chat-pane -->
</div><!-- /.box-body -->

66
documentation/build/index.html
View File

@ -65,10 +65,11 @@
<li><a href="#layout"><i class='fa fa-circle-o'></i> Layout</a></li>
<li><a href="#adminlte-options"><i class='fa fa-circle-o'></i> Javascript Options</a></li>
<li class='treeview' id='scrollspy-components'>
<a href="#components"><i class='fa fa-circle-o'></i> Components</a>
<a href="javascript::;"><i class='fa fa-circle-o'></i> Components</a>
<ul class='nav treeview-menu'>
<li><a href='#component-main-header'>Main Header</a></li>
<li><a href='#component-sidebar'>Sidebar</a></li>
<li><a href='#component-control-sidebar'>Control Sidebar</a></li>
<li><a href='#component-info-box'>Info Box</a></li>
<li><a href='#component-box'>Boxes</a></li>
<li><a href='#component-direct-chat'>Direct Chat</a></li>
@ -102,55 +103,55 @@
<!-- Main content -->
<div class="content body">
include "introduction.html"
include "introduction.html"
<!-- ============================================================= -->
<!-- ============================================================= -->
include "download.html"
include "download.html"
<!-- ============================================================= -->
<!-- ============================================================= -->
include "dependencies.html"
include "dependencies.html"
<!-- ============================================================= -->
<!-- ============================================================= -->
include "advice.html"
include "advice.html"
<!-- ============================================================= -->
<!-- ============================================================= -->
include "layout.html"
include "layout.html"
<!-- ============================================================= -->
<!-- ============================================================= -->
include "adminlte-options.html"
include "adminlte-options.html"
<!-- ============================================================= -->
<!-- ============================================================= -->
include "components.html"
include "components.html"
<!-- ============================================================= -->
<!-- ============================================================= -->
include "plugins.html"
include "plugins.html"
<!-- ============================================================= -->
<!-- ============================================================= -->
include "browsers.html"
include "browsers.html"
<!-- ============================================================= -->
<!-- ============================================================= -->
include "upgrade.html"
include "upgrade.html"
<!-- ============================================================= -->
<!-- ============================================================= -->
include "implementations.html"
include "implementations.html"
<!-- ============================================================= -->
<!-- ============================================================= -->
include "faq.html"
include "faq.html"
<!-- ============================================================= -->
<!-- ============================================================= -->
include "license.html"
include "license.html"
</div><!-- /.content -->
</div><!-- /.content-wrapper -->
@ -162,6 +163,17 @@ include "license.html"
<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">
<!-- Create the tabs -->
<div class="pad">
This is an example of the control sidebar.
</div>
</aside><!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class='control-sidebar-bg'></div>
</div><!-- ./wrapper -->
<!-- jQuery 2.1.3 -->
@ -169,7 +181,7 @@ include "license.html"
<!-- Bootstrap 3.3.2 JS -->
<script src="../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- FastClick -->
<script src='../plugins/fastclick/fastclick.min.js'></script>
<script src='../plugins/fastclick/fastclick.min.js'></script>
<!-- AdminLTE App -->
<script src="../dist/js/app.min.js" type="text/javascript"></script>
<!-- SlimScroll 1.3.0 -->

6
documentation/docs.js
View File

@ -1,5 +1,5 @@
/*
* Documentation specific JS script
* Documentation JS script
*/
$(function () {
var slideToTop = $("<div />");
@ -42,9 +42,9 @@ $(function () {
scrollTop: 0
}, 500);
});
$(".sidebar-menu li a").click(function () {
$(".sidebar-menu li:not(.treeview) a").click(function () {
var $this = $(this);
var target = $this.attr("href");
var target = $this.attr("href");
if (typeof target === 'string') {
$("body").animate({
scrollTop: ($(target).offset().top) + "px"

3871
documentation/index.html
View File

File diff suppressed because it is too large Load Diff