jQuery and Exponent....sitting in a tree...

jQueryThe jQuery javascript library has been integrated into Exponent since v2.2.0 in an effort to help us move away from the YUI library.  jQuery is more popular and has many more add-ons/plugins/widgets than does YUI.  It is also the javascript library of choice for Twitter Bootstrap.  Just like YUI, Exponent easily integrates the use of jQuery into the Exponent framework.  Here are some tips on using jQuery with your custom theme or view.

Just like YUI, jQuery is NOT automatically loaded, but only loaded if needed on the page.  (However, most every page has some YUI code or widget, therefore it appears that YUI is always loaded).  We load jQuery (or YUI) using the {script} Smarty template tag.  We can either simply load the base jQuery library script, or we can use it to also load add-ons/plugins and associated stylesheets (again just like the YUI module loader).

The {script} block is used within view templates to delineate a javascript script or javascript code (docs found here).  It is recommended that you NOT load your own jQuery library within the view template or theme template, as it will likely conflict with the integrated version.  We ship the latest versions with Exponent and load jQuery v2.x in most browsers and v1.x in Internet Explorer versions less than 9 and Firefox version less than 3.7.  The simplest approach is to use this to embed a jQuery code snippet:

{script unique="myuniqueid" jquery=1}
{literal}
    $(document).ready(function() {
        // jQuery code goes here
    } );
{/literal}
{/script}

We can also use the tag to load jQuery add-ons/plugins either in the system or within the custom theme.  To load an addon, just enter its name (sans the .js) into the jquery parameter.  It will first search the theme's /js folder and if found will then look for a like named .less or .css file in the /less or /css sibling folder.  The system jQuery add-ons are located in /external/jquery/addons/.  So to load the jQuery Colorbox (lightbox) addon (jquery.colorbox.js and jquery.colorbox.css), you'd use the following:

{script unique="myuniqueid" jquery='jquery.colorbox'} 
{literal} 

    $('a.calpopevent').click(function(e) {
        target = e.target; $.colorbox({
            href: EXPONENT.PATH_RELATIVE+"index.php?controller=eventregistration&action=show&ajax_action=1&title="+target.id,
            maxWidth: 650
        });
        e.preventDefault();
    });

{/literal} 
{/script}

We can also use the tag to load a jQuery script just as we would any other script.

{script unique="myuniqueid" jquery=1 src='myjqueryscript.js'} 
{literal} 
    $(document).ready(function() { 
        // jQuery code goes here
        myjsfunction(1, 2, 3); // function contained in myjqueryscript.js
    } ); 
{/literal} 
{/script}

Hopefully this little introduction to using jQuery within Exponent has whetted you appetite for using javascript within your custom theme or view.

About the author

Dave Leffler
Exponent CMS Developer