jquery-docout
This is a jQuery plugin for producing Document Outline as shown below.
How it works
By default, the plugin:
- finds all header tags (
h1, h2 etc
) inside a given element (ex.body
), - assigns them ids if they don't already have and
- produces nested unordered lists of links to them respecting the hierarchy
The plugin is already being used in my blog.
Installation
via npm
There is an npm package available. Install it with:
npm install jquery.docout
via JS file
Download the jquery.docout.min.js
file from the dist
folder and add it to your application.
Using jquery.docout
Default usage
Suppose you have a div
with id content
including the content you want to outline and another div with id outline
in which you want to render the resolved outline. All you have to do is:
;
Plugin options
The plugins supports the following options:
target
: where the document outline will be rendered. Defaults tobody
immediate
: whether the document oultine should be resolved and rendered immediatelly. Defaults totrue
. Check this example for non-immediate usage.rootClass
: the css class to be appended to the outer outline wrapper (which by default is aul
element). Defaults todocout-root-wrap
childClass
: the css class to be appended to each child wrapper (ex. ul > li > ul.docout-child-wrap). Defaults todocout-child-wrap
elements
: the elements to be outlined. The order matters. Defaults to[ "h1", "h2", "h3", "h4", "h5", "h6", "h7", "h8" ]
replace
: whether the resolve outlined will replace the target's content or be prepended to it. Defaults tofalse
gntLink
: function used to generate an outline link. The original element (ex.h1
) is passed as an argument and it has already been assigned anid
in case it didn't have one. If you don't set an override, the original function returns a simplea
tag with appropriatehref
attribute and text.gntLinkWrap
: function used to generate the wrapper of an outline link. The original element (ex.h1
) is passed as an argument and it has already been assigned anid
in case it didn't have one. If you don't set an override, the original function returns a simpleli
tag.gntRootWrap
: function used to generate the outer wrapper of the outline. If you don't set an override, the original function returns a simpleul
tag with the css class defined at therootClass
option.gntChildWrap
: function used to generate each child collection wrapper (ex. h1 > h2 > h3, h3, h3). If you don't set an override, the original function returns a simpleul
tag with the css class defined at thechildClass
option.gntId
: function used to resolve the id of each outline link href in case the original element (ex.h1
) didn't have one. If you don't define an override, the original function returnsdocout-<index>
where index is the index of the given element in the list of all elements that will be outlined.
Outlining other tags
Suppose your page has the following structure and you want to outline it.
Sapiens Properties Non dolere, inquam, istud quam vim habeat postea videro; Quippe: habes enim a rhetoribus; Atque haec ita iustitiae propria sunt, ut sint virtutum reliquarum communia. Sit ista in Graecorum levitate perversitas, qui maledictis insectantur eos, a quibus de veritate dissentiunt. Venit ad extremum; Quid enim ab antiquis ex eo genere, quod ad disserendum valet, praetermissum est? Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Sed tamen omne, quod de re bona dilucide dicitur, mihi praeclare dici videtur. Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum. Statistics Non dolere, inquam, istud quam vim habeat postea videro; Quippe: habes enim a rhetoribus; Atque haec ita iustitiae propria sunt, ut sint virtutum reliquarum communia. Sit ista in Graecorum levitate perversitas, qui maledictis insectantur eos, a quibus de veritate dissentiunt. Venit ad extremum; Quid enim ab antiquis ex eo genere, quod ad disserendum valet, praetermissum est? Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Sed tamen omne, quod de re bona dilucide dicitur, mihi praeclare dici videtur. Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum.
You can create the outline with:
;
See this example for more details.
Contributing
- Fork it ( https://github.com/iridakos/jquery.docout/fork )
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create a new Pull Request
Credits
I used the awesome jQuery Boilerplate template to develop this plugin.
License
This code is open source under the MIT License terms.