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

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>

Hi Rad!

There are multiple jQuery DotNet integration libraries available, and I believe they all function similarly, as there aren't that many ways, in which to create a decent integration for ASP.NET. What jQUI-DNN does, is not just offer server controls that automatically create the required markup, and an infrastructure for registering js code on the page, but packages the whole jQuery UI javascript and css code in one neat package for easy installation in DotNetNuke.

This package is by far not as complete as the other available general jQuery ASP.NET integration packages in terms of server controls, which is partly due to my lack of time to continue on the package, but also because no one has requested any further widgets, and so far I have all the widgets I needed in my DNN modules. That said, if you need any further controls, just add a feature request, and I'll get around to implementing it, which usually does not take all too long.

You can see a demo of the integration itself on the demo page http://jquidnn.succell.net/. This demo is included, when you install the package, as the jQUI-DNN module's default view. You can of course find the code required to use the controls in the included .ascx and .ascx.cs files. But basically, it's similar to the other libraries. Simply start using the controls, they will do the rest for you. And since this project offers such a neat DNN installable package, you don't even have to worry about any folder configuration. Just start using the controls, and you're off.

This library is basically just infrastructure for other modules, so there is no admin interface to it. You shouldn't even use the module itself on a page, since it only shows a demo of the included controls. The installation package is available for the sole purpose of deploying the dll containing the infrastructure and server controls, and deploying the jQuery UI javascript-, css-, and image files, to a central location.

You can of course also use one of the other libraries, but that makes deployment in a DotNetNuke environment more complex. And I've put too much effort into this package to just become a deployment package creator for one of the other libraries. Sorry.

Best regards,
Christoph

Hi Christoph

Is your approach similar to DJ - jQuery Web Contorls for ASP.NET http://dj.codeplex.com/

Do you think it would be possible to get dj wrappers and extend it for use with DNN?

Where can I see DNN Admin demo or source code using jQuery UI DotNetNuke integration module.

Tx,

Rad

Thank you Christoph

Yes, I will do that. Thankyou for your time.

Regds

Inge

Hi Inge!

There are so many great widgets for JQuery, it would take a lot of manpower to wrap each and every one into a control. If you have a specific one in mind, you can post a request. I may be able to add a control for it in the near future.

You might also consider simply using the DualListControl that is part of the DotNetNuke framework :-)

Best regards,
Christoph

Hi Christoph

Very, very helpfull. Thank you. Yes, very clear.

I have been looking for a dual list control. I see there are som for Jquery.

I think that would be a nice addition.

Regds

Inge

Hi Inge!

I believe, what you are trying to do can be achieved with some simple Javascript using the basic jQuery UI widget features.

Simply add buttons to your page which have an onclick event (OnClientClick property on the ASP.NET button control). The onclick handler can then use the jQuery UI widget's methods to select a different tab:

string clientId = JQuery.JQueryClientId(myTabsControl); // if you use .NET 3.5, you can also use it as an extension method: myTabsControl.JQueryClientId();
nextButton.OnClientClick = "var tabsObj = jQuery('" + clientId + "'); var noOfTabs = tabsObj.tabs('length'); var selectedTab = tabsObj.tabs('option', 'selected'); if (selectedTab < noOfTabs - 1) { tabsObj.tabs('select', selectedTab + 1) }";
prevButton.OnClientClick = "var tabsObj = jQuery('" + clientId + "'); var selectedTab = tabsObj.tabs('option', 'selected'); if (selectedTab > 0) { tabsObj.tabs('select', selectedTab - 1) }";

The idea is to get the currently selected tab, check whether there is a next or previous tab, and if so, select it. I haven't tested the code, but I hope the idea becomes clear.

Best regards,
Christoph

Hi Christoph

Very nice work. One small question from a newbie.

Can I have a button to change active tab? Like next / previous page?

Regds

Inge

• Watermark (new)
• WindowedDialog

• ADD: bindUnload and unbindUnload added the windowedDialogChild
• ADD: watermark
• CHG: notifyUnload checks if the dialog was really closed or just reloaded