<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css.css" />
<script type="text/javascript" src="../jquery.js"></script>
<title>无标题文档</title>
</head><body>
<script type="text/javascript">
(function($){
$.fn.dropbox = function(options){
$(this).each(function(){
// 默认参数
var defaults = {
eventType:'click',
container:'',
surebutton:'',
cancelbtn:'',
selectallbtn:'',
valct:'',
htmlct:'',
};
var s = $.extend({}, defaults, options || {}); var $this=$(this);
// 目标容器
var targetc=$(s.container);
//确定键
if(s.surebutton!=''){
var sureh=$(s.surebutton);
}
// 值容器
if(s.valct!=''){
var valct=$(s.valct);
}
if(s.htmlct!=''){
var htmlct=$(s.htmlct);
}
if(s.cancelbtn!=''){
var cancelbtn=$(s.cancelbtn);
}
if(s.selectallbtn!=''){
var selectallbtn=$(s.selectallbtn);
}
var tleft=function(){
var hleft=$this.offset().left;// 获取触发句柄的左偏移
var hwidth=$this.outerWidth(true); //获取触发句柄的宽度
var twidth=targetc.outerWidth(true); // 计算目标元素的宽度
var dwidth=$(document).width();// 当前文档的宽度
var tleft=hleft;
if( (tleft)>dwidth ){
tleft=hleft+hwidth-twidth; // 目标元素的左偏移
}
return tleft;
};
var tleft=tleft();
var ttop=function(){
var htop=$this.offset().top; // 获取触发句柄的上偏移
var hheight=$this.outerHeight(true); // 获取触发句柄的高度
var theight=targetc.outerHeight(true); // 计算目标元素的高度
var dheight=$(document).height();// 当前文档的高度
var ttop=htop+hheight;
if(ttop>dheight){
ttop=htop;
}
return ttop;
}
var ttop=ttop();
var position={
left:tleft,
top:ttop
}
var init = function(){
if( targetc.attr('display')!=='none'){
targetc.hide();
}
};
var cancel=function(){
if(cancelbtn){
cancelbtn.click(function(){
targetc.hide();
})
}
};
var selectall=function(){
if(selectallbtn){
selectallbtn.click(function(){
var $checkedl=targetc.find("input:checkbox:checked").length;
var $checkboxl=targetc.find("input:checkbox").length;
alert($checkedl+"\n"+$checkboxl);
if($checkedl!=$checkboxl){
targetc.find("input:checkbox").each(function(){ $(this).attr('checked',true);
})
}
else{
targetc.find("input:checkbox").each(function(){
$(this).attr('checked',false);
})
}
})
}
}
var surebtn=function(){
if(sureh){
sureh.click(function(){
alert(2);
if(valct){
var val="";
targetc.find("input:checkbox:checked").each(function(){
val+=$(this).val()+",";
})
valct.val(val);
}
if(htmlct){
var html="<ul class='lyui_htmlct'>";
var i=0;
targetc.find("input:checkbox:checked").each(function(){
html+="<li>"+$(this).attr("alt")+"<span alt='"+i+"'>×</span></li>";
i++;
})
html+="</ul>";
htmlct.html(html);
}
targetc.hide();
})
}
}
switch(s.eventType){
case 'click':
$this.click(function(){
if(targetc.attr('display')!=='none'){
targetc.attr({'left':position.left+'px','top':position.top+'px'});
targetc.show();
// 是否要显示确定键
surebtn();
selectall();
cancel();
}
});
default:
init(); // 初始化
}
})
}
})(jQuery);
</script>
<div class="main">
<input type="button" value="请选择" class="lyui_btn drophandle"><div id="valctdiv"></div>
<input id="valct" type="hidden" value="" />
<div class="lyui_container">
<ul>
<li><input value="1" alt="MR huang" type="checkbox" />MR huang</li>
<li><input value="2" alt="MR sui" type="checkbox" />MR sui</li>
<li><input value="3" alt="Mis huang" type="checkbox" />Mis huang</li>
<li><input value="4" alt="MR liang" type="checkbox" />MR liang</li>
<li><input value="5" alt="MR liu" type="checkbox" />MR liu</li>
</ul>
<input type="button" class="lyui_btn cancel" value="取消" />
<input type="button" class="lyui_btn selectall" value="全选" />
<input type="button" class="lyui_btn sure" value="确定">
</div>
</div>
<script type="text/javascript">
$(".drophandle").dropbox({
container:".lyui_container",
surebutton:".sure",
cancelbtn:".cancel",
selectallbtn:".selectall",
valct:"#valct",
htmlct:"#valctdiv",
});
</script>
</body>
</html>
为什么这几个函数会多次调用 surebtn();selectall();cancel();第一次写插件 望高人指点
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css.css" />
<script type="text/javascript" src="../jquery.js"></script>
<title>无标题文档</title>
</head><body>
<script type="text/javascript">
(function($){
$.fn.dropbox = function(options){
$(this).each(function(){
// 默认参数
var defaults = {
eventType:'click',
container:'',
surebutton:'',
cancelbtn:'',
selectallbtn:'',
valct:'',
htmlct:'',
};
var s = $.extend({}, defaults, options || {}); var $this=$(this);
// 目标容器
var targetc=$(s.container);
//确定键
if(s.surebutton!=''){
var sureh=$(s.surebutton);
}
// 值容器
if(s.valct!=''){
var valct=$(s.valct);
}
if(s.htmlct!=''){
var htmlct=$(s.htmlct);
}
if(s.cancelbtn!=''){
var cancelbtn=$(s.cancelbtn);
}
if(s.selectallbtn!=''){
var selectallbtn=$(s.selectallbtn);
}
var tleft=function(){
var hleft=$this.offset().left;// 获取触发句柄的左偏移
var hwidth=$this.outerWidth(true); //获取触发句柄的宽度
var twidth=targetc.outerWidth(true); // 计算目标元素的宽度
var dwidth=$(document).width();// 当前文档的宽度
var tleft=hleft;
if( (tleft)>dwidth ){
tleft=hleft+hwidth-twidth; // 目标元素的左偏移
}
return tleft;
};
var tleft=tleft();
var ttop=function(){
var htop=$this.offset().top; // 获取触发句柄的上偏移
var hheight=$this.outerHeight(true); // 获取触发句柄的高度
var theight=targetc.outerHeight(true); // 计算目标元素的高度
var dheight=$(document).height();// 当前文档的高度
var ttop=htop+hheight;
if(ttop>dheight){
ttop=htop;
}
return ttop;
}
var ttop=ttop();
var position={
left:tleft,
top:ttop
}
var init = function(){
if( targetc.attr('display')!=='none'){
targetc.hide();
}
};
var cancel=function(){
if(cancelbtn){
cancelbtn.click(function(){
targetc.hide();
})
}
};
var selectall=function(){
if(selectallbtn){
selectallbtn.click(function(){
var $checkedl=targetc.find("input:checkbox:checked").length;
var $checkboxl=targetc.find("input:checkbox").length;
alert($checkedl+"\n"+$checkboxl);
if($checkedl!=$checkboxl){
targetc.find("input:checkbox").each(function(){ $(this).attr('checked',true);
})
}
else{
targetc.find("input:checkbox").each(function(){
$(this).attr('checked',false);
})
}
})
}
}
var surebtn=function(){
if(sureh){
sureh.click(function(){
alert(2);
if(valct){
var val="";
targetc.find("input:checkbox:checked").each(function(){
val+=$(this).val()+",";
})
valct.val(val);
}
if(htmlct){
var html="<ul class='lyui_htmlct'>";
var i=0;
targetc.find("input:checkbox:checked").each(function(){
html+="<li>"+$(this).attr("alt")+"<span alt='"+i+"'>×</span></li>";
i++;
})
html+="</ul>";
htmlct.html(html);
}
targetc.hide();
})
}
}
switch(s.eventType){
case 'click':
$this.click(function(){
if(targetc.attr('display')!=='none'){
targetc.attr({'left':position.left+'px','top':position.top+'px'});
targetc.show();
// 是否要显示确定键
surebtn();
selectall();
cancel();
}
});
default:
init(); // 初始化
}
})
}
})(jQuery);
</script>
<div class="main">
<input type="button" value="请选择" class="lyui_btn drophandle"><div id="valctdiv"></div>
<input id="valct" type="hidden" value="" />
<div class="lyui_container">
<ul>
<li><input value="1" alt="MR huang" type="checkbox" />MR huang</li>
<li><input value="2" alt="MR sui" type="checkbox" />MR sui</li>
<li><input value="3" alt="Mis huang" type="checkbox" />Mis huang</li>
<li><input value="4" alt="MR liang" type="checkbox" />MR liang</li>
<li><input value="5" alt="MR liu" type="checkbox" />MR liu</li>
</ul>
<input type="button" class="lyui_btn cancel" value="取消" />
<input type="button" class="lyui_btn selectall" value="全选" />
<input type="button" class="lyui_btn sure" value="确定">
</div>
</div>
<script type="text/javascript">
$(".drophandle").dropbox({
container:".lyui_container",
surebutton:".sure",
cancelbtn:".cancel",
selectallbtn:".selectall",
valct:"#valct",
htmlct:"#valctdiv",
});
</script>
</body>
</html>
为什么这几个函数会多次调用 surebtn();selectall();cancel();第一次写插件 望高人指点
switch(s.eventType){
case 'click':
$this.click(function(){
if(targetc.attr('display')!=='none'){
targetc.attr({'left':position.left+'px','top':position.top+'px'});
targetc.show();
// 是否要显示确定键
surebtn();
selectall();
cancel();
}
});
break;
default:
init(); // 初始化
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css.css" />
<script type="text/javascript" src="../jquery.js"></script>
<title>无标题文档</title>
</head> <body>
<script type="text/javascript">
(function($){
$.fn.dropbox = function(options){
this.each(function(){
// 默认参数
var defaults = {
eventType:'click',
container:'',
surebutton:'',
cancelbtn:'',
selectallbtn:'',
valct:'',
htmlct:''
};
var s = $.extend({}, defaults, options || {}); var $this=$(this);
// 目标容器
var targetc=$(s.container);
//确定键
if(s.surebutton!=''){
var sureh=$(s.surebutton);
}
// 值容器
if(s.valct!=''){
var valct=$(s.valct);
}
if(s.htmlct!=''){
var htmlct=$(s.htmlct);
}
if(s.cancelbtn!=''){
var cancelbtn=$(s.cancelbtn);
}
if(s.selectallbtn!=''){
var selectallbtn=$(s.selectallbtn);
}
var tleft=function(){
var hleft=$this.offset().left;// 获取触发句柄的左偏移
var hwidth=$this.outerWidth(true); //获取触发句柄的宽度
var twidth=targetc.outerWidth(true); // 计算目标元素的宽度
var dwidth=$(document).width();// 当前文档的宽度
var tleft=hleft;
if( (tleft)>dwidth ){
tleft=hleft+hwidth-twidth; // 目标元素的左偏移
}
return tleft;
};
var tleft=tleft();
var ttop=function(){
var htop=$this.offset().top; // 获取触发句柄的上偏移
var hheight=$this.outerHeight(true); // 获取触发句柄的高度
var theight=targetc.outerHeight(true); // 计算目标元素的高度
var dheight=$(document).height();// 当前文档的高度
var ttop=htop+hheight;
if(ttop>dheight){
ttop=htop;
}
return ttop;
}
var ttop=ttop();
var position={
left:tleft,
top:ttop
}
var init = function(){
if( targetc.attr('display')!=='none'){
targetc.hide();
}
};
var cancel=function(){
if(cancelbtn){
cancelbtn.click(function(){
targetc.hide();
})
}
};
var selectall=function(){
if(selectallbtn){
selectallbtn.click(function(){
var $checkedl=targetc.find("input:checkbox:checked").length;
var $checkboxl=targetc.find("input:checkbox").length;
alert($checkedl+"\n"+$checkboxl);
if($checkedl!=$checkboxl){
targetc.find("input:checkbox").each(function(){ $(this).attr('checked',true);
});
}
else{
targetc.find("input:checkbox").each(function(){
$(this).attr('checked',false);
});
}
})
}
}
var surebtn=function(){
if(sureh){
sureh.click(function(){
if(valct){
var val="";
targetc.find("input:checkbox:checked").each(function(){
val+=$(this).val()+",";
})
valct.val(val);
}
if(htmlct){
var html="<ul class='lyui_htmlct'>";
var i=0;
targetc.find("input:checkbox:checked").each(function(){
html+="<li>"+$(this).attr("alt")+"<span alt='"+i+"'>×</span></li>";
i++;
})
html+="</ul>";
htmlct.html(html);
}
targetc.hide();
})
}
}
switch(s.eventType){
case 'click':
init(); // 初始化
$this.click(function(){
if(targetc.css('display')=='none'){
targetc.css({'left':position.left+'px','top':position.top+'px'});
targetc.show();
// 是否要显示确定键
surebtn();
selectall();
cancel();
}
});
break;
case 'hover':
init(); // 初始化
$this.hover(function(){
if(targetc.css('display')=='none'){
targetc.css({'left':position.left+'px','top':position.top+'px'});
targetc.show();
// 是否要显示确定键
surebtn();
selectall();
cancel();
}
});
break;
default:
init(); // 初始化
}
})
}
})(jQuery);
</script>
<div class="main">
<input type="button" value="请选择" class="lyui_btn drophandle"><div id="valctdiv"></div>
<input id="valct" type="hidden" value="" />
<div class="lyui_container">
<ul>
<li><input value="1" alt="MR huang" type="checkbox" />MR huang</li>
<li><input value="2" alt="MR sui" type="checkbox" />MR sui</li>
<li><input value="3" alt="Mis huang" type="checkbox" />Mis huang</li>
<li><input value="4" alt="MR liang" type="checkbox" />MR liang</li>
<li><input value="5" alt="MR liu" type="checkbox" />MR liu</li>
</ul>
<input type="button" class="lyui_btn cancel" value="取消" />
<input type="button" class="lyui_btn selectall" value="全选" />
<input type="button" class="lyui_btn sure" value="确定">
</div>
</div>
<script type="text/javascript">
$(".drophandle").dropbox({
eventType:"click",
container:".lyui_container",
surebutton:".sure",
cancelbtn:".cancel",
selectallbtn:".selectall",
valct:"#valct",
htmlct:"#valctdiv"
});
</script>
</body>
</html>现在的代码是 这样 还是会多次调用 surebtn();selectall();cancel();
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css.css" />
<script type="text/javascript" src="../jquery.js"></script>
<title>无标题文档</title>
</head> <body>
<script type="text/javascript">
(function($){
$.fn.dropbox = function(options){
this.each(function(){
// 默认参数
var defaults = {
eventType:'click',
container:'',
surebutton:'',
cancelbtn:'',
selectallbtn:'',
valct:'',
htmlct:''
};
var s = $.extend({}, defaults, options || {}); var $this=$(this);
// 目标容器
var targetc=$(s.container);
//确定键
if(s.surebutton!=''){
var sureh=$(s.surebutton);
}
// 值容器
if(s.valct!=''){
var valct=$(s.valct);
}
if(s.htmlct!=''){
var htmlct=$(s.htmlct);
}
if(s.cancelbtn!=''){
var cancelbtn=$(s.cancelbtn);
}
if(s.selectallbtn!=''){
var selectallbtn=$(s.selectallbtn);
}
var tleft=function(){
var hleft=$this.offset().left;// 获取触发句柄的左偏移
var hwidth=$this.outerWidth(true); //获取触发句柄的宽度
var twidth=targetc.outerWidth(true); // 计算目标元素的宽度
var dwidth=$(document).width();// 当前文档的宽度
var tleft=hleft;
if( (tleft)>dwidth ){
tleft=hleft+hwidth-twidth; // 目标元素的左偏移
}
return tleft;
};
var tleft=tleft();
var ttop=function(){
var htop=$this.offset().top; // 获取触发句柄的上偏移
var hheight=$this.outerHeight(true); // 获取触发句柄的高度
var theight=targetc.outerHeight(true); // 计算目标元素的高度
var dheight=$(document).height();// 当前文档的高度
var ttop=htop+hheight;
if(ttop>dheight){
ttop=htop;
}
return ttop;
}
var ttop=ttop();
var position={
left:tleft,
top:ttop
}
var init = function(){
if( targetc.attr('display')!=='none'){
targetc.hide();
}
};
var cancel=function(){
if(cancelbtn){
cancelbtn.click(function(){
targetc.hide();
})
}
};
var selectall=function(){
if(selectallbtn){
selectallbtn.click(function(){
var $checkedl=targetc.find("input:checkbox:checked").length;
var $checkboxl=targetc.find("input:checkbox").length;
alert($checkedl+"\n"+$checkboxl);
if($checkedl!=$checkboxl){
targetc.find("input:checkbox").each(function(){ $(this).attr('checked',true);
});
}
else{
targetc.find("input:checkbox").each(function(){
$(this).attr('checked',false);
});
}
})
}
}
var surebtn=function(){
if(sureh){
sureh.click(function(){
if(valct){
var val="";
targetc.find("input:checkbox:checked").each(function(){
val+=$(this).val()+",";
})
valct.val(val);
}
if(htmlct){
var html="<ul class='lyui_htmlct'>";
var i=0;
targetc.find("input:checkbox:checked").each(function(){
html+="<li>"+$(this).attr("alt")+"<span alt='"+i+"'>×</span></li>";
i++;
})
html+="</ul>";
htmlct.html(html);
}
targetc.hide();
})
}
}
switch(s.eventType){
case 'click':
init(); // 初始化
$this.click(function(){
if(targetc.css('display')=='none'){
targetc.css({'left':position.left+'px','top':position.top+'px'});
targetc.show();
// 是否要显示确定键
surebtn();
selectall();
cancel();
}
});
break;
case 'hover':
init(); // 初始化
$this.hover(function(){
if(targetc.css('display')=='none'){
targetc.css({'left':position.left+'px','top':position.top+'px'});
targetc.show();
// 是否要显示确定键
surebtn();
selectall();
cancel();
}
});
break;
default:
init(); // 初始化
}
})
}
})(jQuery);
</script>
<div class="main">
<input type="button" value="请选择" class="lyui_btn drophandle"><div id="valctdiv"></div>
<input id="valct" type="hidden" value="" />
<div class="lyui_container">
<ul>
<li><input value="1" alt="MR huang" type="checkbox" />MR huang</li>
<li><input value="2" alt="MR sui" type="checkbox" />MR sui</li>
<li><input value="3" alt="Mis huang" type="checkbox" />Mis huang</li>
<li><input value="4" alt="MR liang" type="checkbox" />MR liang</li>
<li><input value="5" alt="MR liu" type="checkbox" />MR liu</li>
</ul>
<input type="button" class="lyui_btn cancel" value="取消" />
<input type="button" class="lyui_btn selectall" value="全选" />
<input type="button" class="lyui_btn sure" value="确定">
</div>
</div>
<script type="text/javascript">
$(".drophandle").dropbox({
eventType:"click",
container:".lyui_container",
surebutton:".sure",
cancelbtn:".cancel",
selectallbtn:".selectall",
valct:"#valct",
htmlct:"#valctdiv"
});
</script>
</body>
</html>
多次执行后 还是会多次调用 surebtn();selectall();cancel();