jquery ui datepicker使用和下载地址

TeddyWang

浏览: 518980 次
性别:
来自: 深圳

最近访客更多访客>>

meq1986

jibare

sunwf

u012391994

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery

UI jQuery JavaScript CSS ASP.net

先堆几个地址：

JQuery官方地址：http://jquery.com/
你可以在这里下载到JQuery的核心框架的最新版本，包括未压缩的和已压缩的，不压缩的话有98K，简装压缩版只有15K

Datepicker的演示地址：http://ui.jquery.com/repository/latest/demos/functional/#ui.datepicker
包括自定义格式，资源本地化等，都有相应的源代码。

Datepicker的下载地址：http://ui.jquery.com/download_builder/
包括UI系列组件的下载地址，你可以在左边选择不同版本以及是否压缩，以何种方式压缩。这个页面的好处在于，你可以完全订制自己的脚本，本例中我们只需要Datepicker，所以只下载这一个和最上面的UI Core(The core of jQuery UI, required for all interaction modules and widgets)即可，它是所有UI插件的核心，不能不下。我是把它们两个分开下载的。78K的Datepicker压缩后只有23K。

Datepicker的皮肤(CSS):http://marcgrabanski.com/pages/code/jquery-ui-datepicker
演示页面：http://marcgrabanski.com/article/jquery-ui-datepicker-themes

给个图：

OK，接下来堆代码：

页首应有

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

这个如果用vs2005/08都会自动生成

然后在head节中加入：

<link href="/js/ui.datepicker.css" rel="stylesheet" type="text/css" />

<script src="/js/jquery-1.2.6.pack.js" type="text/javascript"></script>

<script src="/js/jquery-ui-core-1.5.2.js" type="text/javascript"></script>

<script src="/js/jquery-ui-datepicker.js" type="text/javascript"></script>

<script src="/js/ui/jquery.ui.i18n.all.js" type="text/javascript"></script>

在body节中加入：

<script type="text/javascript" language="javascript">
        $(document).ready(function() {
            $("#<%=TextBox_PublishDate.ClientID %>").datepicker($.extend({}, $.datepicker.regional["zh-CN"], {
                showStatus: true,
                showOn: "both",
                buttonImage: "/images/small/calendar.gif",
                buttonImageOnly: true
            }));
        });
    </script>

最后，你应该有一个ID为TextBox_PublishDate的服务端控件。

完成效果：

在使用过程中可能会有以下问题：

1,没有加入页面载入代码：
应该在演示所提供的代码外层加上： $(document).ready(function() {...[demo code]...});
害得我调试了很久。

2,本地化的问题：
打包下载的datepicker所带的i18n的脚本文件是分开放的，每种语言一个文件，不过在页面中引用也无法使界面中文化，无奈只好研究demo页面的代码，发现它引用的只有一个i18n文件，所以下载了UI网站上的这个文件，不过文件有点大，这个解决方法等有时间再研究。
PS：演示页面中的中文化在Chrome下也无法正常显示。

3,压缩效果：
以前用其它插件时有的压缩后是不能用的，不过总体来说压缩后的效果很好。

4,官方皮肤问题：
官方的默认界面显示似乎在IE7下有点问题，建议用第三方CSS。

5,与ASP.NET验证控件冲突
如果datepicker的目标控件是ASP.NET服务端控件（如上例），那么这时如果有一个类似RequiredFieldValidator的验证控件的ControlToValidate属性也指向它的话。在使用中会产生如下问题：选择日期后，控件不消失，浏览器报：“length属性为空”的错误。

希望本文能对您有所帮助！

分享到：

jquery Ajaxupload应用 | jquery ui datepicker使用

2010-07-21 12:32
浏览 4453
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论