在DotNetNuke模块里面使用Jquery插件的方法（转）

转自：http://netindonesia.net/blogs/agung/archive/2008/08/12/integrating-jquery-and-jquery-cycle-plugin-into-dotnetnuke.aspx

 

Integrating jQuery and jQuery Cycle plugin into DotNetNuke

In this tutorial, i will show you how to integrate jQuery and some jQuery plugin into DotNetNuke module. Why i'm doing this is because my client need some functionality about some effect like scroll left, scroll right, fade, etc. My client is also using a lot of images for their business.

Yes i can use ASP .NET AJAX Control Toolkit. The first release of my module is using Ajax Control Toolkit and nothing wrong with it. But when I saw the performance and flexibility, I think I should change to another framework. This is only my personal opinion. I love Ajax Control Toolkit and use them in many DNN project. But for this project, jQuery is the answer. jQuery provide me a lot of functionality that exactly I can use it with ease.

Ok. Let's try to integrate jQuery and jQuery Cycle plugin into DNN module.

A. Preparation

Make sure you have been installed DNN website in your machine. Let say your address is : http://localhost/dnn with C:/dnn is the root folder. Notice that it might be different with your path. So make it correct based your DNN path installation folder.

Open your Visual Studio 2008

Choose File --> Open Website...

Choose Local IIS

Choose localhost/dnn website. Wait a minute.

Show your Solution Explorer, then right click for http://localhost/dnn and choose Add New Project.

Choose ASP.NET Web Application, use AR_Promo as the name of the project. Or you can use different one. Remember, this is WAP model.

Choose Visual C# as a language for your project.

Don't forget to create your project inside C:/dnn/DesktopModules

Click OK.

Your project created.

B. Configuring

Delete Default.aspx and web.config file.

Right click on your project, then choose Properties.

Click Build tab, and change Output path into C:/dnn/bin (or use your bin DNN folder)

Click Save

Right click  on your project again, then choose Add Reference...

Click Browse tab, then point to C:/dnn/bin

Choose DotNetNuke.dll and DotNetNuke.WebUtility.dll

After you add two references, select both of those files from References folder and change Copy Local into False for both from your Properties window..

Right click your AR_Promo module, then create new directory with name "script". This is a folder for placing jQuery, jQuery Cycle plugin and custom javascript file.

Right click again your AR_Promo module, then create new web user control. Name it "promo.ascx"

Your module will be like this in structure :





For Indonesian developer, you can read my free tutorial about creating DNN module here. Or maybe you can download all my tutorial for DNN here.

C. Download jQuery and jQuery Cycle plugin

Download jQuery javascript library here : http://jquery.com. Use newest version. Or you can directly download from here. The version is jquery-1.2.6.min.js. I use compressed one because it is smaller.  The size is only 16kb. :) Nice !




Download jQuery cycle plugin here.



 
Choose jQuery Cycle Plugin - compressed (6 KB) and jQuery Cycle Plugin with all transition - compressed (12 KB). Why ? Because you have to 'taste' its plugin. :) Really, you will love it.

Put your downloadable files into C:/dnn/DesktopModules/AR_Promo/script. Or make it same with your own DNN path.

Your jQuery and jQuery cycle plugin is ready to use.

D. Integrating into DotNetNuke module

Open promo.ascx, and type this code below :

<style type="text/css">
.pics {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; WIDTH: 232px; PADDING-TOP: 0px; HEIGHT: 232px
}
.pics IMG {
    BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 15px; LEFT: 0px; PADDING-BOTTOM: 15px; BORDER-LEFT: #ccc 1px solid; WIDTH: 200px; PADDING-TOP: 15px; BORDER-BOTTOM: #ccc 1px solid; TOP: 0px; HEIGHT: 200px; BACKGROUND-COLOR: #eee
}
#slideshow { position: relative; width: 200px; margin: 35px; }
#controls { z-index: 1000; position: absolute; top: 0; left: 0; display: none;
    margin: 0; padding: 6px;
    width: 200px;
</style>
<div id="slideshow">
    <div id="controls">
        <span><a href="" mce_href="" id="prev">Prev</a></span>
        <span><a href="" mce_href="" id="next">Next</a></span>
    </div>
    <div id="slides" class="pics">
        <img src="/Portals/0/beach1.jpg" mce_src="/Portals/0/beach1.jpg" width="200" height="200" />
        <img src="/Portals/0/beach2.jpg" mce_src="/Portals/0/beach2.jpg" width="200" height="200" />
        <img src="/Portals/0/beach3.jpg" mce_src="/Portals/0/beach3.jpg" width="200" height="200" />
        <img src="/Portals/0/beach4.jpg" mce_src="/Portals/0/beach4.jpg" width="200" height="200" />
        <img src="/Portals/0/beach5.jpg" mce_src="/Portals/0/beach5.jpg" width="200" height="200" />
        <img src="/Portals/0/beach6.jpg" mce_src="/Portals/0/beach6.jpg" width="200" height="200" />
        <img src="/Portals/0/beach7.jpg" mce_src="/Portals/0/beach7.jpg" width="200" height="200" />
        <img src="/Portals/0/beach8.jpg" mce_src="/Portals/0/beach8.jpg" width="200" height="200" />
    </div>
