Join our DNN Community    (Newsletter, Tips, Tricks and Forums for DNN Skins & Modules)

 


 
Microsoft Gold Certified Partner - DNN Benefactor

DotNetNuke Powered! 
Friday, December 05, 2008 Register · Login · Contact · Search:  
Company Solutions Portfolio Contact
Forums
Samples and other shared info.

Forums > Bi4ce.Modules.ListX > Samples and other shared info.
Subject: Make an EASY tabbed menu module with Listx and Jquery

You are not authorized to post a reply.   
Author Messages
pauldes
Immortal
Posts:1392
05/10/2008 10:29 AM Alert 
First, you need to download and install jQuery javascript library from jquery.com. I HIGHLY recommend you check out jQuery. It is the perfect complement to ListX and integrates with it pretty much seamlessly(so far). It has a ton of prebuilt utilities and tools that are very elegant and easy to implement.

My reference below is for version 1.23. Adjust path to jQuery library as necessary. I have the example below with lxModule, but you could just as easily implement with lxContainer if that's your preference.

Just copy, paste into your detail header, and replace the alert javascript calls with the correct lxModule and moduleid syntax for your page.

<link rel="stylesheet" href="/js/jQuery/ui.tabs.css" type="text/css" media="screen">
<script type="text/javascript" src="/js/jQuery/ui.tabs.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#container-1 > ul').tabs({ selected: 4 });

});
</script>
<div id="mod_1" style="display:none;height:0px;"></div>
<div id="mod_2" style="display:none;height:0px;"></div>
<div id="mod_3" style="display:none;height:0px;"></div>
<div id="mod_4" style="display:none;height:0px;"></div>
<div id="container-1" style="border-bottom:1px solid #A2BBDD;">
<ul>
<li style="float:right;"><a onclick="alert('Place lxModule(xmoduleidx,true) here'); return false;" href="#mod_4" title="Module4 View"><span>Module4 </span></a></li>
<li style="float:right;"><a onclick="alert('Place lxModule(xmoduleidx,true) here'); return false;" href="#mod_3" title="Module3 View"><span>Module3 </span></a></li>
<li style="float:right;"><a onclick="alert('Place lxModule(xmoduleidx,true) here'); return false;" href="#mod_2" title="Module2 View"><span>Module2 </span></a></li>
<li style="float:right;"><a onclick="alert('Place lxModule(xmoduleidx,true) here'); return false;" href="#mod_1" title="Module1 View"><span>Module1 </span></a></li>
</ul>
</div>
ListX....makes you look brilliant, even though you're not.
robert_chumley
Please Wait...
Posts:595
05/12/2008 9:15 AM Alert 
Thanks paul,
I will certainly keep this one handy.
Have you seen the same thing done with the Yahoo Library?

http://developer.yahoo.com/yui/tabview/

Thanks,
Robert Chumley
r2integrated (formally bi4ce)
pauldes
Immortal
Posts:1392
05/12/2008 9:51 AM Alert 
Cool.... We evaluated all the 4 major libraries and decided to standardize on jQuery. Found it to be the best, hassle free integration with ListX tags. I've heard grumblings about a tighter integration with jQuery and OWS/ListX from the R2I shop as well. ;-)

I have no doubt that YUI does the same. They also have EXCELLENT documentation which is a big plus for YUI, I think.....
ListX....makes you look brilliant, even though you're not.
kevinmschreiner
Please Wait...
Posts:749
05/19/2008 10:14 AM Alert 
Yes, they do have a pretty nice library - but after evaluation and weighing the inclusionary factors - jQuery was the winner! So, for example, the new Quick Builder interface and its output will actually incorporate jQuery by default to provide a cleaner and more interactive user experience.
Kevin M Schreiner

Business Intelligence Force, Inc. (bi4ce)
You are not authorized to post a reply.
Forums > Bi4ce.Modules.ListX > Samples and other shared info. > Make an EASY tabbed menu module with Listx and Jquery


ActiveForums 3.6
Latest Post
 
At R2integrated (formerly Bi4ce), we take support seriously.  That's why we support our customers and DNN community with daily monitoring from our experienced engineering team.  We ask that the first step taken is to read the relevant documentation and support forums prior to submitting any questions that may already be available or have been answered.  We ask that you review the documentation that we provide for our products before posting a question.

The Forums are for our customers to chat, exchange ideas and strategies, and submit feedback.  Please be sure to perform keyword searches for previous related forum responses.

To be helpful when submitting a new item, please include the following: 
  1. DNN Version
  2. Module Version
  3. Admin Log Viewer Information
  4. Environment detail: Operating system, .NET framework version, database and version, IIS version, Browser version (if appropriate)
We always try to respond quickly and monitor the forums daily during business hours (EST).  Occasionally, requests for a specific project requirement may not apply for the free support offered. For project specific support please submit via our Information Request form.

Thank you for using our Forums.

Click here to register for the Forums
 
© 2008 by R2integrated (formerly Bi4ce) | DNN® is a registered trademark of DotNetNuke Corporation