-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
490 lines (456 loc) · 22 KB
/
index.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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="jQuery docPlugin is a set of helpers to create dynamically parts of a document or set effects on particular areas of a page.">
<meta name="author" content="Alfredo Cosco">
<title>jQuery docPlugin</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<style>
html,body{
height: auto;
min-height: 100%;
}
.jumbotron{
background-color:#000055;
background:url("images/bg.jpg") no-repeat;
background-size: cover;
}
.jumbotron h1{
color:#fff;
font-weight:bold;
}
</style>
<link href="css/docPlugin.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">jQuery docPlugin</a>
</div>
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron fullpage">
<div class="container">
<h1>jQuery docPlugin v1</h1>
<p><a href="https://github.com/orazionelson/docPlugin"><img src="images/github.png"/></a></p>
</div>
</div>
<div class="container" id="main">
<div id="document" data-deepness="12">
<!-- data-tocside="right" -->
<div class="intro lead">
<h2>Intro</h2>
<p>jQuery docPlugin is a set of helpers to create dynamically parts of a document and add effects to it.</p>
<p>The plugin works under HTML5+Bootstrap+jQuery.</p>
<h3>Install</h3>
<p>Put <code>jquery.documentPlugin.js</code> in you <b>js</b> directory and <code>docPlugin.css</code> in your <b>ccs</b> directory.</p>
<h3>Use</h3>
<p>Look at the logic, this is a document template inside the html body:</p>
<pre>
<div id=document">
<div><!--Chapter-->
<h2>Section title</h2>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<h3>Sub-section</h3>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
</div>
<div><!--Chapter-->
<h2>Section title</h2>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<h3>Sub-section</h3>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
</div>
<div><!--Chapter-->
<h2>Section title</h2>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<h3>Sub-section</h3>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
</div>
</div>
</pre>
<p>Just add the <code>id="document"</code> attribute to the text to parse.</p>
<p>Call the plugin you need.</p>
<p>There are several plugins:</p>
<ul>
<li>docPlugin</li>
<li>tocfy</li>
<li>tabfy</li>
<li>footnotes</li>
<li>prettyPre</li>
<li>scroller</li>
<li>fullpage</li>
<li>sortlist</li>
</ul>
<p>Each plugin/helper is indipendent.</p>
</div>
<div class="plugin-docPlugin">
<h2>$.fn.docPlugin</h2>
<p><code>$.fn.docPlugin</code> provides for actions on the full area marked as <code>#document</code></p>
<h3>Trigger</h3>
<p>Call the plugin on the element to parse</p>
<pre>$("#document").docPlugin();</pre>
<h3>Options</h3>
<p>You can configure some options</p>
<pre>
//activate fullpage on every .chapter
chapterfullpage: true, //true|false
//show chapter buttons
chapterbuttons: "top,prev,next", //false|"top,prev,next"
//prettify <pre> elements in document
prettify:true, //true|false
//activate scroller in document
scroller:true,
//set globally the scroller delta with an integer
scrollerdelta:50,
//sort each list with class .sorted
sortlist:true,
</pre>
</div>
<div class="plugin-tocfy">
<h2>$.fn.tocfy - creates a toc</h2>
<p>This function grabs <b>h1/2/3/4/5</b> elements from a page area and creates a table of contents.</p>
<h3>Trigger</h3>
<p>Just call the plugin like this: <code>$.fn.tocfy()</code> if you want to use the same id of <b>docPlugin</b> and apply the toc to the whole document.</p>
<p>Or call it in this way: <code>$('#document').tocfy();</code> to apply on a selected element.</p>
<h3>Options</h3>
<pre>
deepness:'123456', //a string of numbers from 1 to 6 defines how deep is your menu
tocside: right, //choose :right|left|top
tocbehavior: scroll //choose:scroll|scrollFixed|fixed|offcanvas
offcanvasBtn: '#main' //if set offcanvas toc prepend here the butto for the sliding
tocliststyle: "ul square" //options: ol (decimal numbered list),ul square|circle|disc (unordered list)
</pre>
<h3>data-*</h3>
<p>This function accepts options also by <code>data-*</code> attribute:</p>
<pre>
<div id="document" data-tocside="right" data-tocbehavior="scrollFixed">
...
</div>
</pre>
</div>
<div class="plugin-tabfy">
<h2>$.fn.tabfy - show a section as tabs</h2>
<p>If you have a page or a section like this:</p>
<pre><div id="sectionUniqueId">
<p class="tabitem">Title 1</p>
<div>Content</div>
<p class="tabitem">Title 2</p>
<div>Content 2</div>
<p class="tabitem">Title 3</p>
<div>Content 3</div>
...
</div>
</pre>
<p>The tabfy plugin can create a tabbed section.</p>
<h3>Trigger</h3>
<p>Add a unique id to the section and call the plugin <code>$("#sectionUniqueId").tabfy()</code></p>
<h3>Options:</h3>
<p>Or by jquery trigger:</p>
<pre>
selector: the class for the items you want to tab
tabnav: tab|pill : according to bootstrap spec you can choose tab or pill
tabfade: true|false : add a fading effect to tabs
</pre>
<h3>data-*</h3>
<p>You can pass options by <code>data-*</code> attribute.</p>
<pre>
<div id="uniqueId" data-tabnav="pill" data-tabfade="false">
...
</div>
</pre>
<h3>Example</h3>
<div id="tabsection" data-tabnav="pill" data-tabfade="true">
<p class="tabitem">Lorem</p>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum quis nibh vitae viverra. Donec sit amet aliquam ligula, non suscipit erat. Morbi cursus sit amet erat a cursus. Praesent dui nibh, eleifend nec vulputate vel, auctor sed quam. Aenean massa magna, fermentum et sagittis at, fringilla at sapien. Mauris bibendum lectus nibh, at consectetur nulla viverra eu. Quisque aliquet neque vitae convallis placerat. Etiam et commodo sapien, vel consectetur felis. Sed iaculis rutrum pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. In interdum eget tortor sit amet mattis. Curabitur non eros ligula. Duis nibh mauris, tincidunt sed commodo ac, lobortis sit amet orci. Maecenas rhoncus neque nec vestibulum tincidunt. Morbi ex neque, luctus sit amet nibh sed, ornare imperdiet nisl. Praesent venenatis gravida mollis. Duis nec maximus sem, non efficitur velit. Fusce dictum dolor cursus, vehicula neque sed, venenatis augue. Donec non turpis pharetra, aliquam ante et, volutpat sapien. Sed ornare, erat et faucibus dictum, libero urna sagittis ex, eget consequat felis tellus id risus. Aliquam et posuere tortor. Nullam convallis cursus porttitor. Aliquam auctor eget tortor sit amet auctor.
</p>
</div>
<p class="tabitem">Ipsum</p>
<div>
<p>Sed iaculis rutrum pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. In interdum eget tortor sit amet mattis. Curabitur non eros ligula. Duis nibh mauris, tincidunt sed commodo ac, lobortis sit amet orci. Maecenas rhoncus neque nec vestibulum tincidunt. Morbi ex neque, luctus sit amet nibh sed, ornare imperdiet nisl. Praesent venenatis gravida mollis. Duis nec maximus sem, non efficitur velit. Fusce dictum dolor cursus, vehicula neque sed, venenatis augue. Donec non turpis pharetra, aliquam ante et, volutpat sapien. Sed ornare, erat et faucibus dictum, libero urna sagittis ex, eget consequat felis tellus id risus. Aliquam et posuere tortor. Nullam convallis cursus porttitor. Aliquam auctor eget tortor sit amet auctor.</p>
</div>
<p class="tabitem">Dolor</p>
<div>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. In interdum eget tortor sit amet mattis. Curabitur non eros ligula. Duis nibh mauris, tincidunt sed commodo ac, lobortis sit amet orci. Maecenas rhoncus neque nec vestibulum tincidunt. Morbi ex neque, luctus sit amet nibh sed, ornare imperdiet nisl. Praesent venenatis gravida mollis. Duis nec maximus sem, non efficitur velit. Fusce dictum dolor cursus, vehicula neque sed, venenatis augue. Donec non turpis pharetra, aliquam ante et, volutpat sapien. Sed ornare, erat et faucibus dictum, libero urna sagittis ex, eget consequat felis tellus id risus. Aliquam et posuere tortor. Nullam convallis cursus porttitor. Aliquam auctor eget tortor sit amet auctor.
</p>
</div>
</div>
<div id="tabsection-new" class="tabfy" data-tabnav="tab" data-tabfade="true">
<p class="tabitem">Consectetur</p>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum quis nibh vitae viverra. Donec sit amet aliquam ligula, non suscipit erat. Morbi cursus sit amet erat a cursus. Praesent dui nibh, eleifend nec vulputate vel, auctor sed quam. Aenean massa magna, fermentum et sagittis at, fringilla at sapien. Mauris bibendum lectus nibh, at consectetur nulla viverra eu. Quisque aliquet neque vitae convallis placerat. Etiam et commodo sapien, vel consectetur felis. Sed iaculis rutrum pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. In interdum eget tortor sit amet mattis. Curabitur non eros ligula. Duis nibh mauris, tincidunt sed commodo ac, lobortis sit amet orci. Maecenas rhoncus neque nec vestibulum tincidunt. Morbi ex neque, luctus sit amet nibh sed, ornare imperdiet nisl. Praesent venenatis gravida mollis. Duis nec maximus sem, non efficitur velit. Fusce dictum dolor cursus, vehicula neque sed, venenatis augue. Donec non turpis pharetra, aliquam ante et, volutpat sapien. Sed ornare, erat et faucibus dictum, libero urna sagittis ex, eget consequat felis tellus id risus. Aliquam et posuere tortor. Nullam convallis cursus porttitor. Aliquam auctor eget tortor sit amet auctor.
</p>
</div>
<p class="tabitem">Pulvinar</p>
<div>
<p>Sed iaculis rutrum pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. In interdum eget tortor sit amet mattis. Curabitur non eros ligula. Duis nibh mauris, tincidunt sed commodo ac, lobortis sit amet orci. Maecenas rhoncus neque nec vestibulum tincidunt. Morbi ex neque, luctus sit amet nibh sed, ornare imperdiet nisl. Praesent venenatis gravida mollis. Duis nec maximus sem, non efficitur velit. Fusce dictum dolor cursus, vehicula neque sed, venenatis augue. Donec non turpis pharetra, aliquam ante et, volutpat sapien. Sed ornare, erat et faucibus dictum, libero urna sagittis ex, eget consequat felis tellus id risus. Aliquam et posuere tortor. Nullam convallis cursus porttitor. Aliquam auctor eget tortor sit amet auctor.</p>
</div>
<p class="tabitem">Interdum</p>
<div>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. In interdum eget tortor sit amet mattis. Curabitur non eros ligula. Duis nibh mauris, tincidunt sed commodo ac, lobortis sit amet orci. Maecenas rhoncus neque nec vestibulum tincidunt. Morbi ex neque, luctus sit amet nibh sed, ornare imperdiet nisl. Praesent venenatis gravida mollis. Duis nec maximus sem, non efficitur velit. Fusce dictum dolor cursus, vehicula neque sed, venenatis augue. Donec non turpis pharetra, aliquam ante et, volutpat sapien. Sed ornare, erat et faucibus dictum, libero urna sagittis ex, eget consequat felis tellus id risus. Aliquam et posuere tortor. Nullam convallis cursus porttitor. Aliquam auctor eget tortor sit amet auctor.
</p>
</div>
</div>
</div>
<div class="plugin-footnotes">
<h2>$.fn.footnotes - nifty footnotes</h2>
<p>With <b>$.fn.footnotes</b> you can manage document footnotes. </p>
<p>The plugin:</p>
<ul>
<li>creates anchor references fron the text to the notes</li>
<li>shows the footnote in a popover tooltip,</li>
<li>scrolls the page smoothly to the note when the anchor is clicked,</li>
<li>and creates the back link from note to text.</li>
</ul>
<h3>Trigger</h3>
<p>Add the empty tag <code><span class="footnote"></span></code> to the text to build references notes
and a div with id <code>#footnotes</code> in the page.</p>
<p>Just call the plugin: <code>$.fn.footnotes()</code>, no matter if you hook it to a class or element: <strike><code>$('#id').footnotes()</code></strike></p>
<h3>Options</h3>
<p><b>footnotes</b> has a several of options:</p>
<pre>
//Show the notes at the bottom of the page
//options: true,false,'collapse'
viewNotes: true,
//Show the note in a popover
popover: true,
//If the notes are collapsed
//edit the button label here
buttonLabel: "See footnotes",
//These settings affects the popover
//as in the bootstrap popover configuration.
//The page container to scan
container: 'body',
// Allow HTML in the popover
html : true,
//Trigger: 'click' or 'hover'
trigger: "hover",
//Popover position
placement: "auto bottom"
</pre>
<h3>Example</h3>
<pre>
<p>Maecenas sit amet dolor odio. Quisque aliquet leo arcu,
vel vulputate ipsum fringilla et. Donec ex lacus, feugiat vel
auctor eget, faucibus sit amet elit.<span class="footnote"></span></p>
....
<div id="footnotes">
<div>
<p>Lorem Ipsum, Aliquam <b>porttitor lorem</b> ipsum,
ac venenatis tellus maximus nec. Sed aliquet volutpat sollicitudin.</p>
</div>
....
</div>
</pre>
<div class="row">
<div class="col-md-8 col-md-offset-1 text-justify">
<article>
<p>Maecenas sit amet dolor odio. Quisque aliquet leo arcu, vel vulputate ipsum fringilla et. Donec ex lacus, feugiat vel auctor eget, faucibus sit amet elit.<span class="footnote"></span> Sed consequat lacus id massa consectetur imperdiet. Proin nec enim dapibus, semper dui et, pharetra urna. Sed finibus purus quam, nec laoreet risus eleifend nec. Sed velit quam, condimentum a tincidunt sed, imperdiet nec nunc. Nullam non euismod ligula. Praesent viverra ante ac magna lobortis, sed molestie nulla ornare.<span class="footnote"></span> Sed commodo ut felis condimentum ornare. Nullam semper purus cursus leo posuere, at bibendum nulla consequat. Sed hendrerit ornare malesuada. Nam porttitor sit amet massa quis volutpat. Pellentesque lobortis laoreet odio sed imperdiet.<span class="footnote"></span> Quisque dictum faucibus lorem sed egestas.</p>
<div id="footnotes">
<div>
<p>
Lorem Ipsum, Aliquam <b>porttitor lorem</b> ipsum, ac venenatis tellus maximus nec. Sed aliquet volutpat sollicitudin.</p>
</div>
<div>
<p>
Curabitur pellentesque urna vel ipsum auctor elementum.</p>
</div>
<div>
<p>
Quisque euismod ullamcorper mi vitae efficitur. In hac habitasse platea dictumst. Vestibulum rutrum suscipit libero, vestibulum aliquet eros varius nec. Maecenas tristique augue ex. Duis blandit ac felis vel posuere.</p>
</div>
<div class="clearfix"></div>
</div>
</article>
</div>
</div>
</div>
<div class="plugin-pretty-pre">
<h2>$.fn.prettyPre - pretty code boxes</h2>
<p>With <code>$.fn.prtettyPre</code> you can prettify code blocks.</p>
<h3>Trigger</h3>
<p> Just set <code>prettify:true</code> in docPlugin options to prettify all the <code>#document</code>, or load the plugin alone: <code>$.fn.prettyPre()</code></p>
<p>The plugin ha effects only on <code>pre</code> elements.</p>
<p>The pretty-pre CSS provides also for a class <code>.expand</code> to extend the pre box with long code strings.</p>
</div>
<div class="plugin-scroller">
<h2>$.fn.scroller - scroll to anchors</h2>
<p>The <code>$.fn.scroller()</code> plugin add a smooth scroll effect to all link anchors inside an element with <code>.scrollnav</code> class.</p>
<h3>Trigger</h3>
<p>Trig the plugin by setting in docPlugin</p>
<pre>
scroller:true|false
</pre>
and
<pre>
scrollerdelta:50
</pre>
<p>So the smooth scroll will be applied to document anchors: buttons, notes anchors and toc links</p>
<p>The plugin can also be triggered alone:</p>
<pre>
$.fn.scroller({
delta: 50
});
</pre>
</div>
<div class="plugin-fullpage">
<h2>$.fn.fullpage - stretch a section</h2>
<p>This plug-in extends an element to the full size of the page</p>
<h3>Trigger</h3>
<p>Set in docPlugin options <code>chapterfullpage: true</code> to set full page for all your document main sections (chapters).</p>
<p>Or hook the plugin to an element:</p>
<pre>
$('.jumbotron').fullpage();
</pre>
<p>Or add the <code>.fullpage</code> class to the element(s) to stretch and load the plugin alone:</p>
<pre>$.fn.fullpage()</pre>
<h3>Options</h3>
<pre>
//delta is an integer to
//subtract from the windows height
//useful if you have a navbar
delta: 50
</pre>
</div>
<div class="plugin-sortlist scrollnav">
<h2>$.fn.sortlist - sort lists</h2>
<p>This helper sorts each list in a container with class <code>.sorted</code></p>
<h3>Trigger</h3>
<p>Just set <code>sortlist:true</code> in docPlugin options to sort each list with class <code>.sorted</code> inside the document</p>
<p>Or load the plugin alone: <code>$.fn.sortlist()</code> and mark up the list container with <code>class="sorted"</code>.</p>
<p>You can manage sorting via <code>data-*</code> attribute, i.e. <code>data-sort="desc"</code> in the list container, or in plugin call.</p>
<pre>
<ul class="sorted">
<li>Lorem ipsum</li>
<li>dolor sit amet, consectetur adipiscing elit.</li>
<li>Maecenas sed leo consectetur</li>
<li>aliquam tellus at, vehicula nunc.</li>
<li>Praesent sagittis tellus tristique, lobortis ante a, pretium quam.</li>
</ul>
</pre>
<h3>Examples</h3>
<p>Example: <code>ul class="sorted"</code></p>
<ul class="sorted">
<li>Lorem ipsum</li>
<li>dolor sit amet, consectetur adipiscing elit.</li>
<li>Maecenas sed leo consectetur</li>
<li>aliquam tellus at, vehicula nunc.</li>
<li>Praesent sagittis tellus tristique, lobortis ante a, pretium quam.</li>
</ul>
<p>Example: <code>ol class="sorted" data-sort="desc"</code></p>
<ol class="sorted" data-sort="desc">
<li>Lorem ipsum</li>
<li>dolor sit amet, consectetur adipiscing elit.</li>
<li>Maecenas sed leo consectetur</li>
<li>aliquam tellus at, vehicula nunc.</li>
<li>Praesent sagittis tellus tristique, lobortis ante a, pretium quam.</li>
</ol>
</div>
</div>
</div> <!-- /container -->
<div class="container">
<footer>
<p>©LEFT 2019 <a href="https://github.com/orazionelson">https://github.com/orazionelson</a> alfredo.cosco[AT]gmail.com</p>
<p>Cover pic by:<a href="https://www.freepik.com/free-photos-vectors/business">Business vector created by rawpixel.com - www.freepik.com</a></p>
</footer>
</div>
<!-- JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.document.plugin.js"></script>
<script>
//template for documentPlugin
$(document).ready(function(){
/*docPluginOptions:
//activate fullpage on every .chapter
chapterfullpage: true, //true|false
//show chapre buttons
chapterbuttons: "top,prev,next", //false|"top,prev,next"
//prettify <pre> elements in document
prettify:true, //true|false
//activare scroller i document
scroller:true,
//set globally the scroller delta
scrollerdelta:50
//sort each list with class .sorted
sortlist:true,
*/
$("#document").docPlugin();
//Call the helper indipendently if you need
//Prettify your code
//$.fn.prettyPre();
//Show fullpage section(s)
$('.jumbotron').fullpage();
//$.fn.fullpage();
//$.fn.docPlugin.docSettings.tocfy.options.tocbehavior='fixed';
//console.log($.fn.docPlugin.docSettings);
/*Generates toc
* Set options also by data-(option) in the
* documentSelector, default: #document
*
* options:
* deepness:'123456', //a string of numbers from 1 to 6 defines how deep is your menu
* tocside: right, //choose :right|left|top
* tocbehavior: scroll //choose:scroll|scrollFixed|fixed|offcanvas
* offcanvasBtn: '#main' //if set offcanvas toc prepend here the butto for the sliding
*/
/*$('#document').tocfy({
tocbehavior:"scrollFixed"
});*/
$.fn.tocfy(
{
tocbehavior:"scrollFixed"
}
);
//Show a page or a section tabbed
$("#tabsection").tabfy();
//Render footnotes
$.fn.footnotes({
viewNotes: true,
popover:true,
});
//Apply scroll to links in
//section with attribute .scrollnav
/*var delta=$('.navbar:first').height();
$.fn.scroller({
delta: delta
});*/
//Sort a list
//$.fn.sortlist();
//
});
</script>
</body>
</html>