开发学院网页设计 JavaScript 打造基于jQuery的日期选择控件(下) 阅读

打造基于jQuery的日期选择控件(下)

　2009-10-28 00:00:00　来源：WEB开发网　闂備線娼уΛ鎾箯閿燂拷

濠电姭鎷冮崨顓濈捕闂侀潧娲ゅú銊╁焵椤掍胶鈯曢柕鍥╁仧缁辩偤鏁撻敓锟�闂備線娼уΛ鎾箯閿燂拷　　闂備胶枪缁绘鈻嶉弴銏犳瀬闁绘劕鐏氱€氼剟姊洪崹顕呭剰闁逞屽墮缁夊綊寮婚妸褉鍋撻棃娑欏暈闁伙綀浜埀顒傛暬閸嬪﹪宕伴弽褏鏆﹂柨鐕傛嫹

核心提示： 这里有一个关键点，就是日期的html输出和事件初始化只做一次，打造基于jQuery的日期选择控件(下)(3)，因为基本上一页上同时不会打开两个，还有就是生成html中有一些特殊的自定义属性哦，也是和上面一样的逻辑，那么我们就拿月视图的点击事件来分析一下，仔细看下就会发现的，这些属性在后面的时间处

这里有一个关键点，就是日期的html输出和事件初始化只做一次，因为基本上一页上同时不会打开两个。还有就是生成html中有一些特殊的自定义属性哦，仔细看下就会发现的，这些属性在后面的时间处理中都有很大的作用。那么来看一下事件吧

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

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