您现在的位置： 网页制作教程网 >> 网页特效 >> Javascript 教程 >> 文章正文

第二步：将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(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没人选中的值给它。

iDiv.innerHTML=obj.options[obj.selectedIndex].innerHTML;
第五步：为替身添加鼠标移过样式。

    iDiv.onmouseover=function(){//鼠标移到
        iDiv.style.background="url(icon_select_focus.gif) no-repeat right 4px";
    }
    iDiv.onmouseout=function(){//鼠标移走
        iDiv.style.background="url(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.fontSiz

上一页  [1] [2] [3] [4] 下一页