在本文中,将探讨如何使用ResourceLoader来为网页添加脚本和样式。这包括JQuery UI控件、JQPlot控件以及自定义控件的配置方法。首先,需要确保已经下载了最新版本的JQueryElement。
在开始之前,请确保已经下载了JQueryElement的最新版本。可以在以下目录找到下载链接:/resourceloader/Default.aspx
。下载完成后,需要在项目中引用JQueryElement的命名空间。
在web.config文件中,需要定义脚本或样式的路径。这可以通过添加appSettings节点来实现。例如:
<appSettings>
<add key="je.jquery.js" value="~/js/jquery-1.6.2.min.js"/>
<add key="je.jquery.ui.js" value="~/js/jquery-ui-1.8.15.custom.min.js"/>
<add key="je.jquery.ui.css" value="~/css/smoothness/jquery-ui-1.8.15.custom.css"/>
<add key="je.jqplot.excanvas.js" value="~/js/excanvas.min.js"/>
<add key="je.jqplot.js" value="~/js/jquery.jqplot.min.js"/>
<add key="je.jqplot.DateAxisRenderer.js" value="~/js/plugins/jqplot.dateAxisRenderer.min.js"/>
<add key="je.jqplot.css" value="~/css/jquery.jqplot.min.css"/>
<add key="my.key" value="~/js/my.js"/>
</appSettings>
在上述代码中,定义了JQuery、JQuery UI和jqplot的脚本和样式路径。此外,还定义了一个自定义脚本的路径。
在页面中,添加一个ResourceLoader控件,然后添加一个JQueryElement控件,例如一个按钮:
<head runat="server">
<title>JQuery UI Controls</title>
</head>
...
<je:ResourceLoader ID="resource" runat="server" />
<je:Button ID="button" runat="server" Label="A Button">
</je:Button>
在上面的例子中,不需要手动添加JQuery UI的脚本和样式,因为ResourceLoader会自动为添加。
如果使用jqplot控件,也需要添加ResourceLoader控件,并设置一些属性:
<je:ResourceLoader ID="resource" runat="server" JQPlotDateAxisRenderer="true" />
<je:Plot ID="plot1" runat="server" IsVariable="true">
<AxesSetting XAxisSetting-Renderer="DateAxisRenderer">
</AxesSetting>
<DataSetting>
<je:Data>
<je:Point Param1="'2011-1-1'" Param2="300" />
<je:Point Param1="'2011-1-2'" Param2="320" />
<je:Point Param1="'2011-1-3'" Param2="340" />
<je:Point Param1="'2011-1-4'" Param2="400" />
</je:Data>
</DataSetting>
</je:Plot>
在上面的代码中,使用了jqplot的日期轴控件,因此需要将JQPlotDateAxisRenderer属性设置为true。
通过ResourceLoader控件的JQuery、JQueryUI、JQPlot属性来添加脚本和样式:
<je:ResourceLoader ID="resource" runat="server" JQueryUI="true" />
在上面的代码中,将JQueryUI属性设置为true,页面将添加JQuery UI的脚本和样式。
可以为自定义控件指定所需的脚本和样式:
using zoyobar.shared.panzer.ui.jqueryui;
[Resource (SingleScript = "my.js", SingleStyle = "my.css")]
public partial class resourceloader_MyControl : System.Web.UI.UserControl
{
...
}
使用ResourceAttribute的SingleScript和SingleStyle属性来指定脚本和样式的关键字。这些关键字已经在web.config中指定:
<appSettings>
<add key="my.js" value="~/resourceloader/mycontrol.js"/>
<add key="my.css" value="~/resourceloader/mycontrol.css"/>
...
</appSettings>
可以指定多个脚本或样式,用分号分隔。对于自定义文件,关键字的顺序就是文件的加载顺序。
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MyControl2.ascx.cs" Inherits="resourceloader_MyControl2" %>
<input type="button" class="my-button" onclick="alert(add(1,2));" value="1 + 2" />
using zoyobar.shared.panzer.ui.jqueryui;
[Resource (SingleScript = "my.js", MultipleScript="my1.js", SingleStyle = "my.css")]
public partial class resourceloader_MyControl2 : System.Web.UI.UserControl
{
...
}
<appSettings>
<add key="my.js" value="~/resourceloader/mycontrol.js"/>
<add key="my1.js" value="~/resourceloader/mycontrol.1.js"/>
<add key="my2.js" value="~/resourceloader/mycontrol.2.js"/>
<add key="my.css" value="~/resourceloader/mycontrol.css"/>
...
</appSettings>