There are many exciting updates around jQuery in DotNetNuke 6. This post will provide an overview of the changes and a recap of some of the existing functionality to give you a good picture of the many ways jQuery is used, and how you may use it moving forward.
jQuery
DotNetNuke 6 uses jQuery version 1.6.1. This version represents a stable upgrade from jQuery 1.5.2. The framework takes care of registering the jQuery library when it is needed for its own use, but if you’d like to use it in your own development, you’ll need to request it be registered to ensure that it gets loaded. Using the API is strongly recommended, you will run a high risk of causing unwanted performance and compatibility issues if you bypass the API.
You may opt to use a different version of jQuery, or the same version but just hosted in a remote location, by specifying the hosted URL in your application’s host settings. Community members frequently choose to use the Google CDN Library for performance benefits.
jQuery UI
DotNetNuke 6 marks the first version that includes jQuery UI in the core framework. The version shipped is 1.8.13, and just like jQuery, the library file reference can be managed in the application’s host settings and requested through the API. If you need to use jQuery UI and safely support DotNetNuke 5 as well, please visit Bruce Chapman's blog on Using jQuery UI with DotNetNuke 5 and 6 in the same module for details and example code.
jQuery UI features that are used in the core are modal dialogs (also called popups) and tabs. These features are used in three of the new jQuery plugins (see below for more info), as well as in the admin modal popups feature. For more information about the modal popups, please read Tips on how to make your Module Popup-Friendly by Vincent Nguyen, and check out the DotNetNuke 6 Developer Quick Start in the wiki as well.
DNN jQuery Plugins
DotNetNuke 6 uses several jQuery plugins to provide an updated, modern, and consistent user interface. These plugins are reusable client-side components that naturally layer functionality on top of the new DNN HTML form pattern.
The following information is pulled from the Reusable DotNetNuke jQuery Plugins wiki page, where you can find details, usage examples, and best practice information.
The plugins were created with the following high level 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
The following custom components are included in DotNetNuke 6. Can you spot the three that are being used in the screenshot of the Site Settings page above?
- dnnAlert – Displays a notice in a modal dialog (uses jQuery UI’s dialog)
- dnnConfirm – Displays an "are you sure?" confirmation in a modal dialog (uses jQuery UI’s dialog)
- 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’s tabs)
- dnnTooltip - Provides help/info tooltip functionality
- dnnPreview - Helps preview skins and containers in a new window
jQuery UI Themes
In addition, the core framework uses a custom jQuery UI theme to style the dialogs and tabs. A jQuery UI theme is simply CSS that targets the CSS classes generated by the jQuery UI framework. This style can be found in the default.css file.
The most important characteristic of this jQuery UI theme is that it takes advantage of CSS Scope to target only the elements that are necessary for the core to function properly. What this means is that it only targets the dialogs that have the “dnnFormPopup” CSS selector (such as in the image above) and the tabs that have the “dnnForm” class (such as in the previous image of the site settings page). This technique helps to prevent conflicts with jQuery UI components that are used elsewhere.
Very important: in order to use a jQuery UI theme in an extension and not break the default theme – you will need to use CSS Scope as well. If you do not, your CSS theme will apply to all elements and more than likely result in a visually disjointed site.
Please read the Using Multiple jQuery UI Themes on a Single Page article from the Filament Group for more information, and also check out the jQuery UI download page, paying special attention to the CSS Scope section under the “Advanced Theme Settings” section.
Summary
Over time, jQuery has built a larger and larger presence within the DotNetNuke Framework and community as well. Yet, DotNetNuke 6 is the first version to make use of jQuery to such a great extent.
I would expect that this trend will continue, and I see that trend in a very positive light. We’re building tools that help provide our community with a more compelling and a more modern user experience. At the same time these tools are helping to make UI development for those within DotNetNuke Corporation and those in the community easier and more consistent.
All of this is being done with the power, relative simplicity, and fun that comes along with jQuery. That’s not to say there won’t be occasional compatibility issues and stumbling points as we move forward – as the global nature of JavaScript and the breadth of our community does make things a bit tricky at times – but on the whole, I think we are making large strides in important areas, all to the benefit of the product and especially the community.