模仿combox(select)控件

王朝other·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

不用整天为美化select控件烦恼了。

运行代码框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> simulate combox control - http://www.never-online.net </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

<style>

body, input

{

font-family: verdana;

font-size: 9pt;

}

h1

{

font-family: tahoma;

font-size: 22pt;

text-align: left;

}

pre

{

font-size: 9pt;

font-family: verdana;

border: 1px solid #006600;

width: 400px;

padding: 10px;

background: #ffffff;

color: #006600;

}

.CtlSelect

{

border: 1px solid #006600;

font-family: verdana;

height: 20px;

color: #006600;

background: #ffffff;

/*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/

}

.selected

{

background: #006600;

color: #ffffff;

height: 20px;

}

.unselected

{

height: 20px;

color: #006600;

line-height: 120%;

border-bottom: 1px solid #006600;

}

.CtlSelect1

{

border: 1px solid #003399;

font-family: verdana;

height: 20px;

color: #003399;

background: #ffffff;

/*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/

}

.selected1

{

background: #003399;

color: #ffffff;

height: 20px;

}

.unselected1

{

height: 20px;

color: #003399;

line-height: 120%;

border-bottom: 1px solid #003399;

}

.CtlSelect2

{

border: 1px solid #990000;

font-family: verdana;

height: 20px;

color: #990000;

background: #ffffff;

/*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/

}

.selected2

{

background: #990000;

color: #ffffff;

height: 20px;

}

.unselected2

{

height: 20px;

color: #990000;

line-height: 120%;

border-bottom: 1px solid #990000;

}

.copyright

{

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] 126.com

// @ Website: http://www.never-online.net

// @ 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() { with(this)

{

this.IDs = [];

this.name = this;

// property for beta Version

// can editable combox

this.readonly = true;

this.height = 20;

this.width = null;

this.ctlStyle = "CtlSelect";

this.selStyle = "selected";

this.unselStyle = "unselected";

this.elementPrefix = "e__";

this.inputPrefix = "i__";

this.containerPrefix = "c__";

this.buttonPrefix = "b__";

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++)

{

eval(name).IDs.push(arrCtlSel[i]);

}

}

else

{

eval(name).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 + eval(name).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 = 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, btn_off;

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;

div.style.height = offset.height;

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";

[1] [2] 下一页

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航