jQuery docPlugin

Intro

jQuery docPlugin is a set of helpers to create dynamically parts of a document and add effects to it.

The plugin works under HTML5+Bootstrap+jQuery.

Install

Put jquery.documentPlugin.js in you js directory and docPlugin.css in your ccs directory.

Use

Look at the logic, this is a document template inside the html body:

		<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>

Just add the id="document" attribute to the text to parse.

Call the plugin you need.

There are several plugins:

docPlugin
tocfy
tabfy
footnotes
prettyPre
scroller
fullpage
sortlist

Each plugin/helper is indipendent.

$.fn.docPlugin

$.fn.docPlugin provides for actions on the full area marked as #document

Trigger

Call the plugin on the element to parse

$("#document").docPlugin();

Options

You can configure some options

//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,

$.fn.tocfy - creates a toc

This function grabs h1/2/3/4/5 elements from a page area and creates a table of contents.

Trigger

Just call the plugin like this: $.fn.tocfy() if you want to use the same id of docPlugin and apply the toc to the whole document.

Or call it in this way: $('#document').tocfy(); to apply on a selected element.

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
			tocliststyle: "ul square" //options: ol (decimal numbered list),ul square|circle|disc (unordered list)

data-*

This function accepts options also by data-* attribute:

				<div id="document" data-tocside="right" data-tocbehavior="scrollFixed">
					...
				</div>

$.fn.tabfy - show a section as tabs

If you have a page or a section like this:

<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>

The tabfy plugin can create a tabbed section.

Trigger

Add a unique id to the section and call the plugin $("#sectionUniqueId").tabfy()

Options:

Or by jquery trigger:

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

data-*

You can pass options by data-* attribute.

<div id="uniqueId" data-tabnav="pill" data-tabfade="false">
	...
</div>

Example

Lorem

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.

Ipsum

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.

Dolor

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.

Consectetur

Pulvinar

Interdum

$.fn.footnotes - nifty footnotes

With $.fn.footnotes you can manage document footnotes.

The plugin:

creates anchor references fron the text to the notes
shows the footnote in a popover tooltip,
scrolls the page smoothly to the note when the anchor is clicked,
and creates the back link from note to text.

Trigger

Add the empty tag <span class="footnote"></span> to the text to build references notes and a div with id #footnotes in the page.

Just call the plugin: $.fn.footnotes(), no matter if you hook it to a class or element: ~~$('#id').footnotes()~~

Options

footnotes has a several of options:

		//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"

Example

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.

....

Lorem Ipsum, Aliquam porttitor lorem ipsum, ac venenatis tellus maximus nec. Sed aliquet volutpat sollicitudin.

....

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. 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. 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. Quisque dictum faucibus lorem sed egestas.

Lorem Ipsum, Aliquam porttitor lorem ipsum, ac venenatis tellus maximus nec. Sed aliquet volutpat sollicitudin.

Curabitur pellentesque urna vel ipsum auctor elementum.

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.

$.fn.prettyPre - pretty code boxes

With $.fn.prtettyPre you can prettify code blocks.

Trigger

Just set prettify:true in docPlugin options to prettify all the #document, or load the plugin alone: $.fn.prettyPre()

The plugin ha effects only on pre elements.

The pretty-pre CSS provides also for a class .expand to extend the pre box with long code strings.

$.fn.scroller - scroll to anchors

The $.fn.scroller() plugin add a smooth scroll effect to all link anchors inside an element with .scrollnav class.

Trigger

Trig the plugin by setting in docPlugin

		scroller:true|false

and

		scrollerdelta:50

So the smooth scroll will be applied to document anchors: buttons, notes anchors and toc links

The plugin can also be triggered alone:

		$.fn.scroller({
			delta: 50
		});

$.fn.fullpage - stretch a section

This plug-in extends an element to the full size of the page

Trigger

Set in docPlugin options chapterfullpage: true to set full page for all your document main sections (chapters).

Or hook the plugin to an element:

			$('.jumbotron').fullpage();

Or add the .fullpage class to the element(s) to stretch and load the plugin alone:

$.fn.fullpage()

Options

//delta is an integer to 
//subtract from the windows height
//useful if you have a navbar
delta: 50

$.fn.sortlist - sort lists

This helper sorts each list in a container with class .sorted

Trigger

Just set sortlist:true in docPlugin options to sort each list with class .sorted inside the document

Or load the plugin alone: $.fn.sortlist() and mark up the list container with class="sorted".

You can manage sorting via data-* attribute, i.e. data-sort="desc" in the list container, or in plugin call.


Lorem ipsum 
dolor sit amet, consectetur adipiscing elit.
Maecenas sed leo consectetur 
aliquam tellus at, vehicula nunc.
Praesent sagittis tellus tristique, lobortis ante a, pretium quam.

Examples

Example: ul class="sorted"

Lorem ipsum
dolor sit amet, consectetur adipiscing elit.
Maecenas sed leo consectetur
aliquam tellus at, vehicula nunc.
Praesent sagittis tellus tristique, lobortis ante a, pretium quam.

Example: ol class="sorted" data-sort="desc"

Lorem ipsum
dolor sit amet, consectetur adipiscing elit.
Maecenas sed leo consectetur
aliquam tellus at, vehicula nunc.
Praesent sagittis tellus tristique, lobortis ante a, pretium quam.

jQuery docPlugin v1

Intro

Install

Use

$.fn.docPlugin

Trigger

Options

$.fn.tocfy - creates a toc

Trigger

Options

data-*

$.fn.tabfy - show a section as tabs

Trigger

Options:

data-*

Example

$.fn.footnotes - nifty footnotes

Trigger

Options

Example

$.fn.prettyPre - pretty code boxes

Trigger

$.fn.scroller - scroll to anchors

Trigger

$.fn.fullpage - stretch a section

Trigger

Options

$.fn.sortlist - sort lists

Trigger

Examples