5a739853
 patrick.he
commit
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
<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>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">
...
</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>
|