/*
文件说明
由于select 不会被挡住 在做菜单的时候会影响效果 本程序通过div模拟select 定义的时候参考下例
<span id="CUL" value="" onchange="alert(this.options[this.selectedIndex][2])" style="display:inline;width:130" height=20 text=""
options="[
['平台进口报关单','43','aaaa'],
['平台出口报关单','44','bbbb'],
['平台进口报关清单','45','ccccc'],
['平台出口报关清单','46','ddddd'],
['h883同步报关单','']
]"></span>
定义时的有用属性列表
style.width 宽度 如果定义了宽度 转化后的select将采用这个宽度 不定义宽度90
height 高度 如果不定义select将根据options的数量自动增长
options select内容 转化后将变成数组 可以通过 <obj>.options[<下标一>][<下标二>]访问，如<obj>.options[3][2]
onChange 或者 onchange 选择后执行这段代码 如果没有就不执行
转化后新增属性
value 选择后的value
text 选择后显示出来的内容
selectedIndex 第几项被选中了 从0开始 默认为0
其它
转化请调用函数ChangeToSelect 例如 ChangeToSelect(CUL);
在样式表里清定义如下样式
.selectDiv { border: 2px solid inset buttonface;}
.optionDiv { border:1px solid black;border-top:0px;position:absolute;visibility:hidden;}
.optionDiv div { font-size:11px;font-family:Tahoma;padding-left:8px;line-height:130%;cursor:default;width:100%;}
.defaultSelect { font-size:11px;font-family:Tahoma;text-align:center;border:1px solid white;cursor:default;width:77px;}
.defaultSelect2 { font-size:11px;font-family:Tahoma;text-align:center;border:1px solid white;cursor:default;}
.arrow { font-family:webdings;line-height:13px;border:2px outset buttonhighlight;background-color:#cccccc;width:15px;text-align:center;cursor:default;font-size:8px;}
开发者 李世尧 对 蓝色理性 http://www.blueidea.com/tech/web/2003/1327.asp 内容进行修改得到该文件
*/
function ChangeToSelect(obj){
var selectDiv = document.createElement("table");
obj.selectDiv=selectDiv;
obj.options=eval(obj.options);
selectDiv.style.width=obj.style.width;
var selectDivTR = selectDiv.insertRow();
obj.selectDivTR=selectDivTR;
var defaultValueTD = selectDivTR.insertCell();
obj.defaultValueTD=defaultValueTD;
var arrow = selectDivTR.insertCell();
arrow.style.color='black';
//arrow.width="17px";
obj.arrow=arrow;
with(obj.selectDiv)cellSpacing=0,cellPadding=0,border=0,className="selectDiv";
if (parseInt(obj.style.width+'')-parseInt(obj.style.width+'')==0)
with(obj.defaultValueTD)innerText = obj.options[0][0],className="defaultSelect2";
else
with(obj.defaultValueTD)innerText = obj.options[0][0],className="defaultSelect";
obj.value=obj.options[0][1];
obj.text=obj.options[0][0];
obj.selectedIndex=0;
with(obj.arrow)innerText=6,className="arrow";
obj.appendChild(selectDiv);
//外层Div
obj.optionDiv = document.createElement("div");
obj.optionDiv.flag="SELECT";
//设置下拉菜单选项的坐标和宽度
with(obj.optionDiv.style) {
var select = obj.selectDiv;
var xy = getSelectPosition(select);
pixelLeft = xy[0];
pixelTop = xy[1]+select.offsetHeight;
width = obj.selectDiv.offsetWidth;
obj.optionDiv.className = "optionDiv";
backgroundColor="white";
if(obj.height!=null)height=obj.height;
overflowX="hidden";
overflowY="auto";
}
//下拉菜单内容
obj.Options = new Array();
for (var i=0;i<obj.options.length;i++) {
obj.Options[i] = obj.optionDiv.appendChild(document.createElement("div"));
}
for (i=0;i<obj.Options.length;i++) {
obj.Options[i].innerText = obj.options[i][0];
obj.Options[i].Farther=obj;
obj.Options[i].index=i;
}
obj.appendChild(obj.optionDiv);
/*事件*/
//禁止选择文本
obj.selectDiv.onselectstart = function() {return false;}
obj.optionDiv.onselectstart = function() {return false;}
//下拉菜单的箭头
obj.arrow.onmousedown = function() {
this.setCapture();
this.style.borderStyle="inset";
}
obj.arrow.onmouseup = function() {
this.style.borderStyle="outset";
this.releaseCapture();
}
obj.arrow.onclick = function() {
event.cancelBubble = true;
obj.optionDiv.style.visibility = obj.optionDiv.style.visibility=="visible"?"hidden":"visible";
}
document.onclick = function() {
var divs=document.all.tags("DIV");
for (var i=0;i<divs.length;i++){
if (divs[i].flag=="SELECT") divs[i].style.visibility="hidden";
}
}
obj.defaultValueTD.onclick = function() {
event.cancelBubble = true;
obj.optionDiv.style.visibility = obj.optionDiv.style.visibility=="visible"?"hidden":"visible";
}
//移动Option时的动态效果
for (i=0;i<obj.Options.length;i++) {
obj.Options[i].attachEvent("onmouseover",function(){moveWithOptions("highlight","white")});
obj.Options[i].attachEvent("onmouseout",function(){moveWithOptions("","")});
obj.Options[i].attachEvent("onmouseup",selectedText);
}
function moveWithOptions(bg,color) {
with(event.srcElement) {
style.backgroundColor = bg;
style.color = color;
}
}
}
function getSelectPosition(obj) {
var objLeft = obj.offsetLeft;
var objTop = obj.offsetTop;
var objParent = obj.offsetParent;
while (objParent.tagName != "BODY") {
objLeft += objParent.offsetLeft;
objTop += objParent.offsetTop;
objParent = objParent.offsetParent;
}
return([objLeft,objTop]);
}
function selectedText() {
var sel=event.srcElement.Farther;
sel.selectedIndex=event.srcElement.index;
sel.value=sel.options[sel.selectedIndex][1];
sel.text=sel.options[sel.selectedIndex][0];
with(event.srcElement) {
sel.defaultValueTD.innerText = innerText;
}
sel.optionDiv.style.visibility="hidden";
//with(sel.defaultValueTD.style)background="highlight",color="white";
var t="";
if (sel.onChange!=null)
t+=sel.onChange;
if (sel.onchange!=null)
t+=sel.onchange;
if (t!=''){
var cmd=(t).replace(/this/gi,"sel");
//document.execScrip(cmd,"javascript");
eval(cmd);
}
}// JavaScript Document 
|
本类阅读TOP10