这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
这篇文章主要介绍了 jQueryUI Datepicker 组件设置日期高亮的相关方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
最近在看 JQueryUI Datepicker 组件的时候想到有时候我们需要高亮某些日期,而不仅仅是当前日期和选中的日期,这是我们就需要在日历组件初始化的时候给某些日期设置成高亮,以表示这些日期和其它日期有区别,比如说可以表示这些日期有一些 meeting 或者 task。对于这种需求可以通过使用组件的 beforeShowDay(date) 函数来实现,这个函数会在 Datepicker 组件初始化的时候对于每一天都调用一次这个函数来做一些定制的功能,从而正好可以实现我们所要的需求。
下面来看怎样实现
首先下载 jquery-ui-1.11.1 包,并解压。
然后在 jquery-ui-1.11.1 目录下创建一个 calenar.html 文件用来测试。
calenar.html 的内容如下:
- <!doctype html>
- <html lang="us">
- <head>
- <meta charset="utf-8">
- <title>
- jQuery UI Example Page
- </title>
- <link href="jquery-ui.CSS" rel="stylesheet">
- <style>
- td.highlight {border: none !important;padding: 1px 0 1px 1px !important;background:
- none !important;overflow:hidden;} td.highlight a {background: #AABBCC !important;
- border: 1px #88a276 solid !important;}
- </style>
- <script src="external/jquery/jquery.js">
- </script>
- <script src="jquery-ui.js">
- </script>
- <script>
- $(function() {
- $("#datepicker").datepicker({
- inline: true,
- showButtonPanel: true,
- onSelect: function(dateText, inst) {
- alert(dateText);
- },
- beforeShowDay: function(date) {
- var dates = ['09/01/2014', '09/02/2014', '10/01/2014'];
- var tips = ['09/01/2014', '09/02/2014', '10/01/2014'];
- for (var i = 0; i < dates.length; i++) {
- if (new Date(dates[i]).toString() == date.toString()) {
- return [true, 'highlight', tips[i]];
- }
- }
- return [true, ''];
- }
- });
- });
- </script>
- </head>
- <body>
- <div id="datepicker">
- </div>
- </body>
- </html>
其中 beforeShowDay 函数定义了需要高亮的三个日期,当初始化的日期等于这个日期中的一个的时候,设置这个日期为高亮,否则返回默认值。
来源: http://www.phperz.com/article/17/0515/331212.html