DNN 6 jQuery Tabs

Question

I've tried with several half fails to get the DNN 6 version of jQuery tabs (called DNNTabs) to work inside a custom modules "Edit" page (which opens in a modal, similar to module "Settings"). I want the same default theme/css applied to the tabs and buttons (it should behave almost exactly like Settings).

Here is what appears to be the start of some documentation, but its not very complete.

http://www.dotnetnuke.com/Resources/Wiki/Page/dnnTabs-jQuery-Plugin.aspx

I've scoured the interwebs for an example to follow, but most all examples utilize the original jQuery Tabs and/or a modification of it to "work" with DNN.

http://jqueryui.com/demos/tabs/

The start of my code which does not work.

<script type="text/javascript">
    $('#tabs').dnnTabs();
</script>
<div id="tabs" class="dnnForm dnnModuleSettings dnnClear">
    <ul class="dnnAdminTabNav dnnClear">
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
    </ul>
    <div id="tab1">
        Some content...
    </div>
    <div id="tab2">
        Some content...
    </div>        
</div>

Somewhere else I read I have to request the DNN plugins registration in my OnInit like so:

protected void OnInit(object sender, System.EventArgs e)
{
    DotNetNuke.Framework.jQuery.RequestDnnPluginsRegistration();
}

Am I missing another reference, line of code, something? 1) all the tabs display on load and 2) clicking a tab just scrolls to id location in modal (which cannot scroll back to the top after)

score 3 · Accepted Answer · answered Jan 26 '12 at 15:15

3

I think that looks complete; the only issue that I see is that you're initializing the plugin before you've defined the tabs. That is, the first thing you do is retrieve the element with ID tabs and setup the plugin for it, but that element doesn't exist yet. Move your script to the bottom of your control and I think it'll start working.

One other thing that you might need to adjust is your OnInit handler. Typically, OnInit is an override of Control.OnInit, so it'll end up looking like this:

protected override void OnInit(EventArgs e)
{
    base.OnInit(e);
    jQuery.RequestDnnPluginsRegistration();
}

You may also want to look at my example of this (and other) plugins at https://github.com/bdukes/DNN-World-Demos. These examples are pretty stripped down, so you'll see that there are a few CSS styles that you don't really need in there, if you aren't using them.

answered Jan 26 '12 at 15:15

bdukes

152,002
23
148
175

Both changing the OnInit and moving the jQuery to below (I knew that :) fixed it. On first load, everything displays as expected, but on postback, nothing. I added UpdatePanels inside each tab div to resolve that according to: http://stackoverflow.com/questions/2149908/jquery-postback-maintain-same-tab-after-postback By the way, your stripped down examples are great. These should go up on the main DNN wiki themselves or as links. – roadsunknown Jan 27 '12 at 02:31
Yeah, either `UpdatePanel`s inside the `div`s, or you can setup the jQuery plugin again after each postback, as I do in the [Panels example](https://github.com/bdukes/DNN-World-Demos/blob/master/Panels.ascx). There had been talk of incorporating those examples with the wiki or something, but I don't think anyone remembered to actually do that... – bdukes Jan 27 '12 at 16:30

DNN 6 jQuery Tabs

1 Answers1