select 组件 javascript 实现帝国cms - 安全、强大、稳定、灵活

帝国论坛 → 技术交流区 → 建站交流 → select 组件 javascript 实现

帝国备份王2008开源版发布	帝国CMS模板下载中心	测试：生成20万数据共用107分钟	《帝国下载系统》全面免费
站长工具 - dotool.cn	1G双线帝国空间+200M数据库=158	帝国下载系统2.5版功能建议征集	自定义系统模型使用教程

wm_chief
用户头衔：管理员

精华贴   ：21
发贴数   ：47888
经验值   ：109433
注册时间：2002-10-30

信息

搜索

好友

发送悄悄话

【开源第一波：帝国备份王2008开源版发布】 [第 1 楼]

select 组件 javascript 实现

来源： PHP下

<html>
<head>
<title>Unseal</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<script language="JavaScript" src="includes/js/prototype.js"></script>
<style>
.text {
      background: #fff;
      padding-left: 5px;
      font-size: 12px;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      line-height: 14px;
      background-color: #F8F8F8;
      border-top: 1px solid #303030;
      border-right: 1px solid #D2D2D2;
      border-bottom: 1px solid #D2D2D2;
      border-left: 1px solid #303030; color: #333;
}
.optionDiv{
      float:left;
      position: relative;
      display: inline;
      width:0px;
      height: 0px;
      cursor: default;
      margin-right:-2px;
      top: 15px;
      left: -6px;
      background:#fff;
      z-index:9999999;
}
.optionsDiv{
      left: 0px;
      position: absolute;
      top: 0px;
      visibility: hidden;
      border:1px solid #303030;
      border-top:0px;
}
</style>
</head>

<body>
<table cellpadding="10" width="100%" height="300">
<tr>
      <td width="40%" align="right"><select><option>1</option><option>1</option></select></td>
      <td width="20%">
         <div id="songlai1" style="width:150px;"></div>
      </td>
      <td width="40%"><input type="button" value="alert()" onclick="alert($F('shenme'))" /></td>
</tr>
</table>
<script>
var SelectTag = Class.create();;
SelectTag.prototype = {
      it : this,
      initialize: function(cont,name,list,selected) {
         this.bodyid = cont;
         this.__name = name;
         this.__elem = null;
         this.is = selected||this.getBodyElement().getAttribute("selected");
         this.selectDiv = null;
         this.optionsDiv = null;
         this.option = list;
         this.show = false;
         this.setSelect();
         this.setOption();
      },
      createOption: function(option,value){
         var thisoption = document.createElement("div");
         thisoption = this.optionsDiv.appendChild(thisoption);
         thisoption.setAttribute("id",this.__name+"_optionid_"+value);
         thisoption.style.backgroundColor = "#ffffff";
         thisoption.style.border  = "1px dotted #ffffff";
         thisoption.innerHTML = option;
         thisoption.name = option;
         thisoption.value = value;
         thisoption.setAttribute("it",this);
         thisoption.onmouseover = function(){
            var thisselected = $(this.it.__name+"_optionid_"+$F(this.it.__name));
            thisselected.style.backgroundColor = "#ffffff";
            thisselected.style.borderStyle = "dotted";
            thisselected.style.borderColor = "#ffffff";
            this.style.backgroundColor = "#B2B4BF";
            this.style.borderStyle = "dashed";
            this.style.borderColor = "#D4D2D9";
         }
         thisoption.onmouseout = function(){
            this.style.backgroundColor = "#ffffff";
            this.style.borderStyle = "dotted";
            this.style.borderColor = "#ffffff";
         }
         thisoption.onclick = function(){
            this.it.selectDiv.innerHTML = this.name;
            this.it.valueInp.value = this.value;
         }
      },
      setOption: function(){
         this.createOption("请选择...","");
         for(var key in this.option){
            if(typeof(eval("this.option."+key)) != 'function'){
                  this.createOption(eval("this.option."+key),key);
            }
         }
      },
      setSelect: function(){
         //select 主体
         var bodyid = this.getBodyElement();
         bodyid.className = "text";
         bodyid.style.cursor = "pointer";
         bodyid.setAttribute("it",this);
         //bodyid.attachEvent("onclick",this.showHideDiv);
         //创建选项 div
         var optionDiv = document.createElement("div");
         optionDiv = bodyid.appendChild(optionDiv);
         optionDiv.className = "optionDiv";
            var optionsDiv = document.createElement("div");
            this.optionsDiv = optionsDiv;
            optionsDiv = optionDiv.appendChild(optionsDiv);
            optionsDiv.className = "optionsDiv";
            optionsDiv.style.width = bodyid.offsetWidth+"px";
            optionsDiv.style.height = bodyid.offsetHeight+"px";
         //打开下拉箭头
         var tree = document.createElement("div");
         tree = bodyid.appendChild(tree);
         tree.style.styleFloat = "right";
         tree.style.background = "#ccc";
         tree.style.borderLeft  = "1px solid";
         this.tree = tree;
         tree.innerHTML = "∵";
         //创建显示属性 div
         var selectDiv = document.createElement("div");
         selectDiv = bodyid.appendChild(selectDiv);
         this.selectDiv = selectDiv;
         selectDiv.innerHTML = eval("this.option."+this.is)||"请选择...";
         //创建 value
         var valueInp = document.createElement("input");
         valueInp.setAttribute("type","hidden");
         valueInp.setAttribute("name",this.__name);
         valueInp.setAttribute("id",this.__name);
         valueInp.setAttribute("value",this.is||"");
         valueInp = bodyid.appendChild(valueInp);
         this.valueInp = valueInp;
         bodyid.onclick = function(){
            window.event.cancelBubble = true;
            if(this.it.show){
                  document.body.onclick = function(){try{delete window.test;}catch(e){}};
                  var thisselected = $(this.it.__name+"_optionid_"+$F(this.it.__name));
                  thisselected.style.backgroundColor = "#ffffff";
                  thisselected.style.borderStyle = "dotted";
                  thisselected.style.borderColor = "#ffffff";
                  this.it.optionsDiv.style.visibility = "hidden";
                  this.it.show = false;
            }else{
                  document.body.onclick = function(){window.test.onclick();}
                  var thisselected = $(this.it.__name+"_optionid_"+$F(this.it.__name));
                  thisselected.style.backgroundColor = "#B2B4BF";
                  thisselected.style.borderStyle = "dashed";
                  thisselected.style.borderColor = "#D4D2D9";
                  this.it.optionsDiv.style.visibility = "visible";
                  this.it.show = true;
                  window.test = this.it.getBodyElement();
            }
         }
         /*bodyid.onblur = function(){
            if(this.it.show){
                  this.it.optionsDiv.style.visibility = "hidden";
                  this.it.show = false;
            }
         }*/
      },
      getBodyElement: function () {
         if ( ! this.__elem ) {
            if ( typeof(this.bodyid) == "object" && this.bodyid.parentNode ) {
                  this.__elem = this.bodyid;
                  this.bodyid = this.__elem.id;
            } else {
                  this.__elem = $( this.bodyid );
            }
         }
         return this.__elem;
      }
}
var ss = new SelectTag("songlai1","shenme1",{a:'a',b:'b',c:'c',d:'d'},'c');
</script>
</body>
</html>

[零基础入门教程] [模板制作教程] [采集使用教程]