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

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

@ -456,9 +456,42 @@
</ul><!-- /.sidebar-menu --> </ul><!-- /.sidebar-menu -->
</div><!-- /.sidebar --> </div><!-- /.sidebar -->
&LT;/div>&LT;!-- /.main-sidebar --> &LT;/div>&LT;!-- /.main-sidebar --></pre>
</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> <h3 id="component-info-box">Info Box</h3>
@ -504,16 +537,14 @@
</div><!-- /.col --> </div><!-- /.col -->
</div><!-- /.row --> </div><!-- /.row -->
<p class="lead">Markup</p> <p class="lead">Markup</p>
<pre class="prettyprint"><code class="html"> <pre class="prettyprint"><code class="lang-html">&LT;div class="info-box">
&LT;div class="info-box">
&LT;-- Apply any bg-* class to to the icon to color it --> &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;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;div class="info-box-content">
&LT;span class="info-box-text">Likes&LT;/span> &LT;span class="info-box-text">Likes&LT;/span>
&LT;span class="info-box-number">93,139&LT;/span> &LT;span class="info-box-number">93,139&LT;/span>
&LT;/div>&LT;!-- /.info-box-content --> &LT;/div>&LT;!-- /.info-box-content -->
&LT;/div>&LT;!-- /.info-box --> &LT;/div>&LT;!-- /.info-box --></code></pre>
</code></pre>
<h4>Second Type of Info Boxes</h4> <h4>Second Type of Info Boxes</h4>
<div class="row"> <div class="row">
@ -579,8 +610,7 @@
</div><!-- /.col --> </div><!-- /.col -->
</div><!-- /.row --> </div><!-- /.row -->
<p class="lead">Markup</p> <p class="lead">Markup</p>
<pre class="prettyprint"><code class="html"> <pre class="prettyprint"><code class="lang-html">&LT;-- Apply any bg-* class to to the info-box to color it -->
&LT;-- Apply any bg-* class to to the info-box to color it -->
&LT;div class="info-box bg-red"> &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;span class="info-box-icon">&LT;i class="fa fa-comments-o">&LT;/i>&LT;/span>
&LT;div class="info-box-content"> &LT;div class="info-box-content">
@ -594,8 +624,7 @@
70% Increase in 30 Days 70% Increase in 30 Days
&LT;/span> &LT;/span>
&LT;/div>&LT;!-- /.info-box-content --> &LT;/div>&LT;!-- /.info-box-content -->
&LT;/div>&LT;!-- /.info-box --> &LT;/div>&LT;!-- /.info-box --></code></pre>
</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 <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> 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 The footer of the box
</div><!-- box-footer --> </div><!-- box-footer -->
</div><!-- /.box --> </div><!-- /.box -->
<pre class="prettyprint"> <pre class="prettyprint">&LT;div class="box">
&LT;div class="box">
&LT;div class="box-header with-border"> &LT;div class="box-header with-border">
&LT;h3 class="box-title">Default Box Example&LT;/h3> &LT;h3 class="box-title">Default Box Example&LT;/h3>
&LT;div class="box-tools pull-right"> &LT;div class="box-tools pull-right">
@ -703,8 +731,7 @@
</div><!-- /.box --> </div><!-- /.box -->
</div> </div>
</div><!-- /.row --> </div><!-- /.row -->
<pre class="prettyprint"> <pre class="prettyprint">&LT;div class="box box-default">...&LT;/div>
&LT;div class="box box-default">...&LT;/div>
&LT;div class="box box-primary">...&LT;/div> &LT;div class="box box-primary">...&LT;/div>
&LT;div class="box box-info">...&LT;/div> &LT;div class="box box-info">...&LT;/div>
&LT;div class="box box-warning">...&LT;/div> &LT;div class="box box-warning">...&LT;/div>

14
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="#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><a href="#adminlte-options"><i class='fa fa-circle-o'></i> Javascript Options</a></li>
<li class='treeview' id='scrollspy-components'> <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'> <ul class='nav treeview-menu'>
<li><a href='#component-main-header'>Main Header</a></li> <li><a href='#component-main-header'>Main Header</a></li>
<li><a href='#component-sidebar'>Sidebar</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-info-box'>Info Box</a></li>
<li><a href='#component-box'>Boxes</a></li> <li><a href='#component-box'>Boxes</a></li>
<li><a href='#component-direct-chat'>Direct Chat</a></li> <li><a href='#component-direct-chat'>Direct Chat</a></li>
@ -162,6 +163,17 @@ include "license.html"
<strong>Copyright &copy; 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved. <strong>Copyright &copy; 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
</footer> </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 --> </div><!-- ./wrapper -->
<!-- jQuery 2.1.3 --> <!-- jQuery 2.1.3 -->

4
documentation/docs.js
View File

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

