Using Tabs in Text/HTML

Nov 14, 2009 at 5:23 PM

I am a jQuery newbie and I want to add UI tabs to an XModPro Template. I figure that if I understand how to do it in Text/HTML I can do it in XModPro. So, I tried using the sample code from the jQuery UI documentation and it is working (see below) but it is pointing off-site.

How can I use this module to do the same thing? (Please help me with code examples, I copy very well but am still feeling my way around the code.)

Thanks in advance,
Lance

---------------------
Code Example (this works but points off-site):

<link rel="stylesheet" type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" /><script type="text/javascript" src="<!-- http://jqueryui.com/latest/jquery-1.3.2.js"></script><script type="text/javascript" src=" // -->http://jqueryui.com/latest/ui/ui.tabs.js"></script><script type="text/javascript">
 $(document).ready(function(){
    $("#tabs").tabs();
  });
</script>
<div id="tabs">
<ul>
    <li><a href="#fragment-1"><span>One</span></a></li>
    <li><a href="#fragment-2"><span>Two</span></a></li>
    <li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<script>
<pre><code>$('#example').tabs();</code></pre>
</script></div>
<div id="fragment-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div id="fragment-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>

Coordinator
Nov 15, 2009 at 10:13 AM

Hi Lance!

If I understand you correctly, your main problem is getting jQuery tabs to work in XModPro. Maybe you should ask the their team for support. The jQUI-DNN module is rather meant as an aid for developers wanting to use jQuery UI in their own custom modules. I have not used XModPro yet, so I won't be of much help. But if I read their product description correctly, they offer something similar to tabs with the tabstrip control out of the box, don't they?

If you can use .ascx file for templates in xmod, it would be possible for you to use this module to complement xmod, but since I have never worked with it, I don't know if this is supported. If it is, then I can probably help you.

Regards,
Christoph

Sep 6, 2011 at 4:23 PM
Edited Sep 6, 2011 at 4:24 PM

Hi LPrager, I realize that 2009 was a long time ago, but i wondered whether you figured out how to work with XMod Pro for your jQuery tabs?

For any other users that come across this post in the search for XMod Pro related help or topics, I thought i'd post a reply with some notes/help.

Lance was right, in that the form code when building custom forms in XMod Pro has a built-in tag that allows for tabs/panes so that the user can fill out multi-step or multi-tab form fields (think of it like a basic and advanced/additional tab each for filling out a form)

Learn about Building custom DNN Forms with tabs in XMod Pro here, and then look into the help CHM for more information and specifics.

What you were wanting to do was more in the data display side, in templates, and for that, you'd be using JQuery just like you were starting out here. You'd need to put the JQuery into an XMod ScriptBlock and then work out the repeating elements of the template based on the record set you return in your select statement. All easy enough to do when you start breaking it out into pieces. For anyone interested, take a look at the main XMod Pro page for custom layout and design for DotNetNuke list and view here. For LPrager, check in the Help file and read up on the ScriptBlock...

Also, remember that the XMod forums are stocked with developers and staff helping DotNetNuke developers get the most out of their sites, ask questions there and i'll be glad to help answer!

- Ryan
(moorecreative)