基于jQuery的日期选择控件(5)


$("#BBIT-DP-TODAY").click(returntoday);//今天按钮的事件
cp.click(returnfalse);//阻止冒泡
$("#BBIT_DP_INNER tbody").click(tbhandler);//给月视图中间body添加click事件而不是给每个td添加
$("#BBIT_DP_LEFTBTN").click(prevm);//上个月
$("#BBIT_DP_RIGHTBTN").click(nextm);//下个月
$("#BBIT_DP_YMBTN").click(showym);//切换到年月视图
$("#BBIT-DP-MP").click(mpclick);//年月视图的点击事件,同样用于分发
$("#BBIT-DP-MP-PREV").click(mpprevy);//上一年
$("#BBIT-DP-MP-NEXT").click(mpnexty);//下一年
$("#BBIT-DP-MP-OKBTN").click(mpok);//ok按钮的事件
$("#BBIT-DP-MP-CANCELBTN").click(mpcancel);//cancel按钮的事件


给每一个需要点击的元素加上事件哦,这里有两个地方比较特殊,一个事月视图的点击视图,传统的做法就是给每个td都加事件,但是这个时候我的td还没有呢,但是如果在每次生成td的时候来附加事件,那么就由影响性能,所以直接给容器加了click事件,通过对事件源的判断来分发事件,另外一个年月选择视图,也是和上面一样的逻辑,那么我们
就拿月视图的点击事件来分析一下,其实每一个td生成的时候都会注册一个xdate自定义属性 ,来看一下tbhandler函数

复制代码 代码如下:


function tbhandler(e) {
var et = e.target || e.srcElement; //找到事件源
var td = getTd(et); //事件源递归往上找td
if (td == null) {
return false;
}
var $td = $(td);
.
if (!$(td).hasClass("bbit-dp-disabled")) {如果不是禁用状态
var s = $td.attr("xdate");//获取td的自定义属性日期数据
var arrs = s.split("-");
cp.data("indata", new Date(arrs[0], parseInt(arrs[1], 10) - 1, arrs[2]));
returndate();//返回日期
.
}
return false;
}


所有的日期选择时间初始化好了(一次性的),接着就要给每一个的picker添加点击事件了

复制代码 代码如下:


return $(this).each(function() {
var obj = $(this).addClass("bbit-dp-input");//给input添加样式
var picker = $(def.picker);//获取picker对象
//如果showtarget不为null这将picker注册到input的后面
//否则用户自己处理picker的位置,即picker在页面上本身就已经存在
//大家可以看看示例中1,3调用的区别
def.showtarget == null && obj.after(picker);
picker.click(function(e) {
....//省略代码
});


picker的点击事件比较长,单独拿出来讲一下我想比较好,第一个要点是现实隐藏事件的处理,第二个是窗口边缘问题的处理,还有一个就是日期范围规则的处理。

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjyzwj.html