自定义HTML中select控件
2016-03-23 17:10
513 查看
<span style="font-family: 'Hiragino Sans GB W3', 'Hiragino Sans GB', Arial, Helvetica, simsun, 宋体; font-size: 16px; line-height: 28px;">JS代码:</span>
function selectInit(tid,isIn){ if(!$("#"+tid)[0]){return false;} var dv=$("#"+tid).val(),dt=$("#"+tid+" option:eq(0)").html(),vs=[],ts=[],na=$("#"+tid).attr("name"),mHtml="",curDx=0, w=$("#"+tid).width(),h=$("#"+tid).height()-2; na=na?na:tid; $("#"+tid+" option").each(function(dx){ var cv=$(this).val(),ct=$(this).html(); mHtml+='<div> '+ct+'</div>'; vs.push(cv); ts.push(ct); if($(this).attr("selected")=="selected"||cv===dv){ dt=$(this).html(); curDx=dx; } }); var iHTML='<span style="display:inline-block;width:'+w+'px;height:'+h+'px;border:1px solid #7f9db9;padding:1px">'+ '<input type="hidden" id="'+tid+'" name="'+na+'" value="'+dv+'"><input id="'+tid+'_show" value="'+dt+'" '+(isIn?'readOnly="readOnly" style="cursor:default;':' style="')+'border:none;width:'+(w-16)+'px;height:'+(h-3)+'px;line-height:'+(h-3)+'px;float:left;padding:2px 1px 1px 1px;">'+ '<span onselectstart="return false" style="display:block;cursor:pointer;text-align:center;font-size:8px;width:'+12+'px;height:'+(h-2)+'px;border:1px solid #b8cbf6;line-height:'+(h-2)+'px;background:#b3d1fc;float:left;color:#4d6185;">V</span>'+ '</span>'; $("#"+tid).replaceWith(iHTML); $("body").append('<div style="position:absolute;left:0px;top:0px;display:none;width:'+(w+2)+'px;height:'+(ts.length*18)+'px;background:#fff;border:1px solid #7f9db9;" id="'+tid+'_select">'+mHtml+'</div>'); $("#"+tid+"_select div").css({'font-size':'13px','cursor':'pointer','line-height':'17px','text-align':'left','width':'100%','height':'17px','padding-top':'1px'}); $("#"+tid+"_select div").hover(function(){ $("#"+tid+"_select div").css({'background-color':'#ffffff'}); $(this).css({'background-color':'#2f6ac6'}); },function(){ $(this).css({'background-color':'#ffffff'}); }); $("#"+tid+"_select div").click(function(){ var cdx=$("#"+tid+"_select div").index(this); curDx=cdx; $("#"+tid).val(vs[cdx]); $("#"+tid+"_show").val(ts[cdx]); $("#"+tid+"_select").hide(); }); $("#"+tid+"_show").parent().click(function(){ //p对象为工具对象,引入地址:http://www.h928.com/js/jTools-min-encode.js var xy=p.getPos(this),cx=parseInt(xy['x']),cy=parseInt(xy['y'])+h+4; if(navigator.userAgent.indexOf("MSIE 7.0")>0){ cx-=2; cy-=2; } $("#"+tid+"_select").show(); $("#"+tid+"_select").css({'left':cx+"px",'top':cy+"px"}); $("#"+tid+"_select div:eq("+curDx+")").css({'background-color':'#2f6ac6'}); return false; }); $(document).click(function(){ $("#"+tid+"_select").hide(); }); $("#"+tid+"_select").click(function(){ return false; }); }
调用方式:
$(function(){ selectInit("selectID",true);//提供SELECT控件的ID值 }
相关文章推荐
- 如何将pdf转换成html格式
- Doctype
- HTML锚点控制,跳转页面后定位到相应位置
- 使用illuminate/html
- 解决IE下select innerHTML无效的问题
- HTML网页基本标签:
- HTML空格占位符
- HTML转义字符工具类
- HTML网页禁止鼠标操作脚本
- HTML网页之打地鼠游戏
- HTML网页之坦克大战游戏
- HTML网页之俄罗斯方块
- Html.Action用法
- html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍(转载)
- HTML标签整理
- html第五节课
- 修改innerHTML属性的问题
- 利用 html的锚点(元素a)功能实现ajax单页面应用的浏览器后退前进功能
- HTML网页版2048小游戏
- html中特殊字符的表示