function selectControl(name,contorDiv){
this.contorDiv=contorDiv;
this.scName=name;
this.selectBoxName=name+'_selectBox' //select 弹出的div
this.valueBoxName=name+'_valueBox' //select
this.inputName=name+'_selectValue'
this.clickBoxName=name+'_clickBox'
this.signName=name+'_sign'
this.colNum=3;
this.colFontLength='10'; //10个汉字20个字符
this.clickCount; //当前选中项
this.jsonData=[
{name:'天津0',value:'天津0'},
{name:'天津1',value:'天津1'},
{name:'天津2',value:'天津2'},
{name:'天津3',value:'天津3'},
{name:'天津4',value:'天津4'},
{name:'天津5',value:'天津5'},
{name:'天津6',value:'天津6'},
{name:'天津7',value:'天津7'}]
var temp=this;
this.showDiv=function (){
$('#'+temp.selectBoxName).show();
}
this.cloDiv=function (){
$('#'+temp.selectBoxName).hide();
}
//初始化方法
this.init=function (){
$('#'+temp.contorDiv).append(temp.createStr())
$(document.body).bind('click',function (){
var eleId=event.srcElement.id;
if(eleId!=temp.selectBoxName && eleId!=temp.valueBoxName && eleId!=temp.inputName&& eleId!=temp.signName){
temp.cloDiv()
}
})
$('#'+temp.signName).bind('mouseover',function (){
$(this).css('background','url("droparrowover.gif") no-repeat right center')
window.event.cancelBubble = true;
})
$('#'+temp.signName).bind('mouseout',function (){
$(this).css('background','url("droparrow.gif") no-repeat right center')
window.event.cancelBubble = true;
})
temp.setData();
}
this.createStr=function (){
var createStr=''
createStr+="<div id='"+temp.clickBoxName+"' class='_clickBox' onclick='"+temp.scName+".showDiv()'>"
createStr+="<table cellpadding=\"0\" cellspacing=\"0\" style='background:#DDD url(selectBg.png) repeat-x left top;'>"
createStr+="<tr>"
createStr+="<td id='"+temp.valueBoxName+"' class='valueBox'><input type='text' id='"+temp.inputName+"'></td>"
createStr+="<td id='"+temp.signName+"' class='sign'> </td>"
createStr+="</tr></table></div>"
createStr+="<div id='"+temp.selectBoxName+"' style='display:block;position:absolute;z-index:10;border:1px solid;width:500;height:250;overflow-y:auto;overflow-x:hidden'></div>"
return createStr;
}
//设置数据
this.setData=function (){
var tabStr='<table width="100%" id="'+temp.scName+'_valueList" class="valueList" cellpadding="0" cellspacing="0">'
var romNum=parseFloat(temp.jsonData.length)/parseFloat(temp.colNum)
if(romNum!=parseInt(romNum)){
romNum=parseInt(romNum)+1;
}
for(var i=0;i<romNum;i++){
tabStr+='<tr id="'+temp.scName+'_s_tr_'+i+'"></tr>'
}
var count=0;
var trId,tdStr,name,value;
tabStr+='</table>'
$('#'+temp.selectBoxName).html(tabStr)
$(temp.jsonData).each(function (i){
trId=temp.scName+'_s_tr_'+count
name=temp.jsonData[i].name
value=temp.jsonData[i].value
if(temp.fontLen(name)>temp.colFontLength){
name=name.substr(0,temp.colFontLength)+'......'
}
tdStr='<td title='+temp.jsonData[i].name+' value='+i+' onclick="'+temp.scName+'.dataClick(this)">'+name+'</td>'
$('#'+trId).append(tdStr)
if((i+1)%temp.colNum==0 && i!=0){
count++;
}
});
}
this.dataClick=function(obj){
//alert($(obj).val())
var i=$(obj).val();
temp.clickCount=i;
var inputId='#'+temp.inputName
$(inputId).attr('value',temp.jsonData[i].name);
$(inputId).attr('state',temp.jsonData[i].value);
}
this.fontLen=function (value){
return value.replace(/[^\x00-\xff]/g, 'xx').length;
}
}
var select=new selectControl('select','select1');
select.init();
$('#select1 div').bgiframe();
太简单了就不写注释了
大家有空的时候踩踩 本来是不想写的想找个控件改改就好结果找不到就知道能写了
jquery 请自己添加这里不多说了
- 大小: 12.2 KB
分享到:
相关推荐
Ansel自定义手机浏览器重置下拉选择带搜索
如果初始化时,传入的是SELECT控件,则控件中的内容和使用模式将被缓存到GooCombo对象中 有三种模式可定义:basic基本,multiple可多选,filter过滤显示 当Input内容框为可写状态时,可以通过输入TEXT来直接获取要...
用DataGrid基于jQuery(实际上只用了它的按照类查找元素一个方法)写的自定义DropDownList,解决不能控制生成后的Select html控件不能控制zIndex而遮挡Div层及其他复杂样式,并且可以自动回发到服务器,没有封装成dll...
jquery鼠标点击自定义下拉框插件是一款DropDownList.js插件,提供两种方式创建自定义下拉框,可以从原生的select控件克隆一个新的自定义下拉框,也可以用JSON格式的数据。
将常用的jquery插件封装成控件也是个不错的选择。 先看看效果: 1.新建类库项目,创建数据源类 [Serializable] public class Select2Item { public bool Selected { get; set; } public string Text { get;...
目前支持5种大的校验方式,分别是:inputValidator(针对input、textarea、select控件的字符长度、值范围、选择个数的控制)、compareValidator(提供2个对象的比较,目前可以比较字符串和数值型)、ajaxValidator...
jQuery Mobile官方貌似木有类似于IOS的滚动日期选择器,这也正是Mobiscroll在做的事情。 Mobiscroll是一个基于jQuery的日期选择插件,类似于IOS的DatePicker,在iOS4、Android 2.2、Android 2.3的浏览器、Safari...
pagination:新增“layout”属性,用于自定义控件的样式布局; accordion:新增“unselect”方法、“onUnselect”事件; accordion:新增“select”和“multiple”属性; accordion:新增“getSelections”方法;...
jquery鼠标点击自定义下拉框插件是一款DropDownList.js插件,提供两种方式创建自定义下拉框,可以从原生的select控件克隆一个新的自定义下拉框,也可以用JSON格式的数据。
目前支持5种大的校验方式,分别是:inputValidator(针对input、textarea、select控件的字符长度、值范围、选择个数的控制)、compareValidator(提供2个对象的比较,目前可以比较字符串和数值型)、ajaxValidator...
jQuery formValidator表单校验插件支持的验证功能: ...选择的个数支持radio/checkbox/select三种控件 支持2个控件值的比较。目前可以比较字符串和数值型。 支持服务器端校验。 支持输入格式的校验。
打包50种实例的大型树形菜单控件JSTree(基于jQuery)下载 30.打包两款实用jquery+div横向滑动的下滑菜单代码(兼容性好)下载 31.非常帅jquery仿雅虎网超大菜单导航代码 32.分享jquery带阴影效果折叠菜单dropdown...
用DataGrid基于jQuery(实际上只用了它的按照类查找元素一个方法)写的自定义DropDownList,解决不能控制生成后的Select html控件不能控制zIndex而遮挡Div层及其他复杂样式,没有封装成dll,压缩包里是例子及所有用到...
整合图表控件(jQuery Flot 和 jQuery Sparklines)Integrated charts (jQuery Flot and jQuery Sparklines) 动态表格 (jQuery DataTables) 全功能日历 (jQuery FullCalendar) jQuery 1.10.2 jQuery UI 1.10.0 ...
整合图表控件(jQuery Flot 和 jQuery Sparklines)Integrated charts (jQuery Flot and jQuery Sparklines) 动态表格 (jQuery DataTables) 全功能日历 (jQuery FullCalendar) jQuery 1.10.2 jQuery UI 1.10.0 ...
支持jQuery所有的选择器语法,只要控件有唯一ID和type属性 支持函数和正则表达式的扩展。提供扩展库formValidatorReg.js,你可以自由的添加、修改里面的内容。 支持2种校验模式。第一种:文字提示(showword模式);...
前端项目-selectize.js,selectize是一个基于jquery的自定义<select>ui控件。用于标记、联系人列表、国家/地区选择器等。
jQuery formValidator表单校验插件 插件目前提示错误,有两种模式:showword和showalert,即文字提示和窗口提示 目前支持5种大的校验方式,分别是:InputValidator(针对input、textarea、select控件的字符...
继续发一篇关于web前端自定义控件——ComboBox(下拉框),以往我在使用下拉框控件老是为了样式丑陋而烦恼,现在分享这个控件,希望有用的同仁们可以收藏,或进行二次修改,达到你想要的效果。 分解自定义下拉框: 1....