jquery 自定义插件的一个调用的小问题
我自己写了一个插件,(初次写,写的不好)代码如下
我调用的方法是这样的:
$('#beginTime').date();
$('#endTime').date();
就是我页面上有个开始时间文本框,和结束时间文本框。在文本框被点击(既文本框获取焦点的时候,日期插件弹出来,可以选择日期。)在选择完日期点击日期插件上的确定按钮后,beginTime文本框的日期值变了,但是endTime文本框的日期值也变了。
我尝试在插件里加入这句alert("被执行次数");被执行了两个,我感觉是 $('#beginTime').date();
$('#endTime').date();这两个调用同时被执行了。
我不知道我说的对么,只求帮忙解决这个问题。
我调用的方法是这样的:
$('#beginTime').date();
$('#endTime').date();
就是我页面上有个开始时间文本框,和结束时间文本框。在文本框被点击(既文本框获取焦点的时候,日期插件弹出来,可以选择日期。)在选择完日期点击日期插件上的确定按钮后,beginTime文本框的日期值变了,但是endTime文本框的日期值也变了。
我尝试在插件里加入这句alert("被执行次数");被执行了两个,我感觉是 $('#beginTime').date();
$('#endTime').date();这两个调用同时被执行了。
我不知道我说的对么,只求帮忙解决这个问题。
define(["jquery","lib/iscroll"],function ($,iEx) {
(function ($) {
$.fn.date = function (options) {
//插件默认选项
//alert("被执行次数");
var that = $(this);
var indexY=1,indexM=1,indexD=1;
var yearScroll=null,monthScroll=null,dayScroll=null;
$.fn.date.defaultOptions = {
beginyear:1999, //日期--年--份开始
endyear:2020, //日期--年--份结束
beginmonth:"1", //日期--月--份结束
endmonth:"12", //日期--月--份结束
beginday:"1", //日期--日--份结束
endday:"30", //日期--日--份结束
curdate:true, //打开日期是否定位到当前日期(暂时未写)
theme:null, //控件样式(暂时未写)
mode:null, //操作模式(暂时未写)
event:"click" //打开日期插件默认方式为点击后后弹出日期
}
//用户选项覆盖插件默认选项
var opts = $.extend( true, {}, $.fn.date.defaultOptions, options );
//绑定事件(默认事件为获取焦点)
that.bind(opts.event,function () {
createUL(); //动态生成控件显示的日期
init_iScrll(); //初始化iscrll
extendOptions(); //显示控件
that.blur();
yearScroll.refresh();
monthScroll.refresh();
dayScroll.refresh();
})
$("#dateconfirm").click(function () {
var datestr = $("#yearwrapper ul li:eq("+indexY+")").html()+"-"+
$("#monthwrapper ul li:eq("+indexM+")").html()+"-"+
$("#daywrapper ul li:eq("+indexD+")").html()
that.val(datestr);
$("#datePage").hide();
$("#dateshadow").hide();
return this;
});
$("#datecancle").click(function () {
$("#datePage").hide();
$("#dateshadow").hide();
});
function extendOptions(){
$("#datePage").show();
$("#dateshadow").show();
}
function init_iScrll() {
yearScroll = new iScroll("yearwrapper",{snap:"li",vScrollbar:false,
onScrollEnd:function () {
indexY = (this.y/40)*(-1)+1;
}});
monthScroll = new iScroll("monthwrapper",{snap:"li",vScrollbar:false,
onScrollEnd:function (){
indexM = (this.y/40)*(-1)+1;
}});
dayScroll = new iScroll("daywrapper",{snap:"li",vScrollbar:false,
onScrollEnd:function () {
indexD = (this.y/40)*(-1)+1;
}});
}
function createUL(){
$("#yearwrapper ul").html(createYEAR_UL());
$("#monthwrapper ul").html(createMONTH_UL());
$("#daywrapper ul").html(createDAY_UL());
}
//创建 --年-- 列表
function createYEAR_UL(){
var str="<li> </li>";
for(var i=opts.beginyear; i<=opts.endyear;i++){
str+='<li>'+i+'</li>'
}
return str+"<li> </li>";;
}
//创建 --月-- 列表
function createMONTH_UL(){
var str="<li> </li>";
for(var i=opts.beginmonth;i<=opts.endmonth;i++){
str+='<li>'+i+'</li>'
}
return str+"<li> </li>";;
}
//创建 --日-- 列表
function createDAY_UL(){
var str="<li> </li>";
for(var i=opts.beginday;i<=opts.endday;i++){
str+='<li>'+i+'</li>'
}
return str+"<li> </li>";;
}
}
})(jQuery);
});
...全文
相关推荐
jQuery自定义插件详解及实例代码
主要介绍了 jQuery自定义插件详解及实例代码的相关资料,需要的朋友可以参考下
jquery 调用浏览器打印功能
jquery 调用浏览器打印功能,引入jQuery和jqprint插件,为了处理jQuery和jqprint插件的版本不兼容问题,在引入jquery-migrate
jQuery打印插件jqprint
通过单击页面按钮,便实现页面打印的jQuery插件jqprint
jquery自定义插件命名空间问题
NULL 博文链接:https://i5land.iteye.com/blog/350151
jquery.switcher:jQuery插件; 自定义开关
jquery.switcher jQuery插件; 自定义关闭/打开 不再受支持


