my97DatePicker 自定义扩展方法(实现备忘录)

昨天在经理安排下,提出一个需求,显示出日历,并在日历上显示特殊日期,当鼠标移动至此日期时,弹出div,显示当天具体的操作信息。在网上与园子里查找一段时间,并没有准确的demo,所以无奈只有自己研究,二次开发DatePicke。

先来看下DatePicke提供的API这些我不想说了,不知道的直接上官网,或者百度、google查找。

官网给出的API中要实现备忘录效果,我们要用到三个地方

1.平面显示。

2.特殊天和特殊日期。

3.日历放大:这里说下控制calendar的大小的属性,目录:DatePicker->skin->default->datepicker.css->.WdateDiv,我们可以更改宽度,高度属于日历自适应的,如果强制改变的话,会早成页面扭曲变形的原因,所以设置基本宽度即可。

有了上面三个准备后,接下来就是重要的一步,编写自定义扩展事件,这里我也只是举例,大家可以根据例子写出自己想要的结果。

首先打开WdatePicker.js,calendar.js,这里介绍下这俩个核心库。

WdatePicker:配置文件,定义接口的地方。

calendar:主函数库,在WdatePicker中定义的方法在这里实现。

进入主题:添加自定义函数

首先我们要把两个js文件进行解压,方便查看推荐一个不错的网址:js优化工具

在WdatePicker中定义新增方法的入口,specialDateMouseOver

specialDateMouseOver:null,

现在查看firefox中某一特殊日期html

<td class="Wwday" align="center" onmouseout="this.className='Wwday'" onmouseover="this.className='WwdayOn'" onclick="day_Click(2013,4,14);">14</td>
<td class="WspecialDay" align="center" onmouseout="this.className='WspecialDay'" onmouseover="this.className='WdayOn'" onclick="day_Click(2013,4,15);">15</td>

这里可以看出在特殊日期与普通日期下,都是定义了统一的事件处理方法,当然这时候我们要对特殊日期的onmouseover事件进行重写,我们去源代码中查看定义此方法的位置,搜索关键字"WspecialDay",很快就能在js中找到此属性的位置

                G.a("<td align=center ");
                if (J) {
                    if (this.checkValid(K, "d", $)) {
                        if (this.testSpeDay(new Date(K.y, K.M - 1, K.d).getDay()) || this.testSpeDate(K)) {
                            H = "WspecialDay";
                        }
                        G.a('onclick="day_Click(' + K.y + "," + K.M + "," + K.d + ');" ');
                        G.a("onmouseover=\"this.className='" + E + "'\" ");
                        G.a("onmouseout=\"this.className='" + H + "'\" ");
                    } else {
                        H = "WinvalidDay";
                    }
                    G.a("class=" + H);
                    G.a(">" + K.d + "</td>");
                } else {
                    G.a("></td>");
                }

我们可以清楚的看到,在定义每一列<td>的事件时,是在这里生成的,废话不多说,发现这一特点后我们来做个实验,在H="WspecialDay"下添加代码

 G.a("onmouseover=\"alert(1);\"");

 保存后回到主页,手动移到特殊日期后,就能够弹出1的提示框内容。

 功能很简单,重要的是一个思路,接下来我们要对这个方法进行封装,以接口的形式对外,使开发人员自定义特殊日期的鼠标移动事件,代码如下:

WdatePicker.js 对外提供接口

 calendar.js 实现接口


重新定义

G.a("onmouseover=\"_mouseOvers(this)\"");

 

这样我们就可以自定义特殊日期的鼠标移动事件了。实现方式和my97调用其他方法的形式一样。

 WdatePicker({ specialDates: ['2013-04-15', '2013-04-19'], eCont: 'div1', _SpecialOnmouseover: function (event) { alert('111'); } })

本篇内容实质是比较简单的,有js基础的朋友相信都能看懂,重点并不是功能,而是实现的思路,我们在编程时要勇于发现与思索,彻底透析每一项,每一点,这样是代码最高的艺术,好了最后我把我做的一个扩展功能给大家看下

以上都是鼠标移到特殊日期后显示当天的特殊内容,这里非常感谢群里的水墨轩大牛的指导,让小弟我又学习到了很多知识,另外小小的做个广告,欢迎加群261882616这里欢迎,高手新手,大牛,小菜们的加入

大家共同学习共同进步,共同享受编程的快乐。

posted @ 2013-05-02 18:35  hellohello-tom  阅读(3649)  评论(12编辑  收藏  举报