JQuery JavaScript Library

From Web Developer Network Wiki
Jump to: navigation, search

The UNL Templates include a version of the jQuery javascript library to facilitate many javascript functions like DOM manipulation, AJAX, event management, and more.

The jQuery core function is placed in the WDN namespace to allow developers the option of using their own copy of jQuery or any other javascript library. So to use the template version of jQuery you would make a call like WDN.jQuery(...) instead of $(...).

However, starting with the 3.1 version of the templates (commonly referred to as the "Responsive Design") the library is only loaded for certain screen widths. This ensures that payload (the size of the data that must be loaded to view a page) is small enough for mobile devices. See the WDN site pages regarding the breakdown of what's available at each device width.

Available Plugins

All of the content area resources that are demonstrated on the WDN Examples page are smart enough to load the necessary libraries when you use them, with a few exceptions.

If you wish to use any of the following functions, you will need to ensure the jQuery library is loaded first:

  • WDN.get() (AJAX shortcut to jQuery.ajax)
  • WDN.post() (AJAX shortcut to jQuery.ajax)
  • WDN.stringToXML('...')

You can use the following code to ensure jQuery is loaded, but keep in mind that this is an asynchronous method and cannot be used to "block" javascript execution.

WDN.loadJQuery(function() {
    // INSERT YOUR jQUERY CODE HERE
});

Plugins no longer loaded by default

In the 3.0 version of the templates, certain plugins were available without adding any additional javascript. During the 3.1 upgrade, plugins that were considered to be too large to load by default were moved into an "on-demand" style of loading. Specifically, if you are using any of the following plugins, you should review the new examples page for up-to-date loading code.

  • Colorbox (modal dialog)
  • qTip (tooltips)

It should also be noted that the tabs plugin is not loaded for the devices with screens smaller than 768px wide (typically, mobile phones). This is because the tab interface doesn't really work that well for mobile. The content will still be accessible, it will all just flow together instead. If you have concerns about your tabs on mobile, please feel free to ask in one of the communication channels.

Personal tools
Namespaces

Variants
Actions
Navigation
Toolbox