使用jquery ui的datepicker开发课程日历 - 面向对象网,web开发,jquery,学习,对象 - 面向对象技术开发

面向对象技术开发

会员投稿 投稿指南 站长资讯通告:
您的位置: 首页 > Web开发 > Jquery > 正文

使用jquery ui的datepicker开发课程日历

来源: www.bianceng.cn 阅读:

这两天在开发某商学院的网站,里面有涉及到课程的模块,客户希望在网站的首页显示一个日历, 在有课程的日期加上显眼的标识,使网站用户一眼看到日历后就能知道哪天商学院有课程以便他们安 排时间报名修读。

这个功能挺有意思的,符合本人及非常小器公司一直所坚持的“为客户创造价值”的理 念,它真正从用户的角度思考问题了,客户真正需要的、实用的东西是我最喜欢开发的产品因为我觉 得不能为客户创造价值的产品最终必定不能为自己创造价值,这个世界是讲因果的。

刚开始的时候感觉用第三方的东西挺麻烦的,一来要研究别人的接口,规范等一大堆的东西,有什 么地方满足不了要求的时候就更加麻烦了,要去读懂别人的源码再修改,还不如自己全新开发来得直 接简单,但日历这东西,说复杂不复杂,但要做得好也有一定工作量,利用google快速了解了目前几 个比较知名的轻量级日历插件的接口、提供的配置项及功能情况后,决定不重复制造轮子,在jquery ui的datepicker控件上进行开发,因为它虽然功能简单,但提供的配置项比较灵活,不需要经过大调 整就能实现想要的效果,而且自备多种UI风格,相信总有一款能很好地与网站风格相融合,呵呵。废 话不多说了,下面来看看实现的过程吧,希望能被有需要的朋友借鉴,同时欢迎各位大神提出宝贵建 议。首先看看效果:图中2013年4月30号被一个红色的圈圈住了,这是一个设计时的一个约定,日期被 圈住说明当天是有课程的,点击这个日期的时候再列出这天有哪些课程。

\

UI的风格其实就是jquery ui中的蓝色主题版本的,由于本身网站是以蓝色作为基调的,所以用蓝 色主题的UI能与网站整体融合得非常好,可能很多人印象中都觉得datepicker是用来选日期的,以前 应用它的时候都是有一个输入框,点击输入框后才弹出这个日历面板,选择一个日期后触发回调,把 选中的日期更新回到一个特定的元素当中,日期选择控件的使命就完成了,但这里,它做的却是完全 不同的事情。它就像台历一样,只负责显示日期列表及标记一些特定日子的作用,当然,它比台历更 加复杂和先进一点,因为它是根据后台的课程开课日期设置来自动在日历中做标记的。

实现的细节:

1)怎样让datepicker默认就显示在指定的地方而不是通过输入框焦点触发? 这点其实很简单,通 过查datepicker的api就可以知道datepicker初始化的时候会自动判断调用它的元素类型是什么,如果 是input,它就会等待点击触发,如果是div,它默认就会显示出来了,所以,这里,只需要在要显示 的位置放一个div,然后用jquery的选择器找到这个元素,并且在上面调用datepicker()方法就可以了 ,示例:$('.datePickerWraper').datepicker();

2)怎样让datepicker符合设计的要求?这个其实也简单,用CSS配合一下了,我的建议是不要直接 在jquery ui的样式上面改,一来影响它自身的完整及独立性,到时或许会用到它的控件,如果直接改 会导致一些意想不到的情况发生,我认为比较好的办法是在特定的页面下用自己的样式把默认的样式 覆盖掉以使控件的尺寸符合我们的预期,即方便又灵活。

3)怎样在特定的日期加上特殊的标记?这个是课程日历的关键所在。首先,当然是需要课程开课 日期的数据了,由服务端提供的课程信息数组而来,这里就不再赘述了,研究了datepicker的api,发 现它提供了一个beforeShowDay的钩子,所有的日期在渲染之前都会通过这里的,有这个机制就好办了 ,在这个钩子里添加代码,遍历课程列表,如果当前单元格的日期与课程的开课日期是同一天,就返 回一个带有三个元素的数组变量,分别代表日期是否可选,要在日期容器里额外添加的class属性及单 元格的hover事件触发时显示的内容,相当于a的title。由于每次渲染日期时都会经过这个方法处理, 所以,只要把课程列表初始化好,在用户切换月份和年份的时候都会自动处理,不需要再在切换年月 份的时候做干预,非常简便就能达到想要的效果了。

Tags:
相关文章列表: