一款基于jQuery日历插件的开发过程

 

 这个插件的设置选项,所有样式都设置成自定义,提供回调函数,方便在外部进行扩展

 css设置是可变的  也就是说  日历的样式是定制的;

 废话不多说,如有错误,跪求各位大神指正,感谢!!

;(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;
                                    this.formdate[0]=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‘,this.formdate[0]+‘-‘+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);

/******************************************/

时间: 2024-11-08 21:06:38

一款基于jQuery日历插件的开发过程的相关文章

基于jQuery幻灯片插件Slippry

分享一款基于jQuery幻灯片插件Slippry是一款基于Slippry.js插件实现的图片切换特效代码.效果图如下 : 在线预览   源码下载 实现的代码. html代码: <div class="htmleaf-content"> <ul id="thumbnails"> <li> <a href="#slide1"> <img src="img/image-1.jpg"

基于jQuery日期插件jalendar2

分享一款基于jQuery日期插件jalendar2.这是一款基于jalendar插件实现的日期时间选择代码.效果图如下: 在线预览   源码下载 html代码: <div id="yourId" class="jalendar"> <div class="added-event" data-date="19-11-2015" data-title="WWDC 13 on San Francisco,

基于jQuery幻灯片插件SkitterSlideshow

分享一款基于jQuery幻灯片插件SkitterSlideshow是一款支持38种不同的幻灯片过渡动画效果,以及两种不同类型的导航按钮,并且它提供了大量的配置参数用于控制幻灯片的显示.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="htmleaf-container"> <div id="page"> <div id="content"> <div class=

一款基于jQuery带事件记录的日历插件

之前我们也已经分享过不少jQuery日历插件,有些应用了CSS3的特性,外观就特别漂亮.今天要分享的这款jQuery日历插件不仅有着绚丽的外观,而且带有日期事件记录功能,点击日期即可展开事件记录窗口,你可以设置事件的描述以及提醒的时间,是一款相对实用的jQuery日历插件. 在线预览   源码下载 接下来我们一起来看看实现这款jQuery带事件记录功能的日历插件的实现过程及源码,代码主要由HTML.CSS和jQuery组成. HTML代码: <div id="myId" clas

推荐20款基于 jQuery &amp; CSS 的文本效果插件

jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQuery 插件. 所以今天我们将展示一些很酷的文本效果插件,将帮助你为你的 Web 页面创建一些很酷的和动态的东西.这里是20个基于 jQuery & CSS 的文本效果插件. 您可能感兴趣的相关文章 12款经典的白富美型 jQuery 图片轮播插件 让网站动起来!12款优秀的 jQuery 动画插件

一款基于jQuery的图片分组切换焦点图插件

这是一款基于jQuery的图片切换焦点图插件,这款jQuery焦点图插件的特点是图片可以分组切换,也就是说一次可以切换多张图片,相比其他焦点图插件,它能节省更多的空间,可以向用户展示更多的图片,非常实用. 在线预览   源码下载 实现的代码. html代码: <div class="device"> <h2> <a href="javascript:;" class="pre">上一组</a><

一款基于jQuery可放大预览的图片滑块插件

今天给大家分享一款基于jQuery可放大预览的图片滑块插件.这款jQuery焦点图插件的特点是可以横向左右滑动图片,并且点击图片可以进行放大预览,唯一的缺陷是这款焦点图并不能循环切换,如果你有较好的JavaScript功底,可以自己修改代码来实现这一功能.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="slider"> <div class="spic"> <img src="images

10款基于jQuery的图片滑块焦点图插件

1.Material UI – Material Design CSS 框架 Material Design 是谷歌推出的全新的设计理念,采用大胆的色彩.流畅的动画播放,以及卡片式的简洁设计.Material Design 风格的设计拥有干净的排版和简单的布局,容易理解,内容才是焦点.Material UI 是一个 CSS 框架和一组实现谷歌 Material Design 设计规范的 React 组件.可以作为 NPM 安装包,使用 browserify 和 reactify 的依赖管理和 J

一款基于jQuery的分页插件

特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/mao2080/ 1.效果示例 2.代码样式 /* * 基于jquery 分页插件 * by [email protected] */ $(function (){ window.pageUtil = { /** * 构建分页 * @param {Object} divId 要绑定的容器 * @pa