Reusable DotNetNuke jQuery Plugins

Modified on 2011/10/20 01:03 PM by irobinson Categorized as Uncategorized
DotNetNuke 6 uses several jQuery plugins to provide an updated, modern, and consistent user interface. These plugins are also available for use by third party developers. These plugins are best used in conjunction with the DNN HTML form patterns.

Overview»

jQuery Plugins, by nature, are reusable client-side components. The following components are included starting in DotNetNuke 6. The plugins were created with the following goals:

  • Allow for reuse across the framework for a consistent user experience
  • Physically separate all plugin logic from the markup (separate file)
  • Avoid duplicate file registrations by exposing a public API method to register script
  • Inject all markup information/context through plugin settings on initialization
  • Use convention based defaults that match the DNN 6 form pattern for ease of implementation and to encourage usage of consistent form pattern
  • Provide the flexibility to override the default settings when necessary

While the usage of the plugins with their default settings is encouraged, should the developer need to override them the option to do so is provided.

Registration»

In a manner that is similar to registerting jQuery, developers can use any of the plugins (listed below) but they must register the plugins in their modules OnInit or OnLoad method.

 DotNetNuke.Framework.jQuery.RequestDnnPluginsRegistration(); 

The following dependencies are loaded by loading the plugins:

  • jQuery
  • jQuery UI
  • jQuery hoverIntent

Important note: "dnn.js" is also a dependency (it provides a method for writing/reading cookies used in tabs and panels) and it is *not* loaded by using this method. Most of the time dnn.js is already loaded by something else on the page, therefore impact of not enforcing this dependency is generally minimal. However, it is best to do the following along with the above:

 ClientAPI.RegisterClientReference(this.Page, ClientAPI.ClientNamespaceReferences.dnn); 

Here is the related Gemini issue: DNN-18457 - RequestDnnPluginsRegistration method does not load all required dependencies

While the plugins registration method above takes care of requesting registrations for both jQuery and jQuery UI, the jQuery in DotNetNuke page contains details about registering jQuery or jQuery UI individually.

Initialization»

When initializing any of the following client side plugins there are a few JavaScript best practices to keep in mind:


Below is a very detailed example of safely setting up your JavaScript initialization code.

Detailed Example
/* Wrap your code in a function to avoid global scope and pass in any global objects */
/* globals jQuery, window, Sys */
(function ($, Sys) {

    /* wire up any plugins or other logic here */
    function setUpMyModule() {
        // your initialization code here...
    }

    /* wire up the call to your function on document ready */
    $(document).ready(function () {
    
        setUpMyModule();
        
        /* Wire up the call to your function after an update panel request */
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
            setUpMyModule();
        });
    });
    
} (jQuery, window.Sys)); // pass in the globals. Note the safe access of the jQuery object.

Although you'll find examples like the one above in the DNN core, you will also find simpler versions as well. You don't always need to use the document ready event, or account for update panels. At a minimum it is suggested that JS initialization look like this:

Basic Example
(function($) {
 // your initialization code here...
})(jQuery);

This example avoids global scope and safely accesses the jQuery object.

DotNetNuke jQuery Plugins»

The following plugins are available for use in DotNetNuke 6:

  • dnnAlert - displays a notice in a modal dialog (uses jQuery UI)
  • dnnConfirm - displays an "are you sure?" confirmation in a modal dialog (uses jQuery UI)
  • dnnPanels - displays content areas in regions that are expandable and collapsible
  • dnnExpandAll - works with panels to expand or collapse all regions
  • dnnTabs - Displays content areas in a tabbed format (uses jQuery UI)
  • dnnTooltip - Provides help/info tooltip functionality
  • dnnPreview - Helps preview skins and containers in a new window

Additional Resources»


Copyright 2014 by DNN Corp | Terms of Use | Privacy | Design by Parker Moore Design