jquery按钮特效 jquery 按钮

今天和之后的一段时间, 将给大家带来新的内容 JQueryElement 服务器控件, 而暂时不再讨论 IEBrowser 的相关内容.

JQueryElement 是可以在 ASP.NET 中使用的服务器端控件, 实现了 jqueryui 的相关功能和其所有的插件.

使用 JQueryElement 将减少需要手工书写的 javascript 脚本, 比如: 定义 jqueryui 中的按钮, 执行 Ajax 操作. 因此, 对 jqueryui 稍有或基本不了解的情况下, 可能使用 JQueryElement 完成稍稍复杂的任务.

而本次将演示一个通过 Ajax 调用来验证用户名的示例, 在示例所用的网站项目中, 已经引用了 JQueryElement 的 dll, jqueryui 相关的脚本和样式文件, 下面来看第一个页面 Button1.aspx:

1 <% @ Page Language = " C# " AutoEventWireup = " true " CodeFile = " Button1.aspx.cs " Inherits = " Button1 " %>
2
3 <% @ Register Assembly = " zoyobar.shared.panzer.JQueryElement " Namespace = " zoyobar.shared.panzer.ui.jqueryui " TagPrefix = " je " %>
4
5 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
6
7 < html xmlns ="http://www.w3.org/1999/xhtml" >
8 < head runat ="server" >
9 < title ></ title >
10 < link type ="text/css" rel ="Stylesheet" rev ="Stylesheet" href ="css/ui-lightness/jquery-ui-1.8.11.custom.css" />
11 < script type ="text/javascript" src ="js/jquery-1.5.1.min.js" ></ script >
12 < script type ="text/javascript" src ="js/jquery-ui-1.8.11.custom.min.js" ></ script >
13 </ head >
14 < body >
15 < form id ="form1" runat ="server" >
16 < div >
17 用户名: < input type ="text" id ="txtUserName" class ="ui-accordion-content" />
18 < je:Button ID ="cmdCheckUserName" runat ="server" Label ="检测用户名" >
19 < ClickAsync Url ="CheckUserName.ashx" Success ="
20 function(data)
21 {
22 alert(data.message);
23 }
24 " Error ="
25 function()
26 {
27 alert('检测出现错误!');
28 }
29 " >
30 < Parameters >
31 < je:ParameterEdit Name ="un" Type ="Selector" Value ="'#txtUserName'" />
32 </ Parameters >
33 </ ClickAsync >
34 </ je:Button >
35 </ div >
36 </ form >
37 </ body >
38 </ html >

在页面的 10 到 12 行中, 我们引用了 jqueryui 所需的样式和脚本, 因为 JQueryElement 并没有采用将所需的脚本作为资源嵌入到 dll 文件中.

第 3 行则是一条页面指令, 为页面引用 JQueryElement 的 dll. 而这条指令也会通过从工具栏中拖动 JQueryElement 控件到页面自动添加, 不过要首先在工具栏上添加 JQueryElement 控件.

我们看到, 第 18 到 34 是对 JQueryElement 按钮控件的定义, 在 jqueryui 中按钮插件的所有属性名称在 JQueryElement 中保持不变, 因此 18 行中的 Label 属性表示按钮的文本.

之后的 19 到 33 行是对点击按钮后 Ajax 操作的设置, 其中 Url 属性表示调用的页面地址, 这里是同目录下的 CheckUserName.ashx, 此文件用于检查用户名, 稍后会说明. Success 和 Error 属性表示 Ajax 操作成功或者出错时调用的 javascript 函数, 在处理成功的函数中, 我们看到函数有一个名为 data 的参数, data 中即包含了 CheckUserName.ashx 返回的 JSON 数据, 因此在此函数中, 我们可以将服务器返回的消息弹出给用户.

在调用 CheckUserName.ashx 检测用户名时, 我们通过 30 到 32 行设置了传递的参数, 也就是用户输入的用户名, ParameterEdit 的 Name 属性表示参数的名称, 这里是设置的 un, Type 属性表示 Value 中内容是如何生成参数值得, Selector 表示 Value 中的内容作为一个选择器, 其对应的元素的值将作为参数值, 这里的选择器也就是 jquery 中标准的选择器写法.

上面的简单设置即完成了大部分的操作, 下面只需要再编写 CheckUserName.ashx 即可:

1 <% @ WebHandler Language = " C# " Class = " CheckUserName " %>
2
3 using System;
4 using System.Web;
5
6 public class CheckUserName : IHttpHandler
7 {
8
9 public void ProcessRequest ( HttpContext context )
10 {
11 context.Response.ContentType = " text/javascript " ;
12
13 string userName = context.Request[ " un " ];
14 string result = string .Empty;
15
16 if ( string .IsNullOrEmpty ( userName ) )
17 result = " 用户名不能为空 " ;
18 else if ( userName.Length < 3 || userName.Length > 10 )
19 result = " 用户名的长度应该在 3 和 10 之间 " ;
20 else
21 result = " 合法的用户名 " ;
22
23 context.Response.Write ( " {\"message\": \" " + result + " \"} " );
24 }
25
26 public bool IsReusable
27 {
28 get
29 {
30 return false ;
31 }
32 }
33
34 }

在 ProcessRequest 方法中, 我们设置返回的类型为 text/javascript, 这样浏览器将把返回的内容作为脚本处理. 我们通过 context 的 Request 属性获取了参数 un 的值, 此 un 正是上面提到的在 ParameterEdit 中通过 Name 属性设置的值.

而在检测完用户名之后, 我们使用简单的方式返回了一段 json, 他是一个对象, 包含了一个 message 属性, 这个 message 属性又在 Button1.aspx 页面的按钮的 Success 处理函数中使用.

这样简单编写后, 就实现了按钮的 Ajax, 实际的效果就没法展示了, 如果需要观看, 可以参照下面的演示.

JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.

目前 JQueryElement 最新版本为 2.6.1, 可以在上面的地址看到新版本改动的内容, 欢迎大家留言发表好的建议.

实际过程演示: http://www.tudou.com/programs/view/Ptz07sq2KcI/ .