DotNetNuke bietet über die Host Einstellungen die bereits in DotNetNuke integrierten jQuery und jQuery-ui an, erlaubt jedoch auch gehostete Versionen einzustellen, bzw. zu verwenden.
Dies bedeutet, dass in keinem Skin die jQuery und/oder jQuery-ui mitgeliefert werden sollen! Dies macht auch Sinn, denn so hat man eine Kontrolle über die in DNN verwendete Version von jQuery und jQuery-ui, sowie DNN muss nicht mehrfach jQuery laden und man vermeidet Effekte durch alte oder falsche Versionen in verwendeten Modulen.
Weiterhin sollte auf die Verwendung des $ (Dollar Zeichens) verzichtet werden, da dieses in vielen Modulen zu problemen und unerwünschten Effekten führen kann.
Am Beispiel eines Images Sliders möchte ich nachstehend die Registrierung von jQuery und jQuery-ui, sowie den Funktionsaufruf für den Slider und dessen body Attribute eingehen.
Beispiel einer index.aspx:
01.<Head>
02.<link href="skin.css" rel="stylesheet" type="text/css"></link>
03.
04.<link href="banner/style.css"></link>
05.
06.<script runat="server">
07.
08. Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
09.
10. DotNetNuke.Framework.jQuery.RequestRegistration()
11. DotNetNuke.Framework.jQuery.RequestUIRegistration()
12.
13. End Sub
14.</script>
15.
16.
17.<script type="text/javascript">
18. jQuery(function(){
19. jQuery("#JBanner").tabs({fx:{opacity: "toggle"]).tabs("rotate", 10000, true);
20.
21. });
22.
23.</script>
24.</Head>
25.
26.<Body>
27.<div class="banner_index">
28.<div id="JBanner">
29.<ul class="banner_item">
30.<li class="banner_item li.ui-tabs-selected" id="nav-banner-1"><a href="#ui-tabs-1"></a></li>
31.<li class="banner_item li ul.banner_item" id="nav-banner-2"><a href="#ui-tabs-2"></a></li>
32.<li class="banner_item li ul.banner_item" id="nav-banner-3"><a href="#ui-tabs-3"></a></li>
33.<li class="banner_item li ul.banner_item" id="nav-banner-4"><a href="#ui-tabs-4"></a></li>
34.<li class="banner_item li ul.banner_item" id="nav-banner-5"><a href="#ui-tabs-5"></a></li>
35.</ul>
36.
37.
38.<div class="ui-tabs-panel" id="ui-tabs-1"><img alt="" src="banner/Banner_1.jpg" /></div>
39.<div class="ui-tabs-panel ui-tabs-hide" id="ui-tabs-2"><img alt="" src="banner/Banner_2.jpg" /></div>
40.<div class="ui-tabs-panel ui-tabs-hide" id="ui-tabs-3"><img alt="" src="banner/Banner_3.jpg" /></div>
41.<div class="ui-tabs-panel ui-tabs-hide" id="ui-tabs-4"><img alt="" src="banner/Banner_4.jpg" /></div>
42.<div class="ui-tabs-panel ui-tabs-hide" id="ui-tabs-5"><img alt="" src="banner/Banner_5.jpg" /></div>
43.</div>
44.
45.</Body>