zarkfx 日期选择器 datepicker,让不懂程序的人也能使用js效果

2013-04-02 22:36:03 +08:00
 sdjl
之前有说过我们做的js库, 就是在html代码中通过fx属性来实现常见js功能

今天,我向大家介绍其中的“日期选择器”,你只需要在你的网页里的<head>标签中添加如下两句就可以使用fx了(如果已经加载了jQuery的话,仅需要第二行即可):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://zarkfx.com/_static/zarkfx.js"></script>

添加如上两句引用代码后,你就可以轻轻松松给你的input标签添加日期选择功能了,比如:

<!-- 默认样式 -->
<input type="text" fx="datepicker" />


<!-- 使用dot-luv样式 -->
<input type="text" fx="datepicker[style=dot-luv]" />


<!-- 使用dot-luv样式,并使用clip动画效果 -->
<input type="text" fx="datepicker[style=dot-luv;showAnim=clip;]" />


<!-- 使用dot-luv样式,并可选择年和月 -->
<input type="text" fx="datepicker[style=dot-luv;changeYear;changeMonth;]" />


您可以在此fx的页面中分别把以上代码复制到输入框中,然后点击“Try it”按钮尝试不同的效果:

http://zarkfx.com/auto_gen/datepicker.html
2714 次点击
所在节点    分享创造
5 条回复
sdjl
2013-04-02 22:43:20 +08:00
不好意思, 刚才测试的时候发现jquery-1.3.2有点bug, 暂时请把第一个js的地址改为 http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js


你也可以直接保存一下html代码, 然后用浏览器打开测试:

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://zarkfx.com/_static/zarkfx.js"></script>
</head>
<body>
<input type="text" fx="datepicker" value="" />
</body>
</html>
sdjl
2013-04-02 22:44:22 +08:00
尼玛,上一个又写错了。。。 改为 jquery-1.7.2 。。。。。

http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
airyland
2013-04-02 22:48:34 +08:00
个人建议,用HTML5的 data- 来命名属性比较规范,我会写成 data-fx
sdjl
2013-04-02 22:51:45 +08:00
@airyland 这个值可以自己改的 :)
sdjl
2013-04-03 15:04:55 +08:00
难道没有人尝试?

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/64788

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX