1.0.0 • Published 8 years ago
choosery v1.0.0
Choosery
A jQuery plugin to activate certains element based on the current URL.
Building
Use gulp
and just type gulp
to build the source. The output will be placed in the dist directory. The dist directory
is tracked, you may also skip the building steps and just use the js in the dist directory.
Quick Example
<ul class="list-group" id="navs">
<li data-choosery-url="my/home$" class="list-group-item">Home Sweet Home</li>
<li data-choosery-url="my/open$" class="list-group-item">Open the Door</li>
<li data-choosery-url="my/save$" class="list-group-item">Save the World</li>
<li data-choosery-url="my/ok$" class="list-group-item">OK vs KO</li>
<li data-choosery-url="my/cancel$" class="list-group-item">Cancel the Dinner</li>
<li data-choosery-url="my/abort$" class="list-group-item">Abort World.exe</li>
</ul>
$('#navs').choosery({
target: 'li'
});
});
It means all li
inside #navs
will be activated if the current URL match with its data-choosery-url
attributes.
References
Available Attributes
data-choosery-url
Accepts a regex that later will be compared withwindow.location.pathname
.data-chooser-trigger
Accepts everything, as long as it is defined, when the element with this attribute is clicked, it will starts the choosery engine to find which element need to be activated based on the current URL. Useful forajax
orhistory.pushState
situation.
Available Options
target
The targets for the choosery engine to activate.activeClass
(default:active
) The class that will be set to the element that have itsdata-choosery-url
matched with the current URL.
Examples
Open example/index.html to see it in action and see the source code to see how it is implemented.
Contributing
Just fork and add any extra features you wanted, if you want to share that feature, feel free to submit a pull request.
Credits
Aditya Purwa @ Myriatek