电脑故障

位置:IT落伍者 >> 电脑故障 >> 浏览文章

模仿combox(select)控件省去美化烦恼


发布日期:2022/3/16
 
不用整天为美化select控件烦恼了

可批量美化select控件

可以有onchange句柄

触发onchange的函数可带参数

可以得到select的值

可设置像select类似的滚动条(如大于或等于个数目时出现滚动条)

可设置宽度和高度

API参考

//首先生成一个simulateSelect的实例

//构造函数的第一个可选参数为触发onchange的函数其它的为onchange函数的参数;

c = new simulateSelect(sonchange neveronline);

//设置select的CSS第一个参数为控件的主要CSS第二个为选中条目时的CSS第三个为没有选中条目时的CSS

cstyle(CtlSelect selected unselected);

//设置select的宽度和高度;

cwidth = ;

cheight = ;

//初始化参数为select控件的ID可以用逗号分离进行批量转换;

cinit(sss);

下一版本将可修改combox

<!DOCTYPE HTML PUBLIC //WC//DTD HTML Transitional//EN>

<HTML>

<HEAD>

<TITLE> simulate combox control </TITLE>

<META NAME=Generator CONTENT=EditPlus>

<META NAME=Author CONTENT=>

<META NAME=Keywords CONTENT=>

<META NAME=Description CONTENT=>

<style>

body input

{

fontfamily: verdana;

fontsize: pt;

}

h

{

fontfamily: tahoma;

fontsize: pt;

textalign: left;

}

pre

{

fontsize: pt;

fontfamily: verdana;

border: px solid #;

width: px;

padding: px;

background: #ffffff;

color: #;

}

CtlSelect

{

border: px solid #;

fontfamily: verdana;

height: px;

color: #;

background: #ffffff;

/*background:url({EDBAADBA}jpg);*/

}

selected

{

background: #;

color: #ffffff;

height: px;

}

unselected

{

height: px;

color: #;

lineheight: %;

borderbottom: px solid #;

}

CtlSelect

{

border: px solid #;

fontfamily: verdana;

height: px;

color: #;

background: #ffffff;

/*background:url({EDBAADBA}jpg);*/

}

selected

{

background: #;

color: #ffffff;

height: px;

}

unselected

{

height: px;

color: #;

lineheight: %;

borderbottom: px solid #;

}

CtlSelect

{

border: px solid #;

fontfamily: verdana;

height: px;

color: #;

background: #ffffff;

/*background:url({EDBAADBA}jpg);*/

}

selected

{

background: #;

color: #ffffff;

height: px;

}

unselected

{

height: px;

color: #;

lineheight: %;

borderbottom: px solid #;

}{

margin-top: 10px;

font-size: 9pt;

text-align: center;

color: #333;

font-weight: bold;

}

</style>

</HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">

<!--

//-------------------------------------------------------------

// @ Module: simulate select control, IE only.

// @ Debug in: IE 6.0

// @ Script by: blueDestiny, never-online

// @ Updated: 2006-3-22

// @ Version: 1.0 apha

// @ Email: blueDestiny [at]

// @ Website:

// @ Please Hold this item please.

//

// API

// @ class: simulateSelect()

//

// @ object.style(ctlStyle[,selStyle][,unselStyle])

// ctlStyle: main control combox css class name

// selStyle: when mouseover or option focus css class name

// unselStyle: options blur's css class name

//

// @ object.width=(widthPX)

// widthPX must be a digit number.

//

// @ object.height=(heightPX)

// heightPX must be a digit number.

//

// @ object.getValue(ctlSelID)

// ctlSelID is the unique select control ID

//

// -------------- for the next Version ----------

// @ object.readOnly = (blnReadOnly)

// blnReadOnly must be a boolean type or a number type.

// @ object.addEvent(w, h)

// w: fire handler's event.

// h: handler function.

//-------------------------------------------------------------

function $(objID)

{

return document.getElementById(objID);

};

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 simulateSelect(handlerFunction) { with(this)

{

this.IDs = [];

this.name = this;

this.value = null;

this.onchangeArgs = [];

this.onchange = handlerFunction;

this.height = 20;

this.width = null;

this.number = null;

this.ctlStyle = "CtlSelect";

this.selStyle = "selected";

this.unselStyle = "unselected";

this.elementPrefix = "e__";

this.inputPrefix = "i__";

ntainerPrefix = "c__";

this.buttonPrefix = "b__";

// property for beta Version

// can editable combox

this.readonly = true;

if( arguments.length>0 )

for(var i=0; i<arguments.length; i++)

onchangeArgs[i-1] = arguments[i];

return this;

}};

