dnnTabs jQuery Plugin

Return to previous page

  • 4/7/2015
  • 563 Views

Comments

563 Views

dnnTabs jQuery Plugin

Last updated 4 years ago

Comments

Common

(Enter the content of this article below)

Advanced

 
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
Contents
No sections defined
Try Evoq
For Free
Start Free Trial
Request
a Demo
See Evoq Live
REGISTER FOR THE WEBINAR
Broaden the Reach of Your Content Marketing by Thinking Like Food Trucks
REGISTER NOW
Latest Blog
How to Make Advocate Marketing Work for You
Read It