漫画原创Jquery时间插件
漫画原创Jquery时间插件
1、可以灵活设计响应事件(Event)
1、可以灵活设计响应事件(Event)
2、层显示的位置(Left,Top)
3、年月日之的连接符号
4、自由控制是否显示时间(isTime)
5、年份下列列表的开始值与结束值
插件源代码如下
$(函数(){ 美元。fn.manhuaDate =功能(选项){ VAR默认= { 事件:“点击” 左:0 顶:22 特服号:“ - ”, isTime:假的, beginY:1949 恩迪:2049 }; VAR选项= $扩展(默认选项); $(“身体”)。前置(“<div class='zhezhao'> </ DIV> <div class='calender'> <div class='calenderContent'> <div class='calenderTable'> <格类= 'getYear的'ID ='GETDATE'> <a class='preMonth' id='preMonth'>上一月</ A> <select id='year'> </ SELECT> <select id='month'> < /选择> <a class='nextMonth' id='nextMonth'>下一月</ A> </ DIV> <div class='tablebg'> <表id =“日历”篇文章中= '0'CELLSPACING =' 1“> <tr bgcolor='#D6D6D6'> <th class='weekend'>日</ TH> <TH>一</ TH> <TH>二</ TH> <TH>三</ TH> < TH>四</ TH> <TH>五</ TH> <th class='weekend noborder'>六</ TH> </ TR> <TR> <TD class='weekend2'> </ TD> <TD > </ TD> <TD> </ TD> <TD> </ TD> <TD> </ TD> <TD> </ TD> <td class='weekend2 noborder'> </ TD> </ TR> <TR> <td class='weekend2'> </ TD> <TD> </ TD> <TD> </ TD> <TD> </ TD> <TD> </ TD> <TD> </ TD> <td class='weekend2 noborder'> </ TD> </ TR> <TR> <TD class='weekend2'> </ TD> <TD> </ TD> <TD> </ TD> <TD> < / TD> <TD> </ TD> <TD> </ TD> <td class='weekend2 noborder'> </ TD> </ TR> <TR> <TD class='weekend2'> </ TD> < TD> </ TD> <TD> </ TD> <TD> </ TD> <TD> </ TD> <TD> </ TD> <td class='weekend2 noborder'> </ TD> </ TR > <TR> <td class='weekend2'> </ TD> <TD> </ TD> <TD> </ TD> <TD> </ TD> <TD> </ TD> <TD> </ TD > <td class='weekend2'> </ TD> </ TR> <TR> <TD class='weekend2'> </ TD> <TD> </ TD> <TD> </ TD> <TD> < / TD> <TD> </ TD> <TD> </ TD> <td class='weekend2'> </ TD> </ TR> </ TABLE> </ DIV> </ DIV> </ DIV> < / DIV>“); VAR $ mhInput = $(本); VAR isToday = TRUE ;/ /是否为今天界面风格默认为什么 日期=新的日期();/ /获得时间对象 VAR nowYear = date.getFullYear();/ /获得当前年份 VAR nowMonth = date.getMonth()+1 ;/ /获得当前月份 VAR今天= date.getDate();/ /获得当前天5.3 VAR nowWeek =新的日期(nowYear,nowMonth - 1,1)。getDay();/ /获得当前星期 nowLastday = getMonthNum(nowMonth,nowYear);/ /获得最后一天 / /年,月下拉框的初始化 (VAR我= options.beginY;我<= options.endY;我+){ $(“<option value='"+i+"'>”+ +“年</选项>”)appendTo($(“#年”)); } (VAR I = 1;我<= 12; I + +){ $(“<option value='"+i+"'>”+ +“月</选项>”)appendTo($(“#月”)); } ManhuaDate的(nowYear,nowMonth,nowWeek nowLastday);/ /初始化为当前日期 / /上一月绑定点击事件 $(“#preMonth”)。点击(函数(){ isToday =虚假的; 年= parseInt($(“#年”)VAL()); 一个月= parseInt($(“#月”)VAL()); 一个月=月 - 1; 如果(月<1){ 一个月= 12; 一年=年 - 1; } (nowYear ==月的&& nowMonth ==){ isToday = TRUE; } VAR周=新的日期(年,月 - 1,1)getDay(); LASTDAY = getMonthNum(月,年); ManhuaDate(年,月,周,LASTDAY); }); / /繁体下拉框的改变事件 $(“#年”)。变化(函数(){ isToday =虚假的; 年= parseInt($(本)VAL()); 一个月= parseInt($(“#月”)VAL()); (nowYear ==月的&& nowMonth ==){ isToday = TRUE; } VAR周=新的日期(年,月 - 1,1)getDay(); LASTDAY = getMonthNum(月,年); ManhuaDate(年,月,周,LASTDAY); }); / /月下拉框的改变事件 $(“#月”)。变化(函数(){ isToday =虚假的; 年= parseInt($(“#年”)VAL()); 月= parseInt($(本)VAL()); (nowYear ==月的&& nowMonth ==){ isToday = TRUE; } VAR周=新的日期(年,月 - 1,1)getDay(); LASTDAY = getMonthNum(月,年); ManhuaDate(年,月,周,LASTDAY); }); / /下一个月的点击事件 $(“#nextMonth”)。点击(函数(){ isToday =虚假的; 年= parseInt($(“#年”)VAL()); 一个月= parseInt($(“#月”)VAL()); 月= parseInt(月)+ 1; (parseInt(月)> 12){ 一个月= 1; 一年= parseInt(年)+ 1; } (nowYear ==月的&& nowMonth ==){ isToday = TRUE; } VAR周=新的日期(年,月 - 1,1)getDay(); LASTDAY = getMonthNum(月,年); ManhuaDate(年,月,周,LASTDAY); }); / /初始化日历 函数ManhuaDate(年,月,周,LASTDAY){ $(“#年”)值(年)。; $(“#月”)。值(月) 表=(“日历”); VARñ= 1; (VAR J = 0; J <一周; J +){ table.rows [1]细胞[J]。的innerHTML =“” } (VAR J =一周; J <7; J +){ 如果(N ==今天&& isToday){ table.rows [1]细胞[J]的className =“tdtoday”。; }否则{ table.rows [1]细胞[J]的className =“。; } table.rows [1]细胞[J]的innerHTML = N。; N + +; } (I = 2;我<7; I + +){ (J = 0 J <7; J + +){ 如果(> LASTDAY){ table.rows [I]。细胞[J]。的innerHTML =“” } 其他{ 如果(N ==今天&& isToday){ [我] table.rows细胞[J]的className =“tdtoday”。; }否则{ table.rows [I]细胞[J]的className =“”。 } table.rows [I]细胞[J]的innerHTML = N。; N + +; } } } } / /获得月份的天数 功能getMonthNum(月,年){ 一个月=月 - 1; LeapYear =((年%4 == 0 &&每年100%= 0)| |年%400 == 0)?真:假的; VAR monthNum; 开关(parseInt(月)){ 情况下,0: 例2: 案例4: 案例6: 案例7: 案例9: 案例11: monthNum = 31; 打破; 案例3: 案例5: 例8: 案件10: monthNum = 30; 打破; 例1: monthNum = LeapYear?29:28; } 返回monthNum; } / /每一列的悬挂事件改变当前样式 $(“#压延TD:(tdtoday)”)。悬停(函数(){ $(本)。addClass(“悬停”) },函数(){ $(本)示例对(“悬停”); }); / /点击时间列表事件 $(“#压延TD”)。点击(函数(){ VAR DV = $(本)HTML(); (DV!=“”){ VAR STR =“”; 如果(options.isTime){ VAR ND =新的日期(); STR = $(“#年”)VAL()+ options.fuhao + $(“#月”)VAL()+ options.fuhao + DV +“+ nd.getHours()”:“+ ND getMinutes()+“:”nd.getSeconds(); }否则{ STR = $(“#年”)VAL()+ options.fuhao + $(“#月”)VAL()。+ options.fuhao + DV; } $ mhInput.val(STR); $(“。遮照”),隐藏(); $(“日历”),隐藏(); } }); / /文本框绑定事件 美元mhInput.live(options.Event,功能(E){ IOF = $(本),偏移(); $(“日历”)。CSS({“左”:iof.left + options.Left,“顶”:iof.top + options.Top})。 $(“。遮照”)表明(); $(“日历”),表明(); }); / /点击遮罩层关闭时间层 $(“。遮照”)。生活(“点击”,函数(){ $(“日历”),隐藏(); $()(); }); }; });在线演示和下载
本文由用户 dengjianbin 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!