漫画原创Jquery时间插件

dengjianbin 12年前
漫画原创Jquery时间插件
1、可以灵活设计响应事件(Event)
2、层显示的位置(Left,Top)
3、年月日之的连接符号
4、自由控制是否显示时间(isTime)
5、年份下列列表的开始值与结束值
Jquery插件,Jquery资源,Jquery特效,div+css

插件源代码如下
$(函数(){   美元。fn.m​​anhuaDate =功能(选项){    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})。      $(“。遮照”)表明();      $(“日历”),表明();     });      / /点击遮罩层关闭时间层    $(“。遮照”)。生活(“点击”,函数(){      $(“日历”),隐藏();      $()();    });     };  });
在线演示和下载