模仿combox(select)控件

时间:2010-04-07 10:58:30  来源:第二电脑网  作者:第二电脑网

  第二电脑网导读:滚动条)  5、可设置宽度和高度  API参考:  //首先生成一个simulateSelect的实例  //构造函数的第一个可选参数为触发onchange的函数,其它的为onchange函数的参数;  c = new simulateSelect(s1onchange, "never-online");  //设置select的CSS,第一个参数为控件的主要CSS、第二个为选中条目时的CSS、第三个为没有选中条...
  正文:不用整天为美化select控件烦恼了。

  1、可批量美化select控件。

  2、可以有onchange句柄。

  3、触发onchange的函数可带参数。

  3、可以得到select的值。

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

  5、可设置宽度和高度

  API参考:

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

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

  c = new simulateSelect(s1onchange, "never-online");

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

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

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

  c.width = 320;

  c.height = 20;

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

  c.init("s1,s2,s3");

  下一版本将可修改combox

<!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

模仿combox(select)控件》由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Programming/JavaScript/13508.html

 1/6    1 2 3 4 5 6 下一页 尾页


关键字:

关于《模仿combox(select)控件》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td