一款基于jQuery日历插件的开发过程
这个插件的设置选项，所有样式都设置成自定义，提供回调函数，方便在外部进行扩展
css设置是可变的 也就是说 日历的样式是定制的；
/*********************************2月18 bug更新***************************************/
更新返回数组年份错误
if(Number(this.formdate[5])>12){
this.formdate[5]=1;
//这里错误的将this.formdate[0]直接修改了
this.formdate[0]=this.formdate[0]+1;
}
/******顺便贴出一个调用的demo*******/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>日历插件</title>
<script src="../bsw/js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<style type="text/css">
.beforemdate,.aftermdate{ color: #999999;}
.formdate{ color: #ff9000; background: #dfdfdf;}
.ctitle td{ background: #dfdfdf;}
#calbeforbtn{ left:10px;}
</style>
<input type="text" />
<script src="jQuery.calendar.js" type="text/javascript" charset="utf-8"></script>
<script>
var btn = $('input');
btn.on('click',function(){
var a = $('body').Calendar({
formdate:new Date(2012,11,12), //开始时间 默认今天
Calendarboxclass:'Calendarbox', //日历盒模型的classname
Calendarboxtitle:'Calendarboxtitle', //日历的标题classname
Dayclass:'ctitle', //日历星期的classname
Dateclass:'Datetitle', //日历日期的classname
beforemdate:'beforemdate', //上月显示的日期class
aftermdate:'aftermdate', //下月显示的日期class
width:'400px', //宽
height:'400px', //高
titletext:"请选择日历", //标题
prevtext:"<img src = '../jiuzhuang/img/backico.png'/>", //上月按钮的text
nexttext:"下月>", //下月按钮的text
datecs:'datecs', //是否显示月份 空为不显示 传入一个class值则创建一个显示年份和月份的盒子
ecallback:function(e){ //切换产生的回调函数 有一个参数e e为切换的按钮对象
},
callback:function(d){
//返回的d 所在日期信息
console.log(d);
//绑定事件前需要先清除事件
$('.Datetitle>td').unbind('click');
$('.Datetitle>td').on('click',function(){
btn.val($(this).data('date'));
$('.Calendarbox').remove();
});
},
});
});
</script>
</body>
</html>
废话不多说，如有错误，跪求各位大神指正，感谢！！
;(function($){
//创建一个日历插件
$.fn.Calendar = function(o){
//为这个日历插件创建一个构造函数
var Calendar = function(o,obj){
this.fnin(o,obj);
};
//为日历的实例对象添加原型
Calendar.prototype = {
fnin:function(o,obj){
//$.extend()绑定选项 第一个参数对象是内部默认选项 第二个参数o是外部设置的选项
this.o=o=$.extend({
formdate:new Date(), //开始时间 默认今天 **************传入的参数月份参考java的月份 0表示1月 11表示12月*******************
Calendarboxclass:'Calendarbox', //日历盒模型的classname
Calendarboxtitle:'Calendarboxtitle', //日历的标题classname
Dayclass:'ctitle', //日历星期的classname
Dateclass:'Datetitle', //日历日期的classname
beforemdate:'beforemdate', //上月显示的日期class
aftermdate:'aftermdate', //下月显示的日期class
width:'400px', //宽
height:'400px', //高
titletext:"请选择日历", //标题
prevtext:"<上月", //上月按钮的text
nexttext:"下月>", //下月按钮的text
datecs:'datecs', //是否显示月份 空为不显示 传入一个class值则创建一个显示年份和月份的盒子
ecallback:function(e){ //切换产生的回调函数 有一个参数e e为切换的按钮对象
},
callback:function(d){ //插件回调函数 返回当前所在的年和月 以及当月一号所在的星期 上月的月份 和下月的月份
}
},o);
this.obj = $(obj);
//创建日历盒模型
this.cboxtext = "<div style=\"width:"+this.o.width+"\;height:"+this.o.height+";\" class="+this.o.Calendarboxclass+">";
this.cboxtext += "<div style=\"text-align:center;position:relative;\" class="+this.o.Calendarboxtitle+"><a style=\"position:absolute;left:0;top:0;\" id='calbeforbtn' href='javascript:;'>"+this.o.prevtext+"</a>"+this.o.titletext+"<a id='calafterbtn' style=\"position:absolute;right:0;top:0;\" href='javascript:;'>"+this.o.nexttext+"</a><div>";
this.cboxtext += "<table style=\"width:100%;\" id=\"ztfCalendar\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr align='center' class="+this.o.Dayclass+"><td>日<\/td><td>一<\/td><td>二<\/td><td>三<\/td><td>四<\/td><td>五</td><td>六<\/td></tr><\/table>";
this.cboxtext += "<\/div>";
},
//主体函数
cfnin:function(){
this.datecsarr = this.datecs();
//拿到当前定位的日期字符串
this.formdatestr = this.formdate[0]+'-'+this.formdate[1]+'-'+this.formdate[2];
//引入主体
this.obj.append(this.cboxtext);
//准备输出日期
this.boxobj=$('#ztfCalendar');
//输出tr td
this.datetext="<tr class="+this.o.Dateclass+"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>";
for(this.m;this.m<6;this.m++){this.boxobj.append(this.datetext);};
this.tdbox = $('.'+this.o.Dateclass+'>td');
//输出日期
this.cExport();
//qiehuan
this.isbtn();
if(this.o.datecs!=''){
$('.'+this.o.Calendarboxtitle).append("<span class="+this.o.datecs+">"+this.datecsarr[0]+"年"+this.datecsarr[1]+"月"+"</span>");
}
this.datecsbox = $('.'+this.o.datecs);
//返回所有的选项信息
return this;
},
//拆分日期并返回
datecs:function(){
//获取日期填入数组
this.formdate = [];
this.formdate[0] = this.o.formdate.getFullYear();
this.formdate[1] = this.o.formdate.getMonth()+1;
this.formdate[2] = this.o.formdate.getDate();
this.formdate[3] = new Date(this.formdate[0],this.formdate[1]-1,1).getDay();
this.formdate[4] = this.formdate[1]-1;
this.formdate[5] = this.formdate[1]+1;
//本月天数
this.mouthgetday = new Date(this.formdate[0],this.formdate[1],0).getDate();
//上月天数
this.mouthgetdaybef = new Date(this.formdate[0],this.formdate[4],0).getDate();
//下月天数
this.mouthgetdayaft = new Date(this.formdate[0],this.formdate[5],0).getDate();
this.i=0;
this.m=0;
this.a=0;
this.datet=0;
if(this.formdate[1]<10){this.formdate[1]='0'+parseInt(this.formdate[1]).toString();};
if(this.formdate[2]<10){this.formdate[2]='0'+parseInt(this.formdate[2]).toString();};
return this.formdate;
},
//输出日期函数
cExport:function(z){
//如果是切换状态 初始化class 设置文字标识
if(z){
this.tdbox.attr('class','');
this.datecsbox.html(this.datecsarr[0]+"年"+this.datecsarr[1]+"月");
};
//输出本月
for(this.i;this.i<this.mouthgetday;this.i++){
var datet = this.i+1;
if(datet<10){datet='0'+parseInt(datet).toString();};
if(this.formdatestr==(this.formdate[0]+'-'+this.formdate[1]+'-'+datet)){this.tdbox.eq(this.i+this.formdate[3]).addClass('formdate')};
this.tdbox.eq(this.i+this.formdate[3]).html(datet).attr('title',this.formdate[0]+'-'+this.formdate[1]+'-'+datet);
}
//输出上月
var befoyear
for(this.a=this.formdate[3]-1;this.a>=0;this.a--){
if(Number(this.formdate[4])<=0){
this.formdate[4]=12;
befoyear=this.formdate[0]-1;
}else{
befoyear=this.formdate[0];
}
if(this.formdate[4]<10){this.formdate[4]='0'+parseInt(this.formdate[4]).toString();};
this.tdbox.eq(this.a).html(this.mouthgetdaybef).addClass(this.o.beforemdate).attr('title',befoyear+'-'+this.formdate[4]+'-'+this.mouthgetdaybef);
this.mouthgetdaybef--;
}
//输出下月
var tdlen = this.tdbox.length,
aftlen = tdlen-this.mouthgetday-this.formdate[3],
startaft = this.mouthgetday+this.formdate[3];
for(this.i=0;this.i<aftlen;this.i++){
if(Number(this.formdate[5])>12){
this.formdate[5]=1;
var aftyear=this.formdate[0]+1;
}
if(this.formdate[5]<10){this.formdate[5]='0'+parseInt(this.formdate[5]).toString();};
var datet = this.i+1;
if(datet<10){datet='0'+datet.toString();};
this.tdbox.eq(this.i+startaft).html(datet).addClass(this.o.aftermdate).attr('title',aftyear+'-'+this.formdate[5]+'-'+datet).data('date',aftyear+'-'+this.formdate[5]+'-'+datet);
}
this.o.callback(this.datecsarr);
},
//切换函数
isbtn:function(){
var _this = this;
$('#calbeforbtn').on('click',function(ev){
var year = _this.o.formdate.getFullYear();
var mouth = _this.o.formdate.getMonth();
_this.o.formdate=new Date(year,mouth-1,1);
//输出日期
_this.datecsarr = _this.datecs();
_this.cExport(true);
_this.o.ecallback($(this));
ev.stopPropagation();
});
$('#calafterbtn').on('click',function(ev){
var year = _this.o.formdate.getFullYear();
var mouth = _this.o.formdate.getMonth();
_this.o.formdate=new Date(year,mouth+1,1);
//输出日期
_this.datecsarr = _this.datecs();
_this.cExport(true);
_this.o.ecallback($(this));
ev.stopPropagation();
});
},
//设置方法要返回的信息
returninfo:function(){
//返回当前所在的年和月 以及当月一号所在的星期 上月的月份 和下月的月份
return this.datecsarr;
}
};
//返回实例 以及实例选项信息
return new Calendar(o,this).cfnin();
}
})(jQuery);
/******************************************/
一款基于jQuery日历插件的开发过程的更多相关文章
- 基于jQuery日历插件制作日历
这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...
- 一款基于jQuery带事件记录的日历插件
之前我们也已经分享过不少jQuery日历插件,有些应用了CSS3的特性,外观就特别漂亮.今天要分享的这款jQuery日历插件不仅有着绚丽的外观,而且带有日期事件记录功能,点击日期即可展开事件记录窗口, ...
- 给开发者准备的 10 款最好的 jQuery 日历插件[转]
这篇文章介绍的是 10 款最棒而且又很有用的 jQuery 日历插件,允许开发者们把这些漂亮的日历插件结合到自己的网站中.这些日历插件易用性都很强,轻轻松松的就可以把漂亮的日历插件装饰到你的网站了.希 ...
- 一款基于jQuery可放大预览的图片滑块插件
今天给大家分享一款基于jQuery可放大预览的图片滑块插件.这款jQuery焦点图插件的特点是可以横向左右滑动图片,并且点击图片可以进行放大预览,唯一的缺陷是这款焦点图并不能循环切换,如果你有较好的J ...
- 30款基于 jQuery & CSS3 的加载动画和进度条插件
我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...
- 一款基于jQuery的图片分组切换焦点图插件
这是一款基于jQuery的图片切换焦点图插件,这款jQuery焦点图插件的特点是图片可以分组切换,也就是说一次可以切换多张图片,相比其他焦点图插件,它能节省更多的空间,可以向用户展示更多的图片,非常实 ...
- 一款基于jQuery的QQ表情插件
我们在QQ聊天或者发表评论.微博时,会有一个允许加入表情的功能,点击表情按钮,会弹出一系列表情小图片,选中某个表情图片即可发表的丰富的含表情的内容.今天和大家分享一款基于jQuery的QQ表情插件,您 ...
- 一款基于jQuery的分页插件
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- 10款基于jquery的web前端特效及源码下载
1.jQuery时间轴插件:jQuery Timelinr 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚 ...
随机推荐
- Azure Redis Cache
将于 2014 年 9 月 1 日停止Azure Shared Cache服务,因此你需要在该日期前迁移到 Azure Redis Cache.Azure Redis Cache包含以下两个层级的产品 ...
- 前端神器avalonJS入门（三）
本章将介绍如何使用avalon来实现前端路由功能. 我们需要用到两个avalon路由配套模块—— mmHistory.js 和 mmRouter.js .其中mmHistory是用于历史管理,它会劫持 ...
- Hadoop学习笔记—8.Combiner与自定义Combiner
一.Combiner的出现背景 1.1 回顾Map阶段五大步骤 在第四篇博文<初识MapReduce>中,我们认识了MapReduce的八大步凑,其中在Map阶段总共五个步骤,如下图所示: ...
- 你必须知道的指针基础-4.sizeof计算数组长度与strcpy的安全性问题
一.使用sizeof计算数组长度 1.1 sizeof的基本使用 如果在作用域内,变量以数组形式声明,则可以使用sizeof求数组大小,下面一段代码展示了如何使用sizeof: ,,,,,}; int ...
- Why MVC is Better？（翻译）
(本文翻译自CodeProject上的一篇关于ASP.NET MVC的文章,原文地址:http://www.codeproject.com/Articles/821275/Webforms-vs-MV ...
- JavaScript 事件管理
在设计JavaScript xxsdk的时候考虑到能让调用者参与到工作流程中来,开始用了回调函数.如下: this.foo = function(args,callbackFn) { //do som ...
- 有点担心Node.js的未来了
原创文章转载请注明出处:@协思, http://zeeman.cnblogs.com 首先本文的目的不是引发语言之争,纯属个人的一些思绪记录. 因为工作原因,用Node.js做过几个项目,基本都是涉及 ...
- C#+OpenGL+FreeType显示3D文字(2) - 用GLSL+VBO绘制文字
C#+OpenGL+FreeType显示3D文字(2) - 用GLSL+VBO绘制文字 +BIT祝威+悄悄在此留下版了个权的信息说: 上一篇得到了字形贴图及其位置字典(可导出为XML).本篇就利用此贴 ...
- SharpFileDB - a file database for small apps
SharpFileDB - a file database for small apps 本文中文版在此处. I'm not an expert of database. Please feel fr ...
- 《FaceBook效应》——读后总结
这本书讲述了facebook从如何创建.到风靡全球,并结合facebook的网络效应讲述为什么facebook可以做到社交龙头.读这本书的时候,也可以看看<社交网络>这部电影. faceb ...