网站地图    收藏   

主页 > 前端 > javascript >

javascript+css实现美化select下拉菜单程序

来源:自学PHP网    时间:2014-09-19 14:47 作者: 阅读:

[导读] 本文章总结了两款javascript+css实现美化select下拉菜单的实例程序代码,有需要美化select的朋友可参考本教程。...

 代码如下 复制代码

<style type="text/css">
/* 模拟select的CSS */
.s_select_01{position:absolute;width:80px;text-align:left;cursor:default;}
.s_select_01 .ds_cont{border:1px solid #fcba87;background:#fff;height:18px;line-height:18px;}
.s_select_01 .ds_title{float:left;padding-left:3px;}
.s_select_01 .ds_button{float:right;width:14px;height:14px;margin:2px 2px 0 0;display:inline;background:url(images/v_mj_003.gif) no-repeat -400px -50px;}
.s_select_01 .ds_list{position:absolute;top:19px;left:0;background:#fff;width:100%;}
.s_select_01 .dsl_cont{border:1px solid #fcba87;}
.s_select_01 .ds_list p{line-height:16px;margin:1px;color:#000;padding-left:2px;background:#fff;}
.s_select_01 .ds_list p.selected{background:#335ea8;color:#fff;}
</style>

<script language="javascript" type="text/javascript">
<!--//--><![CDATA[//><!--
var sina={$:function(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}},isIE:navigator.appVersion.indexOf("MSIE")!=-1?true:false,addEvent:function(l,i,I){if(l.attachEvent){l.attachEvent("on"+i,I)}else{l.addEventListener(i,I,false)}},delEvent:function(l,i,I){if(l.detachEvent){l.detachEvent("on"+i,I)}else{l.removeEventListener(i,I,false)}},readCookie:function(O){var o="",l=O+"=";if(document.cookie.length>0){var i=document.cookie.indexOf(l);if(i!=-1){i+=l.length;var I=document.cookie.indexOf(";",i);if(I==-1)I=document.cookie.length;o=document.cookie.substring(i,I)}};return o},writeCookie:function(i,l,o,c){var O="",I="";if(o!=null){O=new Date((new Date).getTime()+o*3600000);O="; expires="+O.toGMTString()};if(c!=null){I=";domain="+c};document.cookie=i+"="+escape(l)+O+I},readStyle:function(I,l){if(I.style[l]){return I.style[l]}else if(I.currentStyle){return I.currentStyle[l]}else if(document.defaultView&&document.defaultView.getComputedStyle){var i=document.defaultView.getComputedStyle(I,null);return i.getPropertyValue(l)}else{return null}},absPosition:function(o,I){var l=o.offsetLeft,O=o.offsetTop,i=o.offsetParent,c="";try{while(i.id!=document.body&&i.id!=document.documentElement&&i!=I&&i!=null){c+=i.tagName+" , ";i=i.offsetParent;l+=i.offsetLeft;O+=i.offsetTop}}catch(e){};return{left:l,top:O}},cutString:function(I,o){if(typeof(I)!="string"){return null};if(!(/^[0-9]*[1-9][0-9]*$/).test(o)){return I};if(o==0){return I};var l=0,i="";for(var O=0;O<I.length;O++){if(I.charCodeAt(O)>255){l+=2}else{l++};if(l<=o-2){i+=I.charAt(O)}else{if(O==I.length-1){i+=I.charAt(O)}else{i+=".."};break}};return i}};
 
 
//模拟Select mengjia 2008.12.30
function DivSelect(O,l,I){var C=this;C.id=O;C.divId=l;C.divClassName=I;C.selectObj=sina.$(C.id);if(!C.selectObj){return};var o=C;C.status="close";C.parentObj=C.selectObj.parentNode;while(sina.readStyle(C.parentObj,"display")!="block"){if(C.parentObj.parentNode){C.parentObj=C.parentObj.parentNode}else{break}};C.parentObj.style.position="relative";C.selectObjWidth=C.selectObj.offsetWidth;C.selectObjHeight=C.selectObj.offsetHeight;C.selectPosition=sina.absPosition(C.selectObj,C.parentObj);C.selectObj.style.visibility="hidden";C.divObj=document.createElement("div");C.divObj.id=C.divId;if(C.divClassName){C.divObj.className=C.divClassName};C.parentObj.appendChild(C.divObj);C.divObj.style.width=C.selectObjWidth+"px";C.divObj.style.position="absolute";C.divObj.style.left=C.selectPosition.left+"px";C.divObj.style.top=C.selectPosition.top+"px";C.divObj.onclick=function(){o.click()};C.divObj_count=document.createElement("div");C.divObj.appendChild(C.divObj_count);C.divObj_count.className="ds_cont";C.divObj_title=document.createElement("div");C.divObj_count.appendChild(C.divObj_title);C.divObj_title.className="ds_title";C.divObj_button=document.createElement("div");C.divObj_count.appendChild(C.divObj_button);C.divObj_button.className="ds_button";C.divObj_list=document.createElement("div");C.divObj.appendChild(C.divObj_list);C.divObj_list.className="ds_list";C.divObj_list.style.display="none";C.divObj_listCont=document.createElement("div");C.divObj_list.appendChild(C.divObj_listCont);C.divObj_listCont.className="dsl_cont";C.list=[];var i;for(var c=0;c<C.selectObj.options.length;c++){i=document.createElement("p");C.list.push(i);C.divObj_listCont.appendChild(i);i.innerHTML=C.selectObj.options[c].innerHTML;if(C.selectObj.selectedIndex==c){C.divObj_title.innerHTML=i.innerHTML};i.onmouseover=function(){this.className="selected"};i.onmouseout=function(){this.className=""};i.onclick=function(){o.select(this.innerHTML)}};C.select=function(i){var l=this;for(var I=0;I<l.selectObj.options.length;I++){if(l.selectObj.options[I].innerHTML==i){l.selectObj.selectedIndex=I;if(l.selectObj.onchange){l.selectObj.onchange()};l.divObj_title.innerHTML=i;break}}};C.clickClose=function(I){var i=I.target?I.target:event.srcElement;do{if(i==o.divObj){return};if(i.tagName=="BODY"){break};i=i.parentNode}while(i.parentNode);o.close()};C.open=function(){var i=this;i.divObj_list.style.display="block";i.status="open";sina.addEvent(document,"click",i.clickClose)};C.close=function(){var i=this;i.divObj_list.style.display="none";i.status="close";sina.delEvent(document,"click",i.clickClose)};C.click=function(){var i=this;if(i.status=="open"){i.close()}else{i.open()}}};
 
var s_select_01 = new DivSelect("searchType","s_select_01","s_select_01"); //参数:(select对象 ID,div结构ID,className)
//--><!]]>
</script>

测试

<form id="form1" name="form1" method="post" action="">
    <select size="1" name="type" id="searchType">
 <option value="video">视频描述</option>
 <option value="user">上传作者</option>
 <option value="tag">视频标签</option>
 <option value="topic">相关专辑</option>
    </select>
</form>


再看一个实例

 代码如下 复制代码

<!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=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>用javascript美化Select</title>
<style type="text/css">
* { margin:0; padding:0; }
body { margin:50px; }
.iDiv {
 position:absolute;
 height:19px;
 font-size:12px;
 color:#333;
 line-height:19px;
 text-indent:4px;
 vertical-align:middle;
 border:1px solid #7f9db9;
 cursor:default;
 cursor:pointer;
 background:url(http://pet.runsky.com/img/select_bg.gif) no-repeat 100% 0;
}
.iDiv_over { color:#f96; background-position:100% -25px; }
.iDiv_out { color:#333; background-position:100% 0; }
.cDiv {
 position:absolute;
 moz-user-select:none;
 border:1px solid #7f9db9;
 cursor:default;
 background:#fff;
 overflow:auto;
 z-index:1;
}
.cDiv ul {
 font-size:12px;
 color:#878787;
 listStyle:none;
 margin:0;
 padding:0;
}
.cDiv ul li {
 height:24px;
 line-height:24px;
 text-indent:4px;
}
</style>
<script type="text/javascript">
// JavaScript Document
function $() {
 return document.getElementById(arguments[0]);
}
//取得外部class的属性值
function getCurrentStyle(o) {
 return o.currentStyle||document.defaultView.getComputedStyle(o,null);
}
var SetAllSelects = {
 Offset:function(e) {
  var t = e.offsetTop;
  var l = e.offsetLeft;
  var w = e.offsetWidth;
  var h = e.offsetHeight;
  while(e = e.offsetParent) { t += e.offsetTop; l += e.offsetLeft; }
  return {top:t, left:l, width:w, height:h};
 },
 setCreated:function(obj,status) { //设置属性
  obj.setAttribute("childCreated",status);
 },
 getCreated:function(obj) { //获取属性
  var status = obj.getAttribute("childCreated");
  if(status == null) { status = ""; }
  return status;
 },
 setSelectStyle:function(obj,idnum,showHeight) {
  if(obj.id == null || obj.id == "") { obj.id = "selectID_"+idnum; }
  var offset = this.Offset(obj);
  obj.style.visibility = "hidden";
  var mainDiv = document.createElement("div");
  var iDiv = document.createElement("div");
  var js_select_;
  var _this = this;
  iDiv.className = "iDiv";
  iDiv.id = js_select_+obj.id;
  iDiv.style.width = offset.width + "px";
  iDiv.style.top = offset.top + "px";
  iDiv.style.left = offset.left + "px";
  this.setCreated(iDiv,"");
  mainDiv.appendChild(iDiv);
  var tValue = obj.options[obj.selectedIndex].innerHTML;
  iDiv.innerHTML = tValue;
  iDiv.onmouseover = function() { iDiv.className = "iDiv iDiv_over"; }
  iDiv.onmouseout = function() { iDiv.className = "iDiv iDiv_out"; }
  iDiv.onclick = function() {
   var created = _this.getCreated(this);
   if (created != "") {
    if (created == "open") {
     this.nextSibling.style.display = "none";
     _this.setCreated(this,"close");
    }
    else {
     _this.setCreated(this,"open");
     var arrLiObj = this.nextSibling.getElementsByTagName("li");
     var selOjbIndex = 0;
     for(var i=0;i<arrLiObj.length;i++) {
      var status = arrLiObj[i].getAttribute("liSelected");
      if(status == null) { status = ""; }
      if(status == "selected") { selOjbIndex = i; break; }
     }
     arrLiObj[selOjbIndex].style.background = "#fff";
     arrLiObj[selOjbIndex].style.color = "#878787";
     this.nextSibling.style.display = "block";
    }
   }
   else {
    _this.setCreated(this,"open");
    var cDiv = document.createElement("div");
    cDiv.className = "cDiv";
    cDiv.style.width = offset.width + "px";
    cDiv.style.height = obj.options.length * 19 + "px";
    if(parseInt(cDiv.style.height)>showHeight) {
     cDiv.style.height = showHeight + "px";
    }
    cDiv.style.top = (offset.top+parseInt(getCurrentStyle(this).height)+1) + "px";
    cDiv.style.left = offset.left + "px";
    cDiv.onselectstart = function() {return false;};
    var uUl = document.createElement("ul");
    cDiv.appendChild(uUl);
    mainDiv.appendChild(cDiv);
    for (var i=0;i<obj.options.length;i++) {
     var lLi = document.createElement("li");
     lLi.id = obj.options[i].value;
     lLi.innerHTML = obj.options[i].innerHTML;
     lLi.sValue = obj.options[i].value;
     uUl.appendChild(lLi);
    }
    var liObj = uUl.getElementsByTagName("li");
    if(liObj.length>0) {
     for (var j=0;j<obj.options.length;j++) {
      liObj[j].onmouseover = function() {
       var arrLiObj = this.parentNode.getElementsByTagName("li");
       for(var i=0;i<arrLiObj.length;i++) {
        var status = "";
        var _background = "#ccc";
        var _color = "#000";
        if(arrLiObj[i] != this) {
         _background = "#fff";
         _color = "#878787";
         status = "selected";
        }
        arrLiObj[i].style.background = _background;
        arrLiObj[i].style.color = _color;
        arrLiObj[i].setAttribute("liSelected",status);
       }
      }
      liObj[j].onclick = function() {
       obj.options.length = 0;
       obj.options[0] = new Option(this.innerHTML,this.sValue);
       this.parentNode.parentNode.style.display = "none";
       _this.setCreated(this.parentNode.parentNode.previousSibling,"close");
       iDiv.innerHTML = this.innerHTML;
      };
      liObj[0].style.background = "#ccc";
      liObj[0].style.color = "#000";
      liObj[0].setAttribute("liSelected","selected");
     }
    }
   }
  }
  document.body.appendChild(mainDiv);
 },
 setAllSelectStyle:function() {
  var s = document.getElementsByTagName("select");
  for (var i=0; i<s.length; i++) {
   if(s[i].className == "select") {
    this.setSelectStyle(s[i],i,200);
   }
  }
 }
}
document.onclick = function(e) {
 e = e || window.event;
 var target = e.target || event.srcElement;
 var s = document.getElementsByTagName("select");
 var js_select_;
 for (var i=0; i<s.length; i++) {
  if(s[i].className == "select") {
   var objdivtmp = $(js_select_+s[i].id);
   var created = SetAllSelects.getCreated(objdivtmp);
   if (created == "open") {
    if(target != objdivtmp) {
     objdivtmp.nextSibling.style.display = "none";
     SetAllSelects.setCreated(objdivtmp,"close");
    }
   }
  }
 }
}
window.onload = function() {
 SetAllSelects.setAllSelectStyle();
}
function getValue() {
 var kk = document.getElementsByTagName('select')[0];
 return kk.options[kk.selectedIndex].value;
}
function getTxt() {
 var kk = document.getElementsByTagName('select')[0];
 return kk.options[kk.selectedIndex].innerHTML;
}
</script>
</head>
<body style=" text-align:center">
<div style=" width:900px;  height:20px; background:#f00;">
 <div style=" width:100px; float:right; background:#fff;">
 <select class="select">
        <option value="3_1">选择</option>
        <option value="3_2">选择3_22_22_22_2</option>
        <option value="3_3">选择3_22_22_22_3</option>
        <option value="3_4">选择3_22_22_22_4</option>
        <option value="3_5">选择3_22_22_22_5</option>
        <option value="3_6">选择3_22_22_22_6</option>
        <option value="3_7">选择3_22_22_22_7</option>
        <option value="3_8">选择3_22_22_22_8</option>
        <option value="3_9">选择3_22_22_22_9</option>
        <option value="3_10">选择3_22_22_22_10</option>
        <option value="3_11">选择3_22_22_22_11</option>
        <option value="3_12">选择3_22_22_22_12</option>
        <option value="3_13">选择3_22_22_22_13</option>
        <option value="3_14">选择3_22_22_22_14</option>
        <option value="3_15">选择3_22_22_22_15</option>
        <option value="3_16">选择3_22_22_22_16</option>
   </select>
 </div>
</div>
</body>
</html>

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论