已经有一段时间没有写文章了, 上次为大家介绍了 jqueryui 的按钮控件, 本次将说明 JQueryElement 实现的日期框控件.
下下面是包含日期控件的 Datepicker1.aspx:
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 <script type="text/javascript" src="js/jquery.ui.datepicker-zh-CN.js"></script>
14 </head>
15 <body>
16 <form id="formDatepicker" runat="server">
17 <div>
18 <je:Datepicker ID="dateBegin" runat="server" DateFormat="yy-mm-dd"
19 DefaultDate="2011-07-12" ElementType="Input" MaxDate="2011-09-30"
20 MinDate="2010-09-30" ShowMonthAfterYear="True" ShowOtherMonths="True"
21 ShowWeek="True" IsVariable="true"></je:Datepicker>
22 <je:Datepicker ID="dateEnd" runat="server" DateFormat="yy-mm-dd"
23 DefaultDate="2011-07-12" ElementType="Input" MaxDate="2011-09-30"
24 MinDate="2010-09-30" ShowMonthAfterYear="True" ShowOtherMonths="True"
25 ShowWeek="True" IsVariable="true"></je:Datepicker>
26 <je:Button ID="cmdOK" runat="server" Label="OK">
27 <ClickAsync Url="SubDate.ashx" Success="subDateSuccess">
28 <Parameters>
29 <je:ParameterEdit Name="d1" Type="Expression" Value="dateToString([%id:dateBegin%].datepicker('getDate'))" />
30 <je:ParameterEdit Name="d2" Type="Expression" Value="dateToString([%id:dateEnd%].datepicker('getDate'))" />
31 </Parameters>
32 </ClickAsync>
33 </je:Button>
34 <p id="message"></p>
35 <je:JQueryScript ID="script" runat="server">
36 <Html>
37 <script type="text/javascript">
38 function dateToString(date) {
39 return date.getFullYear().toString() + '-' + date.getMonth().toString() + '-' + date.getDate().toString();
40 }
41 function subDateSuccess(data) {
42 $('#message').text('两个日期差了多少天? ' + data.count.toString() );
43 }
44 </script>
45 </Html>
46 </je:JQueryScript>
47 </div>
48 </form>
49 </body>
50 </html>
在页面开始处, 我们使用页面指令 Register 为页面引用了 JQueryElement 的 dll, 以及引入了 jqueryui 所需的 javascript 和 css 文件.
这些内容和上回所讲的第一个示例是类似的, 不同的是我们加入了一个日期框的语言脚本 jquery.ui.datepicker-zh-CH.js, 这个就是简体中文的脚本, 可以让日期框显示为汉语, 而默认的是英语.
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.datepicker-zh-CN.js"></script>
下面的代码表示一个日期框控件, 这里讲解其部分属性, DateFormat 表示日期的格式, yy-mm-dd 的格式就类似于 2011-11-11. DefaultDate, MaxDate, MinDate 分别表示默认选择的日期, 可选择的最大和最小日期. ElementType 选择为 Input, 则点击文本框之后出现日期框, 如果不是 Input, 则直接显示日期框. ShowMonthAfterYear 表示是否在日期框标题处将月显示在年的后面, ShowOtherMonths 表示是否在当前月份显示其它月份的某些天, ShowWeek 是否现在周是否为此年的第几周. 日期框还有其它的属性, 这里不再说明了.
IsVariable 设置为 true, 则将生成一个对应的 javascript 变量, 此变量与日期控件的 ClientID 同名, 而产生的变量可以让 javascript 中更方便获取日期框中的数据.
DefaultDate="2011-07-12" ElementType="Input" MaxDate="2011-09-30"
MinDate="2010-09-30" ShowMonthAfterYear="True" ShowOtherMonths="True"
ShowWeek="True" IsVariable="true"></je:Datepicker>
日期框的设计时视图
日期框的运行时视图
然后, 我们添加了一个按钮, 点击按钮后, 我们将两个日期框 dateBegin 和 dateEnd 中选择的日期传递为 SubDate.ashx, SubDate.ashx 计算两个日期的相差的天数并返回给页面显示. ClickAsync 属性可以设置按钮点击时的 Ajax 操作, ParameterEdit 用来说明传递给 SubDate.ashx 的参数, 可以参照上一篇文章.
在上一篇文章的示例中, 我们的 ParameterEdit 的 Type 属性设置的为 Selector, 表示 Value 中包含的是一个选择器, 而这次我们设置 Type 为 Expression, 这表示 Value 中是一个 javascript 表达式, 表达式计算的结果就是参数的值.
我们看到 Value 含义为通过 javascript 函数 dateToString 返回值, dateToString 稍后将列出, 它接收一个日期参数, 返回一个表示日期的字符串. 获取日期框日期的语句为 [%id:dateBegin%].datepicker('getDate'), [%id:dateBegin%] 并不是一个真正的 javascript 语句, 它是 JQueryElement 的内嵌语法, 在真正的客户端, 它将被替换为 ID 为 dateBegin 的服务器控件的 ClientID, 而刚才讲到了我们生成了一个与 ClientID 同名的 javascript 变量, 因此 [%id:dateBegin%] 最终就表示了这个变量, 所以我们能够对其使用 datepikcer 方法并获取日期, 至于 datepicker 的其它方法, 大家可以参考官方网站 http://jqueryui.com .
<ClickAsync Url="SubDate.ashx" Success="subDateSuccess">
<Parameters>
<je:ParameterEdit Name="d1" Type="Expression" Value="dateToString([%id:dateBegin%].datepicker('getDate'))" />
<je:ParameterEdit Name="d2" Type="Expression" Value="dateToString([%id:dateEnd%].datepicker('getDate'))" />
</Parameters>
</ClickAsync>
</je:Button>
<p id="message"></p>
下面, 我们看一下 dateToString 和 subDateSuccess 两个 javascript 函数, 它们书写在 JQueryScript 控件中, 其实也可以直接写, 但这样做可以在 javascript 中使用刚才提到的内嵌语法. 两个函数十分的简单, 这里也不做过多说明了, subDateSuccess 处理 Ajax 成功后, 将返回的 JSON 中的 count 属性显示在 id 为 message 的 p 标签中.
<Html>
<script type="text/javascript">
function dateToString(date) {
return date.getFullYear().toString() + '-' + date.getMonth().toString() + '-' + date.getDate().toString();
}
function subDateSuccess(data) {
$('#message').text('两个日期差了多少天? ' + data.count.toString() );
}
</script>
</Html>
</je:JQueryScript>
最后看下 SubDate.ashx:
using System;
using System.Web;
public class SubDate : IHttpHandler
{
public void ProcessRequest ( HttpContext context )
{
context.Response.ContentType = "text/plain";
DateTime d1 = Convert.ToDateTime ( context.Request["d1"] );
DateTime d2 = Convert.ToDateTime ( context.Request["d2"] );
context.Response.Write ( "{\"count\": " + (d2 - d1).TotalDays.ToString() + "}" );
}
public bool IsReusable
{
get
{
return false;
}
}
}
而上次我们也解释了一个类似的 ashx 文件功能, 这里就不再次说明了.
我们看到此 ashx 只是简单的获取了两个从页面传递来的参数并转化为日期, 然后计算天数差并作为 JSON 返回, 代码使用的 d1, d2, count 是和前面一一对应的.
这是一个日期框, 按钮, Ajax 的混合示例, 如果需要观看, 可以参照下面的演示.
JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.
目前 JQueryElement 最新版本为 2.6.2, 可以在上面的地址看到新版本改动的内容, 欢迎大家留言发表好的建议.