dnnTabs jQuery Plugin

Modified on 2011/07/16 03:50 PM by cathal Categorized as Uncategorized
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


Copyright 2014 by DNN Corp Terms of Use Privacy
Request
a Demo
See Evoq Live
Latest Blog
How to Make Advocate Marketing Work for You
Read It
Watch the Replay
Top 5 Reasons to Consider a Branded Online Community
Watch