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('οnclick="day_Click(' + K.y + "," + K.M + "," + K.d + ');" ');G.a("οnmοuseοver=\"this.className='" + E + "'\" ");G.a("οnmοuseοut=\"this.className='" + H + "'\" ");} else {H = "WinvalidDay";}G.a("class=" + H);G.a(">" + K.d + "</td>");} else {G.a("></td>");}

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

 G.a("οnmοuseοver=\"alert(1);\"");

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

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

WdatePicker.js 对外提供接口

calendar.js 实现接口

重新定义

G.a("οnmοuseοver=\"_mouseOvers(this)\"");

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

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

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

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

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

转载于:https://www.cnblogs.com/doNetTom/archive/2013/05/02/3022108.html

my97DatePicker 自定义扩展方法（实现备忘录）相关推荐

Unity自定义扩展方法
问题背景在使用unity开发过程中,通常会遇到一种情况,比如说给物体重新赋值坐标的问题, Transfrom tran:float pos_x=1,pos_y=1,pos_z=1;tran.posi ...
让你觉得破坏了封装性的扩展方法
扩展方法源于对扩展方法的了解是来自List<T>的Where.Order.GroupBy等方法的使用,智能感知提示这些方法都是扩展方法,于是MSDN上查阅后总结如下自定义扩展方法(将字符串 ...
jquery的扩展方法介绍
最近一直在写js,这其中也少不了一位js的主角了jQuery,下面介绍的是jQuery的一些扩展,也就是jQuery的扩展方法,jQuery的扩展方法有两种方式,一种是jQuery本身的扩展方法,另一 ...
class ts 扩展方法_JUnit 5自定义扩展
前言在org.junit.jupiter.api.extension包下,JUnit5提供了丰富的扩展接口,通过实现这些接口,我们可以定制自己的扩展并注册到JUnit中来实现功能扩展. Extens ...
EFCore3.1+编写自定义的EF.Functions扩展方法
前言本文主要是讲解EF Core3.0+ 如何实现自定义的数据库扩展函数,虽然EF.Functions 提供了很多数据库函数,但是并不全面.比如加密解密...这样的话我们就需要自己扩展这些数据库函 ...
C#拾遗系列(9):继承、接口、扩展方法、分部类、类操作、Ref and Out、可空类型...
本文内容: 继承 Equal示例结构和类属性 Ref and Out 类操作扩展方法接口可空类型分部类 1. 继承 using System; using System.Collectio ...
何时使用自定义HTTP 方法
何时使用自定义HTTP 方法问题描述您想知道使用自定义HTTP 方法的影响. 解决方案避免使用非标准的自定义HTTP 方法,因为引入新方法后,就不能依赖那些只了解标准HTTP 方法的现有软件了. ...
（转）[翻译] ASP.NET MVC Tip #1 - 使用扩展方法创建新的HTML Helper
原文地址:http://weblogs.asp.net/stephenwalther/archive/2008/06/13/asp-net-mvc-tip-1-creating-new-html-he ...
Jquery_如何扩展方法
jQuery 别名 $ 一. 类级别扩展方法(比如$.ajax(...)) 1> 单个全局方法 $.testExtend = function (){console.log("单个全 ...

my97DatePicker 自定义扩展方法（实现备忘录）

my97DatePicker 自定义扩展方法（实现备忘录）相关推荐

最新文章

热门文章