使用ResourceLoader添加脚本和样式

在本文中,将探讨如何使用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的脚本和样式路径。此外,还定义了一个自定义脚本的路径。

JQuery UI控件

在页面中,添加一个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控件

如果使用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>
沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485