87 lines
2.8 KiB
HTML
87 lines
2.8 KiB
HTML
<section>
|
|
<h1 class="blue" data-id="#custom/content-slider"> Content Slider</h1>
|
|
|
|
<div class="help-content">
|
|
<!-- #section:custom/content-slider -->
|
|
<div class="info-section">
|
|
<ul class="info-list list-unstyled">
|
|
<li>
|
|
Content sliders are based on Bootstrap modal boxes
|
|
</li>
|
|
|
|
<li>
|
|
You just need to add <code>.aside</code> class and one of the following values to <code>data-placement</code> attribute of modal element:
|
|
<br />
|
|
<code>top</code>
|
|
<code>bottom</code>
|
|
<code>right</code>
|
|
<code>left</code>
|
|
<br />
|
|
|
|
<pre data-language="html">
|
|
<div class="modal aside" data-placement="top">
|
|
...
|
|
</div>
|
|
</pre>
|
|
and call the following function:
|
|
<pre data-language="javascript">
|
|
$('.aside').ace_aside();
|
|
</pre>
|
|
</li>
|
|
|
|
<li>
|
|
The following options are also available both as function parameters or data attributes:
|
|
<ul>
|
|
<li><code>container</code> (new in v1.3.3) default is null (body). You can specify the container.
|
|
<br />
|
|
For example if you want to put it inside a modal box, you can set it to <code>#myModal > .modal-dialog</code>
|
|
</li>
|
|
<li><code>placement</code></li>
|
|
<li><code>backdrop</code> if "false" there will be no backdrop,
|
|
if "invisible" backdrop will become invisible, otherwise visible</li>
|
|
<li><code>fixed</code> whether slider should be fixed or not</li>
|
|
<li><code>background</code> whether background should be dark or white</li>
|
|
<li><code>offset</code> whether slider should be below navbar or cover it</li>
|
|
<li><code>body_scroll</code> determines if body scroll is allowed when slider is visible</li>
|
|
<li><code>transition</code> disables or enables CSS3 transition of sliders</li>
|
|
<li><code>scroll_style</code> specifies scrollbar style if it's expected</li>
|
|
</ul>
|
|
<pre data-language="html">
|
|
<div class="modal aside" data-placement="top" data-offset="true" data-background="true" data-body-scroll="false">
|
|
...
|
|
<!-- You can specify options using data-* attributes -->
|
|
</div>
|
|
</pre>
|
|
or
|
|
<pre data-language="javascript">
|
|
$('.aside').ace_aside({
|
|
placement: 'top',
|
|
offset: true,
|
|
background: true,
|
|
body_scroll: false
|
|
});
|
|
</pre>
|
|
</li>
|
|
|
|
|
|
<li>
|
|
Like modals, you can use any button to toggle sliders but
|
|
there is also an integrated(attached) button option you can use
|
|
by inserting after <code>.modal-content</code>:
|
|
<pre data-language="html">
|
|
<div class="modal-content">
|
|
...
|
|
</div>
|
|
<button type="button" data-toggle="modal" data-target="#target-modal" class="aside-trigger btn btn-info btn-app btn-xs ace-settings-btn">
|
|
<i class="ace-icon fa bigger-110 icon-only fa-plus" data-icon2="fa-minus" data-icon1="fa-plus"></i>
|
|
</button>
|
|
</pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
<!-- /section:custom/content-slider -->
|
|
</div>
|
|
|
|
|
|
</section> |