- Overview
- Introduction to the jQuery server side selector
- Introduction to the jQuery.dll library
- Introduction to the JQueryPlugin Control
- Introduction to the DJ WebControls
- Introduction to the DNA JQuery UI Framework
Overview
If you are a starter of DJ i have some guidelines for you to using DJ more easier and quick.
- If you do not know more about jQuery but you just wants to use DJ WebControls on your ASP.NET Application,you can go to LiveDemo site to lean about what the Server Controls could do and how to using in your ASP.NET Application.The Live Demo site have over 100 samples to show you how to use DJ WebControls in ASP.NET Application.
- If you are an ASP.NET developer with jQuery experienced and wants to add some jQuery plugins in you ASP.NET Application by DJ,i snuggests you to read about jQuery service side selctor and JQueryPlugin control in this article.
- If you are a jQuery expert with ASP.NET development experienced and wants to write the jQuery plugin WebControl for ASP.NET read this article and know more about [DNA_JQueryFramework.ashx|DNA JQuery UI Framework]
Introduction to the jQuery server side selector
jQuery server side selector in the DJ is a very important concept, it has been widely used in Jquery Interactive WebControls. JQuery Server side selector is DNA.UI.JQuerySelector class. It defines the $ (selector) of the output format. It has two selector mode: server selector mode, client selector mode
Properties
There are three properties you need to know：
- string TargetID:Reference single ServerControl/HtmlElement ID
- stirng[] TargetIDs:Reference multi ServerControls/HtmlElements ID
- string Selector:The original selector string for jQuery.
These three properties are mutually exclusive properties,there is only one property will be used.Their priority are as follows：1.Selector 2.TargetID 3.TargetIDs
In addition there are properties controls the output format
- NoConfir :Gets/Sets whether the JQuerySelector class convert the "#" to "jQuery"
- IsExpessionOnly:Gets/Sets whether the JQuerySelector append the "#" to the selector string.
Methods
JQuerySelector class has two outmode:Client selector mode and Server selector mode.
- In Client selector mode,the JQuerySelector will not do any convert for the id(ids),it just only build the selector string for jQuery.
- In Server selector mode,the JQuerySelector will convert the TargetID,TargetIDs to thire realid(ClientID),and build the selector string for jQuery.
Using ToString(),ToString(Page page) method to control the output mode of JquerySelector.
ToString()： Client selector mode
TargetID/TargetIDs is refers to the element id in page.all output of the ids will be added "#" prefix。
ToString(Page page):Server selector mode
JQuerySelector will find the Control instance in the page，if the control instance found.the ID will convert to ClientID otherwise do no change for the id(s).
TargetID,TargetIDs usage
TargetID,TargetIDs supports "Hierarchy","Basic Filters","Content Filters" (you can lean more about jQuery Selectors)
e.g:
Input: TargetID="Panel1>div"
Output:$("#DemoPage_Panel1>div")
or
Input: TargetIDs="Panel1>ul,Panel2:first"
Output:$("#DemoPage_Panel1>ul,#Demo_Panel2:first")
This usage makes the server control ID as a real ID to use, JQuerySelector will find the real ID for the server control.
If you are using JQuerySelector will automatically NoConfir property of "#" is converted to "jQuery", as described above will become:
jQuery("#DemoPage_Panel1>div")
Introduction to the jQuery.dll library
In order to facilitate reference and update the core of jQuery script library, I put all the jQuery scripts embedded into the jQuery.dll, the classification is as follows:
jQuery.core.js -> jQuery 1.3.2 core
jQuery.ui -> all types of script ui
jQuery.plugins -> the plugin file puts here
In addition, other reference to the jQuery plugin script I recommend the use of library reference manner, making it easier for future updates on the unity of the script.
Introduction to the JQueryPlugin Control
JQueryPlugin is a WebContorl that manages the jQuery script libraries and script files.It gernates the script for jQuery plugins just like this : $(selector).name(options);
Properties
- Target property is JQuery Sever Side Selector to apply the jQuery plugin to one or more WebControls.
- Name property use to specify the jQuery plugin name.
- StartEvent property tells JQueryPlugin when jQuery scripts run at:(ApplicationLoad,ApplicationInit,DocumentDeady)
- PluginScripts collection property register the jQuery plugin scripts in run time.
Example
This example will using SimpleListView control and JQueryPlugin control to show you how to using the jQuery plugin in ASP.NET without code.
the first add the SimpleListView control on you page.
<DotNetAge:SimpleListView ID="SimpleListView1" runat="server">
<ItemTemplate>
<asp:HyperLink ID="HyperLink1" runat="server"
NavigateUrl='<%# Eval("NavigateUrl") %>' ImageUrl='<%# Eval("ImageUrl") %>'>asp:HyperLink>
ItemTemplate>
<Items>
<DotNetAge:SimpleListItem ImageUrl="~/JQueryPlugin/Images/photos/thumb_image1.jpg"
NavigateUrl="~/JQueryPlugin/Images/photos/image1.jpg" />
<DotNetAge:SimpleListItem ImageUrl="~/JQueryPlugin/Images/photos/thumb_image2.jpg"
NavigateUrl="~/JQueryPlugin/Images/photos/image2.jpg" />
<DotNetAge:SimpleListItem ImageUrl="~/JQueryPlugin/Images/photos/thumb_image3.jpg"
NavigateUrl="~/JQueryPlugin/Images/photos/image3.jpg" />
<DotNetAge:SimpleListItem ImageUrl="~/JQueryPlugin/Images/photosthumb_image4.jpg"
NavigateUrl="~/JQueryPlugin/Images/photos/image4.jpg" />
<DotNetAge:SimpleListItem ImageUrl="~/JQueryPlugin/Images/photos/thumb_image5.jpg"
NavigateUrl="~/JQueryPlugin/Images/photos/image5.jpg" />
Items>
DotNetAge:SimpleListView>
the second put the JQueryPlugin Control form the toolbox and using VS.NET designer to set the porperties like this:
<DotNetAge:JQueryPlugin ID="JQueryPlugin2" runat="server" Name="lightBox">
<Target TargetID="SimpleListView1 a" />
<PlugInScripts>
<asp:ScriptReference Assembly="jQuery" Name="jQuery.plugins.lightbox.js" />
PlugInScripts>
DotNetAge:JQueryPlugin>
That all build and press F5 to run it.
You can find this example in live demo site JQueryPlugin Live Demo
Suggestions
There are some suggestions of using jQuery plugin(s) in ASP.NET though JQueryPlugin WebControl
- If the jQuery plugin has a few options i suggest to use JQueryPlugin WebControl this is the best choice for you.
- When the jQuery plugins option has over more then 10,and the plugin has it own HtmlElements or need some server side function supports i suggest to using the [DJ_JQueryFramework|DNA JQuery UI framework] to write a jQuery UI WebControl for this jQuery plugin.
- When the jQuery plugin options has over more than 10 and it has none ui but it using frequently,i suggest to write the jQuery None UI WebControl by using [DJ_JQueryFramework|DNA JQuery UI framework]
Introduction to the DJ WebControls
DJ v1.1.15 impletement all the jQuery ui plugins,jQuery interaction plugins and animations,effects of jQuery 1.3.2,jQuery UI 1.7.2.It provides over 14 JQuery WebControls and UI Helper Controls。
According to the classification of jQuery in the DJ will be divided into categories:JQuery UI WebControls, JQuery Interactive WebControls, DNA UI Helper Controls
Read [DJ_WebCtrls|DJ WebControls] to get more info.
JQuery UI WebControls
JQuery UI WebControls implements all of the jQuery ui plugin widgets. They have their own designer, and the designer support jQuery CSS Framework maintained a Jquery UI WebControls in the design time and run time of the consistency of visual.
JQuery UI WebControls including:Accordion Control,Dialog Control,Tabs Control,Slider Control,Progressbar Control,DatePicker Control.
JQuery Interactive WebControls
JQuery UI WebControls implements all of the jQuery interactive plugins.They have no ui by itself,by they can extend the client functionaly for another Server Controls or HtmlElements.Including Draggable control,Droppable control,Sortable control,Selectable cotnrol,Resizable control.
DNA UI Helper Controls
The UI Helper controls including SimpleListView Control,CollapsePanel,SimpleButton
Introduction to the DNA JQuery UI Framework
DNA JQuery UI Framework is a lightweight framework helps you to integate the jQuery plugins with ASP.NET 2.0 server-based development platform.I provides the simple way to write the Server Controls for the jQuery plugins.
Read [DNA_JQueryFramework|DNA JQuery UI Framework] lean more about it.
-
Average:5
-
Reads(4278)
-
Permalink
