zoukankan      html  css  js  c++  java
  • 用javascript模拟select达到美化效果

    用javascript美化Select

    源代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
     <meta http-equiv="Content-Language" content="zh-CN" />
     <title>用javascript美化Select</title>
     <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(/articleimg/2007/04/4687/icon_select.gif) no-repeat right 4px";
      iDiv.style.border="1px solid #3366ff";
      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(/articleimg/2007/04/4687/icon_select_focus.gif) no-repeat right 4px";
     }
     iDiv.onmouseout=function(){//鼠标移走
      iDiv.style.background="url(/articleimg/2007/04/4687/icon_select.gif) no-repeat right 4px";
     }
     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;i<obj.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;
        uUl.appendChild(lLi);
       }
       var liObj=document.getElementById("uUlchild" + obj.name).getElementsByTagName("li");
       for (var j=0;j<obj.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{200px;height:20px;}
    </style>
     </head>
     <body>
      <h1>用javascript模拟select达到美化效果</h1>
    <form name="f">
     <fieldset>
      <legend>用户注册</legend>
      <div>
       <label for="username">帐号</label>
       <input type="text" id="username" name="username" />
      </div>
      <div>
       <label for="pwd">密码</label>
       <input type="password" name="pwd" id="pwd" />
      </div>
      <div>
       <label for="province">省份</label>
       <select id="province" name="province">
        <option value="10">江西</option>
        <option value="11">福建</option>
        <option value="12">广东</option>
        <option value="13">浙江</option>
       </select>
      </div>
     </fieldset>
     <input type="submit" value="提交" name="btnSub" />
    </form>
      <script type="text/javascript">
       loadSelect(document.f.province);
      </script>
     <p>
      <a href="http://www.iwcn.net">作者博客</a>
     </p>
     </body>
    </html></font>

    效果:

    用javascript模拟select达到美化效果

    用户注册

    作者博客

  • 相关阅读:
    JavaScript中的闭包
    SQL 备忘
    SqlServer 2005 升级至SP2过程中出现"身份验证"无法通过的问题
    unable to start debugging on the web server iis does not list an application that matches the launched url
    Freebsd 编译内核
    Freebsd 6.2中关于无线网络的设定
    【Oracle】ORA01219
    【Linux】Windows到Linux的文件复制
    【Web】jar命令行生成jar包
    【Linux】CIFS挂载Windows共享
  • 原文地址:https://www.cnblogs.com/aim-at-is-the-tao-in/p/3396385.html
Copyright © 2011-2022 走看看