87,917
社区成员
发帖
与我相关
我的任务
分享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);
});
...全文
请发表友善的回复…
发表回复
ddgx 2013-06-13
- 打赏
- 举报
问题出在你的下面代码的click绑定上；
$("#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;
});$("#dateconfirm").click(function () {$('#beginTime').val(datestr)});
$("#dateconfirm").click(function () {$('#endTime').val(datestr)});//绑定事件（默认事件为获取焦点）
that.bind("click",function () {
/*你的其他代码*/
$("#btn",$("#span")).one("click",function () {
var datestr = $("#t",$("#span")).val()
that.val(datestr);
$("#span").hide();
return this;
});
}) ;
qq137051908 2013-06-13
- 打赏
- 举报
(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();
that = $(this);
})
$("#dateconfirm").unbind("click").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);
Shawn0691302 2013-06-13
- 打赏
- 举报
追加两张截图，方便查看问题
