自制 checkbox下拉框插件(JQuery版)
来源:互联网 发布:tensorflow 优化算法 编辑:程序博客网 时间:2024/05/24 06:15
option_check.js代码 :
/*****************************************
调用方法为:
Jselect($("#inputid"),{
bindid:'bindid',
hoverclass:'hoverclass',
optionsbind:function(){return hqhtml();}
});
inputid为下拉框要绑定的文本框id
bindid为点击弹出/收回下拉框的控件id
hoverclass为鼠标移到选项时的样式
hqhtml为绑定的数据
******************************************/
(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);
html代码:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="option_check.js"></script>
<style type="text/css">
.hover
{
background-color: Blue;
color: White;
}
</style>
<script type="text/javascript">
$(function(){
Jselect($("#txt_wbk"),{
bindid:'txt_wbk', //可绑定到按钮上,此处为点击文本框显示下拉框
hoverclass:'hover',
optionsbind:function(){return hqhtml();}
});
})
function hqhtml(){//此处可在数据库中取值后拼接html,注意:预选项加上 lang='checked'属性
var optionshtml="<table style='width:100%; background-color: Red' cellpadding=/"0/" cellspacing=/"0/" >“
+”<tr><td style='width:20px'><input type=/"checkbox/" value='1' /></td><td>第一项</td></tr>"
+"<tr><td><input type=/"checkbox/" value='2' lang='checked'/></td><td>第二项</td></tr>"
+"<tr><td><input type=/"checkbox/" value='3' /></td><td>第三项</td></tr>"
+"<tr><td><input type=/"checkbox/" value='4' /></td><td>第四项</td></tr></table>";
return optionshtml;
}
</script>
<div>
<input id="txt_wbk" type="text" style="width: 200px;" />下拉框测试
</div>
- 自制 checkbox下拉框插件(JQuery版)
- 发布自制的操作下拉列表框(SELECT)的三个jquery插件(ajax填充、联动、增加选项)
- 发布自制的操作下拉列表框(SELECT)的三个jquery插件(ajax填充、联动、增加选项)
- 自制的操作下拉列表框(SELECT)的三个jquery插件(ajax填充、联动、增加选项)
- 自制jquery插件
- 联动下拉框 jquery 插件(二)
- 联动下拉框 jquery 插件(一)
- 联动下拉框 jquery插件(三)
- jquery插件 autoComboBox 下拉框-
- jquery 自制广告轮播小插件
- jQuery 插件之Checkbox
- AjAx下拉列表框(SELECT)jquery插件
- AjAx下拉列表框(SELECT)jquery插件
- jquery.select.js (下拉框插件)不支持IE6 的 方法 (小心用JQuery 插件)
- jQuery 下拉列表操作 select 复选框 checkbox 单选框 radio
- JS,Jquery获取,dropdownlist,checkbox 下拉列表框的值
- Jquery获取select,dropdownlist,checkbox下拉列表框的值
- jQuery 下拉列表操作 select 复选框 checkbox 单选框 radio
- js 操作frameset frame 对象
- 你为什么不快乐?(转哈佛大学的幸福课)节选
- 在 IBM Lotus Domino Designer 中使用 Java 构建应用程序
- 怎样使用eclipse来开发android源码
- 利用ReadyFor4G成功在Vista和windows 7下成功使用4G内存
- 自制 checkbox下拉框插件(JQuery版)
- [转]Android事件处理
- js几个实用例子
- 新注册的号
- Effective C# 中文版 改善C#程序的50种方法 --摘录
- Unicode详解(UTF-8,UTF16,UCS)
- 贝索斯:惟善选择者生存
- 国学大师翟鸿燊的道与术
- 浅谈Activity几种不同的启动方式