Little Helper

This is more about building a jQuery plug in than it is about this particular plug in. Below you see that the code is small. Try clicking on the links on this page to see what happens. Then try turning off JavaScript and reloading the page. Now you understand what this plug in does. Note that the page is still useable without JavaScript.

/*global jQuery */
/*jslint sloppy: true */
(function ($) {
    /**
     * Look for in-page references and turn them into modal boxes.
     * usage: $('a').lilHelper();
     */
    $.fn.lilHelper = function () {
        var dialogs = {}; // Only one dialog per reference.
        return this.each(function () {
            var title, ref = $(this).attr('href');
            if (ref && ref.charAt(0) === '#') {
                title = $(ref).attr('title') || 'help';
                if (!dialogs[ref]) {
                    dialogs[ref] = $(ref).dialog({autoOpen: false, modal: true, title: title});
                }
                $(this).click(function (theEvent) {
                    $(ref).dialog('open');
                    theEvent.preventDefault();
                });
            }
        });
    };
}(jQuery));

jQuery is a popular cross browser JavaScript library.

These comments are for JSLint, a JavaScript code checker at jslint.com. They set parameters for checking this code.