simulateSelect.prototype.init = function(ctlSelIDs) { with(this)

{

eval(name).append(ctlSelIDs);

eval(name).simulates();

}};

simulateSelect.prototype.style = function() { with(this)

{

ctlStyle = arguments[0];

selStyle = arguments[1];

unselStyle = arguments[2];

}};

//-----------------------------------------------

simulateSelect.prototype.append = function(ctlSelIDs) { with(this)

{

if( ctlSelIDs.indexOf(",")>0 )

{

var arrCtlSel = ctlSelIDs.split(",");

for(var i=0; i<arrCtlSel.length; i++)

{

IDs.push(arrCtlSel[i]);

}

}

else

IDs.push(ctlSelIDs);

}};

simulateSelect.prototype.checkupOnMouseDown = function(e) { with(this)

{

// here compatible mf.

var el = e ? e.srcElement : e.target;

if( el.id.indexOf(elementPrefix)>-1 ||

el.id.indexOf(inputPrefix)>-1 ||

el.id.indexOf(containerPrefix)>-1 ||

el.id.indexOf(buttonPrefix)>-1 )

{

return;

}

else

{

for(var i=0; i<eval(name).IDs.length; i++)

if( $(containerPrefix + IDs[i]) )

$(containerPrefix + IDs[i]).style.display = "none";

}

}};

simulateSelect.prototype.simulates = function() { with(this)

{

for(var i=0; i<IDs.length; i++)

eval(name).simulate(IDs[i]);

}};

simulateSelect.prototype.simulate = function(ctlSelID) { with (this)

{

var input;

var button;

var object;

var offset;

object = $(ctlSelID);

offset = Offset(object);

input = document.createElement("INPUT");

button = document.createElement("BUTTON");

button.setAttribute("id", buttonPrefix + ctlSelID);

//button.value = "⊿";

button.value = "6";

button.style.fontFamily = "Webdings, Marlett";

button.style.background = "";

button.onclick = input.onclick = function()

{

this.blur();

eval(name).expand(ctlSelID, offset);

};

input.onselectstart = function()

{

eval(name).expand(ctlSelID, offset);

event.returnValue = false;

};

input.setAttribute("id", inputPrefix + ctlSelID);

input.title = button.title = "click expand options";

input.style.cursor = button.style.cursor = "default";

input.className = button.className = ctlStyle;

input.style.width = (width>0 ? width : object.offsetWidth);

height ? input.style.height=button.style.height=height : "";

input.value = value = object[0].text;

if( readonly==true ) input.readOnly=true;

// this method is only IE.

object.insertAdjacentElement("afterEnd",button);

object.insertAdjacentElement("afterEnd",input);

object.style.display = 'none';

}};

simulateSelect.prototype.expand = function(ctlSelID, offset) { with(this)

{

var div;

var object = $(ctlSelID);

if( !$(containerPrefix + ctlSelID) )

{

div = document.createElement("DIV");

div.style.position = "absolute";

div.style.display = "block";

div.setAttribute("id", containerPrefix + ctlSelID);

div.className = ctlStyle;

div.style.left = offset.left;

div.style.top = offset.top + offset.height;

div.style.width = (width ? width : offset.width) + 20;

if( number )

{

div.style.height = height * number;

div.style.overflow = "auto";

}

document.body.appendChild(div);

for(var i=0; i<object.length; i++)

{

div = document.createElement("DIV");

div.setAttribute("id", div.id = elementPrefix + ctlSelID + i);

div.style.cursor = "default";

if( object[i].text==$(inputPrefix + ctlSelID).value )

div.className = selStyle;

else

div.className = unselStyle;

div.innerText = div.title = object[i].text;

div.style.height = height;

div.setAttribute("value", object[i].value);

div.onmouseover = function()

{

for(var j=0; j<$(containerPrefix + ctlSelID).childNodes.length; j++)

{

if($(containerPrefix + ctlSelID).childNodes[j]==this)

$(containerPrefix + ctlSelID).childNodes[j].className = selStyle;

else

$(containerPrefix + ctlSelID).childNodes[j].className = unselStyle;

}

};

div.onclick = function()

{

$(inputPrefix + ctlSelID).value = this.innerText;

$(containerPrefix + ctlSelID).style.display = "none";

if( onchange && value!=$(inputPrefix + ctlSelID).value )

{

onchange.apply(this,onchangeArgs);

value = $(inputPrefix + ctlSelID).value;

}

};

$(containerPrefix + ctlSelID).appendChild(div);

}

return;

}

if( $(containerPrefix + ctlSelID).style.display=="none" )

{

for(var i=0; i<object.length; i++)

{

if( object[i].text==$(inputPrefix + ctlSelID).value )

$(elementPrefix + ctlSelID + i).className = selStyle;

else

$(elementPrefix + ctlSelID + i).className = unselStyle;

}

$(containerPrefix + ctlSelID).style.display="block";

return;

}

if( $(containerPrefix + ctlSelID).style.display=="block" )

{

$(containerPrefix + ctlSelID).style.display="none";

return;

}

}};

