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.

dnnTabs

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: http://jsfiddle.net/9Mst9/2/ 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 [http://jqueryui.com/demos/tabs/#option-fx]

duration: 'fast', // maps to core "fx" property. used for transition animation [http://jqueryui.com/demos/tabs/#option-fx]

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.

HTML:

<div class="dnnForm dnnDashBoard dnnClear" id="dnnDashBoard">

    <asp:Repeater ID="rptTabs" runat="server">

        <HeaderTemplate>

            <ul class="dnnAdminTabNav dnnClear" id="">

        </HeaderTemplate>

        <ItemTemplate>

            <li><a href='#<%# Eval("DashboardControlKey") %>-tab'><%# Eval("LocalizedTitle")%></a></li>

        </ItemTemplate>

        <FooterTemplate>

            </ul>

        </FooterTemplate>        

    </asp:Repeater>

    <asp:Repeater ID="rptControls" runat="server">

        <ItemTemplate>

            <div id='<%# Eval("DashboardControlKey") %>-tab' class="dnnDashboardPanel">

                <div class="dashboardHeader">

                </div>

                <asp:PlaceHolder ID="phControl" runat="server" />

            </div>

        </ItemTemplate>

    </asp:Repeater>

</div>

JavaScript:

$('#dnnDashBoard').dnnTabs();

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