236 lines
6.5 KiB
HTML
236 lines
6.5 KiB
HTML
|
<section>
|
||
|
|
<h1 class="blue" data-id="#basics/content"><i class="ace-icon fa fa-desktop grey"></i> Content</h1>
|
||
|
|
|
||
|
|
<div class="hr hr-double hr32"></div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- #section:basics/content -->
|
||
|
|
<div class="help-content">
|
||
|
|
<h3 class="info-title smaller">1. Layout</h3>
|
||
|
|
<div class="info-section">
|
||
|
|
<ul class="info-list list-unstyled">
|
||
|
|
<li>
|
||
|
|
Default HTML layout used for content area is:
|
||
|
|
<ol>
|
||
|
|
<li>
|
||
|
|
<b>breadcrumbs</b> and searchbox
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<b>page title</b> optional
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<b>page conent</b>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<b>settings box</b> optional
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
|
||
|
|
<div class="space-4"></div>
|
||
|
|
<pre data-language="html">
|
||
|
|
<div class="main-container" id="main-container">
|
||
|
|
<!-- sidebar here -->
|
||
|
|
|
||
|
|
<div class="main-content"><div class="main-content-inner">
|
||
|
|
<div class="breadcrumbs" id="breadcrumbs">
|
||
|
|
<!-- breadcrumbs here -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="page-content">
|
||
|
|
<div class="ace-settings-container" id="ace-settings-container">
|
||
|
|
<!-- settings box goes here -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="page-header">
|
||
|
|
<!-- page header goes here -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xs-12">
|
||
|
|
<!-- page content goes here -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div><!-- /.page-content -->
|
||
|
|
</div></div><!-- /.main-content -->
|
||
|
|
|
||
|
|
<a class="btn-scroll-up" id="btn-scroll-up">
|
||
|
|
...
|
||
|
|
</a>
|
||
|
|
</div><!-- /.main-container -->
|
||
|
|
</pre>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
Starting with the following file you can find more details:
|
||
|
|
<br />
|
||
|
|
<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/</span>default.mustache</code>
|
||
|
|
</li>
|
||
|
|
</ul><!-- /.info-list -->
|
||
|
|
</div><!-- /.info-section -->
|
||
|
|
|
||
|
|
|
||
|
|
<h3 class="info-title smaller" data-id="#basics/content.breadcrumbs">2. Breadcrumbs</h3>
|
||
|
|
<!-- #section:basics/content.breadcrumbs -->
|
||
|
|
<div class="info-section">
|
||
|
|
<ul class="info-list list-unstyled">
|
||
|
|
<li>
|
||
|
|
<code>.breadcrumbs</code> is inside <code>.main-content</code> and
|
||
|
|
contains <code>ul.breadcrumb</code> and searchbox.
|
||
|
|
<br />
|
||
|
|
<pre data-language="html">
|
||
|
|
<div id="breadcrumbs" class="breadcrumbs">
|
||
|
|
<ul class="breadcrumb">
|
||
|
|
<li><i class="fa fa-home home-icon"></i> <a href="#">Home</a></li>
|
||
|
|
<li><a href="#">...</a></li>
|
||
|
|
<li><a href="#">...</a></li>
|
||
|
|
<li class="active">...</li>
|
||
|
|
</ul><!-- /.breadcrumb -->
|
||
|
|
|
||
|
|
<!-- searchbox -->
|
||
|
|
</div>
|
||
|
|
</pre>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
For an example on generating breadcrumbs list in your application,
|
||
|
|
see <a href="#basics/sidebar.mark_active" class="help-more">sidebar active item</a> section.
|
||
|
|
</li>
|
||
|
|
</ul><!-- /.info-list -->
|
||
|
|
</div><!-- /.info-section -->
|
||
|
|
<!-- /section:basics/content.breadcrumbs -->
|
||
|
|
|
||
|
|
|
||
|
|
<h3 class="info-title smaller" data-id="#basics/content.searchbox">3. Search box</h3>
|
||
|
|
<!-- #section:basics/content.searchbox -->
|
||
|
|
<div class="info-section">
|
||
|
|
<ul class="info-list list-unstyled">
|
||
|
|
<li>
|
||
|
|
Search box is inside <code>.breadcrumbs</code>
|
||
|
|
<br />
|
||
|
|
You can also have a search box inside <a href="#basics/navbar.form" class="help-more">.navbar</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<pre data-language="html">
|
||
|
|
<div id="nav-search" class="nav-search">
|
||
|
|
<form class="form-search">
|
||
|
|
<span class="input-icon">
|
||
|
|
<input type="text" class="nav-search-input" id="nav-search-input" autocomplete="off" placeholder="Search ..." />
|
||
|
|
<i class="ace-icon fa fa-search nav-search-icon"></i>
|
||
|
|
</span>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</pre>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
Optional auto complete is powered by
|
||
|
|
<a href="#plugins/bootstrap.typeahead" class="help-more">typeahead plugin</a> of Bootstrap 2,
|
||
|
|
which has been removed in Bootstrap 3, but is lightweight and functional.
|
||
|
|
<br />
|
||
|
|
<pre data-language="javascript">
|
||
|
|
//auto complete's data source is a static array
|
||
|
|
$('#nav-search-input').typeahead({
|
||
|
|
source: some_static_array,
|
||
|
|
updater: function (item) {
|
||
|
|
//when an item is selected from dropdown menu, focus back to input element
|
||
|
|
$('#nav-search-input').focus();
|
||
|
|
return item;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</pre>
|
||
|
|
|
||
|
|
You can also retrieve auto complete data from a remote database:
|
||
|
|
<pre data-language="javascript">
|
||
|
|
//auto complete's data is dynamically retrieved from server
|
||
|
|
source: function(query, process) {
|
||
|
|
$.ajax({url: 'source.php?q='+encodeURIComponent(query)}).done(function(result_items){
|
||
|
|
process(result_items);
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</pre>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
Adding <code>.minimized</code> class to <code>.nav-search</code> makes it minimized by default:
|
||
|
|
<pre data-language="html">
|
||
|
|
<div id="nav-search" class="nav-search minimized">
|
||
|
|
...
|
||
|
|
</div>
|
||
|
|
</pre>
|
||
|
|
</li>
|
||
|
|
</ul><!-- /.info-list -->
|
||
|
|
</div><!-- /.info-section -->
|
||
|
|
<!-- /section:basics/content.searchbox -->
|
||
|
|
|
||
|
|
|
||
|
|
<h3 class="info-title smaller" data-id="#basics/content.content">4. Page Title & Content</h3>
|
||
|
|
<!-- #section:basics/content.content -->
|
||
|
|
<div class="info-section">
|
||
|
|
<ul class="info-list list-unstyled">
|
||
|
|
<li>
|
||
|
|
<code>.page-content</code> should be after (optional) <code>.breadcrumbs</code>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
It contains optional settings box, optional header and the content area:
|
||
|
|
<pre data-language="html">
|
||
|
|
<div class="page-content">
|
||
|
|
<div class="ace-settings-container" id="ace-settings-container">
|
||
|
|
<!-- settings box goes here -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="page-header">
|
||
|
|
<!-- page header goes here -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xs-12">
|
||
|
|
<!-- page content goes here -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div><!-- /.page-content -->
|
||
|
|
</pre>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
Optional page header consists of a heading text and smaller description:
|
||
|
|
<pre data-language="html">
|
||
|
|
<div class="page-header">
|
||
|
|
<h1>
|
||
|
|
Dashboard
|
||
|
|
<small><i class="ace-icon fa fa-angle-double-right"></i> overview & stats</small>
|
||
|
|
</h1>
|
||
|
|
</div>
|
||
|
|
</pre>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
Please note that page content must be wrapped inside <code>.row</code> and <code>.col-xs-12</code>
|
||
|
|
<pre data-language="html">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xs-12">
|
||
|
|
<!-- page content goes here -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</pre>
|
||
|
|
</li>
|
||
|
|
</ul><!-- /.info-list -->
|
||
|
|
</div><!-- /.info-section -->
|
||
|
|
<!-- /section:basics/content.content -->
|
||
|
|
|
||
|
|
|
||
|
|
<h3 class="info-title smaller">5. Settings Box</h3>
|
||
|
|
<div class="info-section">
|
||
|
|
<ul class="info-list list-unstyled">
|
||
|
|
<li>
|
||
|
|
Settings box is optional.
|
||
|
|
For more info please see <a href="#settings.box" class="help-more">settings box section</a>
|
||
|
|
</li>
|
||
|
|
</ul><!-- /.info-list -->
|
||
|
|
</div><!-- /.info-section -->
|
||
|
|
|
||
|
|
</div><!-- /.help-content -->
|
||
|
|
<!-- /section:basics/content -->
|
||
|
|
|
||
|
|
</section>
|