simulateSelect.prototype.getValue = function(ctlSelID) { with(this)

{

if( $(inputPrefix + ctlSelID) )

return $(inputPrefix + ctlSelID).value;

else

return null;

}};

simulateSelect.prototype.addEvent = function(w, h) { with(this)

{

}};

//-----------------------------------------------

//window.onerror = Function("return true;");

// IE only.

document.attachEvent("onmousedown", function() {

a.checkupOnMouseDown(event);

b.checkupOnMouseDown(event);

c.checkupOnMouseDown(event)

});

window.attachEvent("onload", function() {

window.a = new simulateSelect();

a.style("CtlSelect", "selected", "unselected");

a.init("s1");

//-------------------------------------------

window.b = new simulateSelect();

b.style("CtlSelect1", "selected1", "unselected1");

b.width = 300;

b.number = 9;

b.init("s2");

//-------------------------------------------

window.c = new simulateSelect(s1onchange, "never-online", a.getValue('s1'));

c.style("CtlSelect2", "selected2", "unselected2");

c.width = 320;

c.init("s3");

});

function s1onchange(para, s)

{

alert("onchage handler fire " + para + s);

}

//-->

</SCRIPT>

<h1> simulate combox control </h1>

<h4> demonstrate </h4>

<p>

normal select: <select id="s0">

<option value="- please select your options -"> - please select your options -</option>

<option value="1">option1</option>

<option value="2">option2</option>

<option value="3">option3</option>

<option value="4">option4</option>

<option value="5">option5</option>

</select>

</p>

<p>

simulate select: <select id="s1">

<option value="- please select your options -"> - please select your options -</option>

<option value="1">1option1</option>

<option value="2">1option2</option>

<option value="3">1option3</option>

<option value="4">1option4</option>

<option value="5">1option5</option>

</select>

</p>

<p>

scroll simulate select: <select id="s2">

<option value="- please select your options -"> - please select your options -</option>

<option value="1">2option1</option>

<option value="2">2option2</option>

<option value="3">2option3</option>

<option value="4">2option4</option>

<option value="5">2option6</option>

<option value="5">2option7</option>

<option value="5">2option8</option>

<option value="5">2option9</option>

<option value="5">2option10</option>

<option value="5">2option11</option>

<option value="5">2option12</option>

<option value="5">2option13</option>

<option value="5">2option14</option>

</select>

</p>

<p>

onchange handler fire: <select id="s3">

<option value="- please select your options -"> - please select your options -</option>

<option value="1">3option1</option>

<option value="2">3option2</option>

<option value="3">3option3</option>

<option value="4">3option4</option>

<option value="5">3option5</option>

</select>

</p>

<button onclick="alert(a.getValue('s1') + '\n\n' + b.getValue('s2') + '\n\n' + c.getValue('s3'))" class="CtlSelect"> Get value </button>

<button onclick="alert('next version')" class="CtlSelect">append item</button>

<button onclick="alert('next version')" class="CtlSelect">remove item</button>

<h4> description </h4>

<pre>

//-------------------------------------------------------------

// @ Module: simulate select control, IE only.

// @ Debug in: IE 6.0

// @ Script by: blueDestiny, never-online

// @ Updated: 2006-3-22

// @ Version: 1.0 apha

// @ Email: blueDestiny [at]

// @ Website:

// @ Please Hold this item please.

//

// API

// @ class: simulateSelect()

//

// @ object.style(ctlStyle[,selStyle][,unselStyle])

// ctlStyle: main control combox css class name

// selStyle: when mouseover or option focus css class name

// unselStyle: options blur's css class name

//

// @ object.width=(widthPX)

// widthPX must be a digit number.

//

// @ object.height=(heightPX)

// heightPX must be a digit number.

//

// @ object.getValue(ctlSelID)

// ctlSelID is the unique select control ID

//

// -------------- for the next Version ----------

// @ object.readOnly = (blnReadOnly)

// blnReadOnly must be a boolean type or a number type.

// @ object.addEvent(w, h)

// w: fire handler's event.

// h: handler function.

//-------------------------------------------------------------

</pre>

<div class="copyright">

Power By blueDestiny, never-online

</div>

</BODY>

</HTML>

上一篇:文件名到URL的转换

下一篇:制作可以执行的 JAR 文件包及 jar 命令详解