New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

dnnTabs jQuery Plugin

Return to previous page

  • 4/7/2015



dnnTabs jQuery Plugin

Last updated long time ago



(Enter the content of this article below)


This article is for a specific plugin. Please be sure to read the Introduction and Overview to jQuery Plugins which provides an introduction to the plugins.


This is a wrapper around the jQuery tabs functionality, and is used to help organize pages with lots of content. This plugin is very close to the original jQuery plugin – only it layers a few features on top.

The first is a bug fix for jQuery UI’s tabs (example here: where it won’t select items with a period in the selector. Having periods in IDs is common in the ASP.NET Web Forms world.

The second feature is cookie management. It saves the user’s selected tab state in a cookie using the DNN client api.

In addition, the plugin also has a built-in awareness of validation. Upon page load or post back, the plugin will walk through the tabs and will select the first one that has a "tripped" validator. Please refer to the options below for usage.

Assuming you followed the form pattern for tabs – it’s as easy as selecting the outer div that wraps the tabs and content and initializing the plugin without any options.

Available Options and their Defaults

opacity: 'toggle', // maps to core "fx" property. used for transition animation []
duration: 'fast', // maps to core "fx" property. used for transition animation []
validationTriggerSelector: '.dnnPrimaryAction', // elements that trigger validation
validationGroup: '', // optional validation group
invalidItemSelector: '.dnnFormError[style*="inline"]', // elements in an invalid state
selected: -1, // index of tab to select
cookieDays: 0, // cookie state persistence time in days
cookieMilleseconds: 120000 // cookie state persistence in minutes minutes (defaults to two minutes)

Usage Example

The HTML used for this plugin is identical to that used for jQuery UI's tabs. Below is an example of using a repeater to generate the appropriate markup.


<div class="dnnForm dnnDashBoard dnnClear" id="dnnDashBoard">
<asp:Repeater ID="rptTabs" runat="server">
<ul class="dnnAdminTabNav dnnClear" id="">
<li><a href='#<%# Eval("DashboardControlKey") %>-tab'><%# Eval("LocalizedTitle")%></a></li>
<asp:Repeater ID="rptControls" runat="server">
<div id='<%# Eval("DashboardControlKey") %>-tab' class="dnnDashboardPanel">
<div class="dashboardHeader">
<asp:PlaceHolder ID="phControl" runat="server" />



Other jQuery Plugins

  • 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
  • dnnTooltip - Provides help/info tooltip functionality
  • dnnPreview - Helps preview skins and containers in a new window
No sections defined
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out