69
documentation/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="#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><a href="#adminlte-options"><i class='fa fa-circle-o'></i> Javascript Options</a></li>
<li class='treeview' id='scrollspy-components'> <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'> <ul class='nav treeview-menu'>
<li><a href='#component-main-header'>Main Header</a></li> <li><a href='#component-main-header'>Main Header</a></li>
<li><a href='#component-sidebar'>Sidebar</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-info-box'>Info Box</a></li>
<li><a href='#component-box'>Boxes</a></li> <li><a href='#component-box'>Boxes</a></li>
<li><a href='#component-direct-chat'>Direct Chat</a></li> <li><a href='#component-direct-chat'>Direct Chat</a></li>
@ -825,9 +826,42 @@ AdminLTE/
&LT;/ul>&LT;!-- /.sidebar-menu --> &LT;/ul>&LT;!-- /.sidebar-menu -->
&LT;/div>&LT;!-- /.sidebar --> &LT;/div>&LT;!-- /.sidebar -->
&LT;/div>&LT;!-- /.main-sidebar --> &LT;/div>&LT;!-- /.main-sidebar --></pre>
</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> <h3 id="component-info-box">Info Box</h3>
@ -873,16 +907,14 @@ AdminLTE/
</div><!-- /.col --> </div><!-- /.col -->
</div><!-- /.row --> </div><!-- /.row -->
<p class="lead">Markup</p> <p class="lead">Markup</p>
<pre class="prettyprint"><code class="html"> <pre class="prettyprint"><code class="lang-html">&LT;div class="info-box">
&LT;div class="info-box">
&LT;-- Apply any bg-* class to to the icon to color it --> &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;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;div class="info-box-content">
&LT;span class="info-box-text">Likes&LT;/span> &LT;span class="info-box-text">Likes&LT;/span>
&LT;span class="info-box-number">93,139&LT;/span> &LT;span class="info-box-number">93,139&LT;/span>
&LT;/div>&LT;!-- /.info-box-content --> &LT;/div>&LT;!-- /.info-box-content -->
&LT;/div>&LT;!-- /.info-box --> &LT;/div>&LT;!-- /.info-box --></code></pre>
</code></pre>
<h4>Second Type of Info Boxes</h4> <h4>Second Type of Info Boxes</h4>
<div class="row"> <div class="row">
@ -948,8 +980,7 @@ AdminLTE/
</div><!-- /.col --> </div><!-- /.col -->
</div><!-- /.row --> </div><!-- /.row -->
<p class="lead">Markup</p> <p class="lead">Markup</p>
<pre class="prettyprint"><code class="html"> <pre class="prettyprint"><code class="lang-html">&LT;-- Apply any bg-* class to to the info-box to color it -->
&LT;-- Apply any bg-* class to to the info-box to color it -->
&LT;div class="info-box bg-red"> &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;span class="info-box-icon">&LT;i class="fa fa-comments-o">&LT;/i>&LT;/span>
&LT;div class="info-box-content"> &LT;div class="info-box-content">
@ -963,8 +994,7 @@ AdminLTE/
70% Increase in 30 Days 70% Increase in 30 Days
&LT;/span> &LT;/span>
&LT;/div>&LT;!-- /.info-box-content --> &LT;/div>&LT;!-- /.info-box-content -->
&LT;/div>&LT;!-- /.info-box --> &LT;/div>&LT;!-- /.info-box --></code></pre>
</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 <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> first style apply any bg-* class to the icon itself. For the other style, apply the bg-* class to the info-box div.</p>
<!-- ===================================================================== --> <!-- ===================================================================== -->
@ -990,8 +1020,7 @@ AdminLTE/
The footer of the box The footer of the box
</div><!-- box-footer --> </div><!-- box-footer -->
</div><!-- /.box --> </div><!-- /.box -->
<pre class="prettyprint"> <pre class="prettyprint">&LT;div class="box">
&LT;div class="box">
&LT;div class="box-header with-border"> &LT;div class="box-header with-border">
&LT;h3 class="box-title">Default Box Example&LT;/h3> &LT;h3 class="box-title">Default Box Example&LT;/h3>
&LT;div class="box-tools pull-right"> &LT;div class="box-tools pull-right">
@ -1072,8 +1101,7 @@ AdminLTE/
</div><!-- /.box --> </div><!-- /.box -->
</div> </div>
</div><!-- /.row --> </div><!-- /.row -->
<pre class="prettyprint"> <pre class="prettyprint">&LT;div class="box box-default">...&LT;/div>
&LT;div class="box box-default">...&LT;/div>
&LT;div class="box box-primary">...&LT;/div> &LT;div class="box box-primary">...&LT;/div>
&LT;div class="box box-info">...&LT;/div> &LT;div class="box box-info">...&LT;/div>
&LT;div class="box box-warning">...&LT;/div> &LT;div class="box box-warning">...&LT;/div>
@ -2068,6 +2096,17 @@ AdminLTE/
<strong>Copyright &copy; 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved. <strong>Copyright &copy; 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
</footer> </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 --> </div><!-- ./wrapper -->
<!-- jQuery 2.1.3 --> <!-- jQuery 2.1.3 -->