JavaScript 图标美化的下拉框

傻笑掩饰痛l

傻笑掩饰痛l

2016-02-19 15:50

今天给大家分享的是由图老师小编精心为您推荐的JavaScript 图标美化的下拉框,喜欢的朋友可以分享一下,也算是给小编一份支持,大家都不容易啊!

服务器弱智,请自行将代码中包含全角select的部分替换为半角字符。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

 程序代码

script type="text/javascript"
var childCreate=false;
function Offset(e)
//取标签的绝对位置
{
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight-2;
while(e=e.offsetParent)
{
  t+=e.offsetTop;
  l+=e.offsetLeft;
}
return {
  top : t,
  left : l,
  width : w,
  height : h
}
}
function loadselect(obj){
//第一步:取得select所在的位置
var offset=Offset(obj);
//第二步:将真的select隐藏
obj.style.display="none";
//第三步:虚拟一个div出来代替select
var iDiv = document.createElement("div");
  iDiv.id="selectof" + obj.name;
  iDiv.style.position = "absolute";
  iDiv.style.width=offset.width + "px";
  iDiv.style.height=offset.height + "px";
  iDiv.style.top=offset.top + "px";
  iDiv.style.left=offset.left + "px";
  iDiv.style.background="url(http://www.zcool.com.cn/pic/png5/130/pixelicious_001.png) no-repeat right -6px";
  iDiv.style.border="1px solid #ccc";
  iDiv.style.fontSize="12px";
  iDiv.style.lineHeight=offset.height + "px";
  iDiv.style.textIndent="4px";
document.body.appendChild(iDiv);
//第四步:将select中默认的选项显示出来
var tValue=obj.options[obj.selectedIndex].innerHTML;
iDiv.innerHTML=tValue;
//第五步:模拟鼠标点击
iDiv.onmouseover=function(){//鼠标移到
  iDiv.style.background="url(http://www.zcool.com.cn/pic/png5/130/pixelicious_001.png) no-repeat right -6px";
}
iDiv.onmouseout=function(){//鼠标移走
  iDiv.style.background="url(http://www.zcool.com.cn/pic/png5/130/pixelicious_001.png) no-repeat right -6px";
}
iDiv.onclick=function(){//鼠标点击
  if (document.getElementById("selectchild" + obj.name)){
  //判断是否创建过div
   if (childCreate){
    //判断当前的下拉是不是打开状态,如果是打开的就关闭掉。是关闭的就打开。
    document.getElementById("selectchild" + obj.name).style.display="none";
    childCreate=false;
   }else{
    document.getElementById("selectchild" + obj.name).style.display="";
    childCreate=true;
   }
  }else{
   //初始一个div放在上一个div下边,当options的替身。
   var cDiv = document.createElement("div");
   cDiv.id="selectchild" + obj.name;
   cDiv.style.position = "absolute";
   cDiv.style.width=offset.width + "px";
   cDiv.style.height=obj.options.length *20 + "px";
   cDiv.style.top=(offset.top+offset.height+2) + "px";
   cDiv.style.left=offset.left + "px";
   cDiv.style.background="#f7f7f7";
   cDiv.style.border="1px solid silver";
   var uUl = document.createElement("ul");
   uUl.id="uUlchild" + obj.name;
   uUl.style.listStyle="none";
   uUl.style.margin="0";
   uUl.style.padding="0";
   uUl.style.fontSize="12px";
   cDiv.appendChild(uUl);
   document.body.appendChild(cDiv); 
   childCreate=true;
   for (var i=0;iobj.options.length;i++){
    //将原始的select标签中的options添加到li中
    var lLi=document.createElement("li");
    lLi.id=obj.options[i].value;
    lLi.style.textIndent="4px";
    lLi.style.height="20px";
    lLi.style.lineHeight="20px";
    lLi.innerHTML=obj.options[i].innerHTML;

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)    uUl.appendChild(lLi);
   }
   var liObj=document.getElementById("uUlchild" + obj.name).getElementsByTagName("li");
   for (var j=0;jobj.options.length;j++){
    //为li标签添加鼠标事件
    liObj[j].onmouseover=function(){
     this.style.background="gray";
     this.style.color="white";
    }
    liObj[j].onmouseout=function(){
     this.style.background="white";
     this.style.color="black";
    }
    liObj[j].onclick=function(){
     //做两件事情,一是将用户选择的保存到原始select标签中,要不做的再好看表单递交后也获取不到select的值了。
     obj.options.length=0;
     obj.options[0]=new Option(this.innerHTML,this.id);
     //同时我们把下拉的关闭掉。
     document.getElementById("selectchild" + obj.name).style.display="none";
     childCreate=false;
     iDiv.innerHTML=this.innerHTML;
    }
   }
  }
}
}
        /script
style type="text/css"
select{width:200px;height:20px;}
/style
/head
body
  h1用javascript模拟select达到美化效果/h1
form name="f"
 
   select id="province" name="province"
    option value="10"江西/option
    option value="11"福建/option
    option value="12"广东/option
    option value="13"浙江/option
    option value="13"浙江/option
    option value="13"北京/option
    option value="13"上海/option
    option value="13"浙江/option
    option value="13"浙江/option
    option value="13"浙江/option
    option value="13"浙江/option
    option value="13"浙江/option
   /select
/form
  script type="text/javascript"
   loadselect(document.f.province);
  /script
展开更多 50%)
分享

猜你喜欢

JavaScript 图标美化的下拉框

Web开发
JavaScript 图标美化的下拉框

Javascript 调用XML制作连动下拉框

Web开发
Javascript 调用XML制作连动下拉框

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

可输入的下拉框

Web开发
可输入的下拉框

动态提示的下拉框

Web开发
动态提示的下拉框

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Ajax联动下拉框的实现例子

Web开发
Ajax联动下拉框的实现例子

下拉框连动的小例子(.htm版)

ASP
下拉框连动的小例子(.htm版)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

access和SQL的区别

access和SQL的区别

玩转Win7及Windows Live 体验齐天大圣的"筋斗云"

玩转Win7及Windows Live  体验齐天大圣的"筋斗云"
下拉加载更多内容 ↓