How to use jQuery UI Tabs on DotNetNuke 6.2+

Question

I'm using the latest version of DNN and Chris Hammond's VS 2010 template for module development. I'm simply attempting to place a jQueryUI Tab control on my page. I looked at the documentation and it seems like this should work. When I view source I can see that jQueryUI is being included in the header. I also tried replacing the tabs() call with dnnTabs(), but no difference. So, what am I missing here? Thanks in advance!

Code in module.js:

(function ($) {
    $("#tabz").tabs();
})(jQuery);

---

Code in MyModule.ascx.cs:

protected void Page_Init(object sender, EventArgs e)
{
    Framework.jQuery.RequestRegistration();

    if (Framework.AJAX.IsInstalled()) {
        Framework.AJAX.RegisterScriptManager();
    }
}

---

Code in MyModule.ascx

 <dnn:DnnJsInclude ID="DnnJsInclude" runat="server" FilePath="~/DesktopModules/MyModule/module.js" />

<div id="tabz">
<ul>
    <li><a href="#tabs-1">Page 1</a></li>
    <li><a href="#tabs-2">Page 2</a></li>
</ul>
<div id="tabs-1">
        This is tab 1.
    </div>
    <div id="tabs-2">
        This is tab 2.
    </div>
</div>

Answer 1

Your over doing it, its much simpler than that.

In your .ascx page you should include:

<script type="text/javascript">
$(function() {
    $( "#tabz" ).tabs();
});
</script>

And you dont need anything in your code behind.

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