欢迎您访问我爱IT技术网,今天小编为你分享的javascript教程:【基于jquery的checkbox下拉框插件代码】,下面是详细的讲解!
基于jquery的checkbox下拉框插件代码
(function($){
$.showselect={
init : function(o,options){
var defaults={
bindid : null, //事件绑定在bindid上
hoverclass:null, //鼠标移到选项时样式名称
optionsbind:function(){} //下拉框绑定函数
}
var options=$.extend(defaults,options);
if(options.optionsbind!=null){//如果绑定函数不为空
this._setbind(o,options);
}
if(options.bindid!=null){
this._showcontrol(o,options);
}
},
_showcontrol:function(o,options){//控制下拉框显示
$("#"+options.bindid).toggle(function(){
$(o).next().slideDown();
},function(){
$(o).next().slideUp();
})
},
_setbind:function(o,options){//绑定数据
var optionshtml="<div style=\"z-index: 999; position: absolute;\">"
+options.optionsbind()+"</div>";
$(o).after(optionshtml);
var offset=$(o).offset();
var w=$(o).width();
$(o).next().css({top:offset.top+$(o).height()+7,left:offset.left,width:w});
if(options.hoverclass!=null){
$(o).next().find("tr").hover(function(){$(this).addClass(options.hoverclass);},
function(){$(this).removeClass(options.hoverclass);});
}
$(o).next().find("input[type=checkbox]").filter("[lang=checked]").each(function(){$(this).attr("checked","checked");});
$(o).next().find("input[type=checkbox]").click(function(){
var $ckoption=$(this).attr("checked");
if($ckoption){
$(this).attr("checked","");
}else{
$(this).attr("checked","checked");
}
});
$(o).next().find("tr").click(function(){
var $ckflag=$(this).find("input[type=checkbox]");
if($ckflag.attr("checked")){
$ckflag.attr("checked","");
$ckflag.attr("lang","");
}
else{
$ckflag.attr("checked","checked");
$ckflag.attr("lang","checked");
}
var selarray=new Array();
$(o).next().find("input[type=checkbox]").each(function(){
if($(this).attr("checked"))
selarray.push($(this).parent().next().text());
});
$(o).val(selarray.join(','));
});
$(o).next().hide();
}
}
Jselect=function(o,json){
$.showselect.init(o,json);
};
})(jQuery);
关于基于jquery的checkbox下拉框插件代码的用户互动如下:
相关问题:jQuery 多选下拉框插件
答:我看下了 这个类型的功能EasyUi 中的ComboGrid可以实现 你可以去官方看下 >>详细
相关问题:js或则jquery怎么让checkbox选中后,控制下拉框及文...
答: 文哥讨厌IE的网页 Volvo Saab Mercedes Audi /* $("option").click(function(){ $("option").attr("disabled","disabled"); });*/$(":checkbox").click(function(){ $("option").attr("disabled","disabled"); $("#textarea").attr("value",$("... >>详细
相关问题:jquery multiselect下拉列表复选框动态怎么动态添...
答:你可以在select控件的子节点上面绑定一个click的事件, var optStr =“”;//比如子节点是一个div$("#select").find("div").click(function(){ //每次单击都获取选定值的数组 并拼接成逗号分割的字符串 // 这样就不用每次都判断 选中或者取消的值是... >>详细
- 【Array】js中更短的 Array 类型转换-类型转换
- 【ExtJs】ExtJs 表单提交登陆实现代码-表单提交-
- 【addClass】javascript自定义的addClass()方法
- 【Ajax】jQuery 学习第六课 实现一个Ajax的TreeVi
- 【cookie】不要在cookie中使用特殊字符的原因分析
- 【extjs】extjs每个组件要设置唯一的ID否则会出错
- 【focus】JavaScript使用focus()设置焦点失败的解
- 【bootstrap3】基于bootstrap3和jquery的分页插件
- 【fn】开发插件的两个方法jquery.fn.extend与jque
- 【datagrid】jQuery easyui datagrid动态查询数据
- 评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
-
