No description, website, or topics provided.
JavaScript CoffeeScript HTML
Switch branches/tags
Nothing to show
Clone or download
Tor Morten Jensen
Tor Morten Jensen add module exports
Latest commit 949f531 Jan 8, 2016
Permalink
Failed to load latest commit information.
demo allow changing of element Jun 9, 2015
dist add module exports Jan 8, 2016
src add module exports Jan 8, 2016
.editorconfig add router Jun 9, 2015
.gitignore add router Jun 9, 2015
.jshintrc add router Jun 9, 2015
.npmignore add router Jun 9, 2015
.travis.yml add router Jun 9, 2015
CONTRIBUTING.md add router Jun 9, 2015
Gruntfile.js add router Jun 9, 2015
README.md router Jun 9, 2015
bower.json change main file Jun 12, 2015
package.json add module exports Jan 8, 2016

README.md

jQuery DOM Router

DOM-based Routing

A conventient way to fire JavaScripts based on the classes the <body>-tag has on page load or whenever a new class is added to it. It is heavily based on the routing provided in the Sage WordPress-theme, but has a cleaner syntax and does not feel as cluttered. Their docs of the function state:

/* ========================================================================
 * DOM-based Routing
 * Based on http://goo.gl/EUTi53 by Paul Irish
 *
 * Only fires on body classes that match. If a body class contains a dash,
 * replace the dash with an underscore when adding it to the object below.
 *
 * .noConflict()
 * The routing is enclosed within an anonymous function so that you can 
 * always reference jQuery with $, even when in .noConflict() mode.
 *
 * Google CDN, Latest jQuery
 * To use the default WordPress version of jQuery, go to lib/config.php and
 * remove or comment out: add_theme_support('jquery-cdn');
 * ======================================================================== */

Usage

  1. Include jQuery:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  2. Include plugin's code:

    <script src="dist/jquery.dom-router.min.js"></script>
  3. Call the plugin. Simply use the name of the class to fire on as the name of a property in an object passed to the plugin. To have some JS loaded on all pages use the "common"-property. Class names with dashes are converted to underscores by the plugin, so if you have a class called big-cakes-for-you you would use big_cakes_for_you as the property name.

    $(document).router({
    	classname: function() {
    		// fire your js when the body has class "classname" when the page loads
    	},
    	common: function() {
    		// code put inside the common property will be executed on all page loads
    	}
    });