DropDownList自定义样式(一)

     效果图:

     

     刚开始想实现这个效果,发现DropDownList控件自己没有这个功能。于是百度了一下,资料挺多的,就是没有我想要的。最后没办法,只好在某个大型的门户网站上扣了,终于扣下来了。在次跟大家共享一下。

     一共需要另外的两个文件,一个Combox.js和一个Combox.css文件。其代码在下边,另外需要在aspx页面的<head></head>里加入

<link href="http://www.cnblogs.com/css/page/Combox.css" rel="stylesheet" type="text/css" />

<script language="javascript" type="text/javascript" src="/js/Combox.js"></script>

两行代码,一行是引入css样式表,一行是引入js文件,文件路径可以自定义。此外,还需要写一段js代码,注册一下DropDownList控件。代码如下:

<script language="javascript" type="text/javascript">
//注册select

//DropDownList1为DropDownList控件的Id,300为线框显示的宽度,280为箭头显示的宽度
new Combox("DropDownList1",300,280);
</script>

 

    

ok,这样下来,就可以实现上图的效果了。

 

Combox.js文件代码:

 

Code

 

 

posted @ 2008-08-29 15:55  juhnpen  阅读(12624)  评论(15编辑  收藏  举报