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/homequot; class="list-group-item">Home Sweet Home</li>
    <li data-choosery-url="my/openquot; class="list-group-item">Open the Door</li>
    <li data-choosery-url="my/savequot; class="list-group-item">Save the World</li>
    <li data-choosery-url="my/okquot; class="list-group-item">OK vs KO</li>
    <li data-choosery-url="my/cancelquot; class="list-group-item">Cancel the Dinner</li>
    <li data-choosery-url="my/abortquot; 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

1. data-choosery-url Accepts a regex that later will be compared with window.location.pathname.
2. 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 for ajax or history.pushState situation.

Available Options

1. target The targets for the choosery engine to activate.
2. activeClass (default: active) The class that will be set to the element that have its data-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