</div>

Notes: 
I use beach1.jpg, beach2.jpg, etc as a sample image. You can use it with your own.  Just point to right location inside your DNN folder. Or you can use it just a simple text inside a <div> tag. Or any HTML element you want to add into your design. You can also construct your own based on dynamic processing inside code behind. It's just an HTML element, so please be creative! :)

Open your promo.ascx code behind

Inherit your promo class into DotNetNuke.Entities.Modules.PortalModuleBase

Type this code below inside your Page_Load method (i will explain it later):

if (! IsPostBack)
{
    Control oCSS = this.Page.FindControl("CSS");
    if (oCSS != null)
    {
        HtmlGenericControl jquery = new HtmlGenericControl("script");
        jquery.Attributes["language"] = "javascript";
        jquery.Attributes["type"] = "text/javascript";
        jquery.Attributes["src"] = this.ModulePath + "script/jquery-1.2.6.min.js";

        oCSS.Controls.Add(jquery);

        HtmlGenericControl plugin = new HtmlGenericControl("script");
        plugin.Attributes["language"] = "javascript";
        plugin.Attributes["type"] = "text/javascript";

bc46
        plugin.Attributes["src"] = this.ModulePath + "script/jquery.cycle.all.js?v2.24";

        oCSS.Controls.Add(plugin);

        HtmlGenericControl jrun = new HtmlGenericControl("script");
        jrun.Attributes["language"] = "javascript";
        jrun.Attributes["type"] = "text/javascript";
        jrun.Attributes["src"] = this.ModulePath + "script/jrun.js";

        oCSS.Controls.Add(jrun);
    }

}

As you see in the last line that i add a new file with name jrun.js. This is an external javascript file for calling jQuery and jQuery Cycle library. You have to create it. So, please add new Javascript file inside script folder. The code for jrun.js is like below :

jQuery(document).ready(function() {
    jQuery('#slideshow').hover(
        function() { jQuery('#controls').fadeIn(); },
        function() { jQuery('#controls').fadeOut(); }
    );
    jQuery('#slides').cycle({
        fx:     'scrollVert',
        speed:   600,
        random:  1,
        timeout: 3000,
        next:   '#next',
        prev:   '#prev'
    });
});
Build your module. Make sure there is no error when compiling.
Now, this is your folder structure :





E. Installing AR_Promo module into DotNetNuke website

Login as Host

Go to Host --> Module Definitions

Choose Create Module Definition

Add AR_Promo for Module Name, Folder Name, Friendly Name, and Description





Click Update

Add AR_Promo for New Definition textbox.





Click Add Definition link button.

Click Add Controls.

In Edit Module Control window,  point to DesktopModules/AR_Promo/promo.ascx in Source dropdownlist.

Click Update.

Your module is ready in Module List at DNN Control Panel at the top.

F. Testing your module

Go to a page (Home or any page)

Drop your module onto Home page

Voila, your module is ready to go ! :)





Wait a second, then your image will scroll vertical with very nice effect.





Hover your mouse, then you will see Prev Next anchor floating. You can click to go next or previous. Nice effect too. :)

 



G. Explanation

Remember the code behind in promo.ascx.cs ? This is what happened.

Put your jQuery library, jQuery Cycle plugin, and jrun.js between <HEAD> tag. In normal ASP.NET, that's easy. But in DNN, you have to do some trick. In DNN, a placeholder was prepared to injected with some CSS file. You can open your Default.aspx in DNN root folder. Then see this line :

<html <%=xmlns%> <%=LanguageCode%>>
<head id="Head" runat="server">
     ...
     ...
    <asp:placeholder id="CSS" runat="server" />
</head>

So, since the id is CSS, then I could manually injected something AT placeholder control. First, I have to reference it manually. This is easy to solve by using this code :

Control oCSS = this.Page.FindControl("CSS");

And for injecting some control into oCSS object, I can use this code :

oCSS.Controls.Add(a_control);

Then I create HtmlGenericControl object as a container for all my external javascript files. Add some attributes, and point to my jquery library file inside script folder. ModulePath property is the easiest way to reference to your module path.

HtmlGenericControl jquery = new HtmlGenericControl("script");
jquery.Attributes["language"] = "javascript";
jquery.Attributes["type"] = "text/javascript";
jquery.Attributes["src"] = this.ModulePath + "script/jquery-1.2.6.min.js";

oCSS.Controls.Add(jquery);

I did it again for another external javascript file.

HtmlGenericControl plugin = new HtmlGenericControl("script");
plugin.Attributes["language"] = "javascript";
plugin.Attributes["type"] = "text/javascript";
plugin.Attributes["src"] = this.ModulePath + "script/jquery.cycle.all.js?v2.24";
oCSS.Controls.Add(plugin);

HtmlGenericControl jrun = new HtmlGenericControl("script");
jrun.Attributes["language"] = "javascript";
jrun.Attributes["type"] = "text/javascript";
jrun.Attributes["src"] = this.ModulePath + "script/jrun.js";

oCSS.Controls.Add(jrun);

Now you can play with jQuery and jQuery Cycle plugin nicely inside DotNetNuke module!

Happy jQuery-ing :)

Note: There a lot of transition effect that you can choose. Just read jQuery Cycle plugin documentation.