/
fx.html
105 lines (81 loc) · 3.82 KB
/
fx.html
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<header class="jumbotron subhead">
<h1>FX</h1>
<p class="lead">
pager.js comes pre-packed with effects for fading, sliding, zooming, and flipping between pages.
These effects can easily be added to your page using
<code>fx: 'zoom'</code>,
<code>fx: 'flip'</code>,
<code>fx: 'slide'</code> or
<code>fx: 'fade'</code>.
In order to use <i>zoom</i> or <i>flip</i> you'll need to include <code>pager.css</code> or
<code>pager.less</code>.
</p>
</header>
<h2><a href="#fx/zoom">Zoom</a></h2>
<div data-bind="page: {id: 'zoom'}">
<ul class="nav nav-tabs" data-bind="foreach: $page.children">
<li data-bind="css: {active: isVisible}"><a data-bind="text: $data.getValue().title, page-hash: getId()"></a>
</li>
</ul>
<div data-bind="page: {id: 'bend_her', title: 'Bend Her', fx: 'zoom', source: 'bend_her.html'}"></div>
<div data-bind="page: {id: 'buggalo_zoom', title: 'Buggalo', fx: 'zoom', source: 'buggalo.html'}"></div>
<div data-bind="page: {id: 'lethal_zoom', title: 'Lethal', fx: 'zoom', source: 'lethal.html'}"></div>
</div>
<h2><a href="#fx/flip">Flip</a></h2>
<div data-bind="page: {id: 'flip'}">
<ul class="nav nav-tabs" data-bind="foreach: $page.children">
<li data-bind="css: {active: isVisible}"><a data-bind="text: $data.getValue().title, page-hash: getId()"></a>
</li>
</ul>
<div data-bind="page: {id: 'bend_her', title: 'Bend Her', fx: 'flip', source: 'bend_her.html'}"></div>
<div data-bind="page: {id: 'buggalo_zoom', title: 'Buggalo', fx: 'flip', source: 'buggalo.html'}"></div>
<div data-bind="page: {id: 'lethal_zoom', title: 'Lethal', fx: 'flip', source: 'lethal.html'}"></div>
</div>
<h2><a href="#fx/slide">Slide</a></h2>
<div data-bind="page: {id: 'slide'}">
<ul class="nav nav-tabs" data-bind="foreach: $page.children">
<li data-bind="css: {active: isVisible}"><a data-bind="text: $data.getValue().title, page-hash: getId()"></a>
</li>
</ul>
<div data-bind="page: {id: 'bend_her', title: 'Bend Her', fx: 'slide', source: 'bend_her.html'}"
></div>
<div data-bind="page: {id: 'buggalo_zoom', title: 'Buggalo', fx: 'slide', source: 'buggalo.html'}"
></div>
<div data-bind="page: {id: 'lethal_zoom', title: 'Lethal', fx: 'slide', source: 'lethal.html'}"
></div>
</div>
<h2><a href="#fx/fade">Fade</a></h2>
<div data-bind="page: {id: 'fade'}">
<ul class="nav nav-tabs" data-bind="foreach: $page.children">
<li data-bind="css: {active: isVisible}"><a data-bind="text: $data.getValue().title, page-hash: getId()"></a>
</li>
</ul>
<div data-bind="page: {id: 'bend_her', title: 'Bend Her', fx: 'fade', source: 'bend_her.html'}"
></div>
<div data-bind="page: {id: 'buggalo_zoom', title: 'Buggalo', fx: 'fade', source: 'buggalo.html'}"
></div>
<div data-bind="page: {id: 'lethal_zoom', title: 'Lethal', fx: 'fade', source: 'lethal.html'}"
></div>
</div>
<h2><a href="#fx/pop">Popout</a></h2>
<div data-bind="page: {id: 'pop'}">
<a href="#fx/pop/popout">Show popout</a>
</div>
<div class="form-actions">
<a class="btn btn-large btn-primary" href="#recapitulation">Read a recapitulation about the API</a>
</div>
<div data-bind="page: {id: 'popout', modal: true, fx: 'popout'}" style="background-color: rgba(200,200,200,0.5); position: absolute; left: 0; right: 0; top: 0; bottom: 0;">
<div class="modal">
<div class="modal-header">
<a data-bind="page-href: '../'" class="close" data-dismiss="modal" aria-hidden="true">×</a>
<h3>Alert</h3>
</div>
<div class="modal-body">
<p>This modal is stickout out!
</p>
</div>
<div class="modal-footer">
<a data-bind="page-href: '../'" class="btn">Close</a>
</div>
</div>
</div>