基于jQuery实现的自定义下拉框控件

       传统的下拉框控件显示效果单一，对于一些复杂的效果（比如树形菜单、树形列表、分页列表、分组列表等等）就无能为力了。为了让下拉框支持这些复杂的显示效果，唯一的办法就是创建自己的下拉框控件。

       下面介绍一个用jQuery实现的自定义下拉框控件，本控件在IE6下测试通过。

 

   1、控件的html代码：

<div style="padding:2 2 2 2;">
	<input type="hidden" id="userId" name="userId"><input type="text" id="userId_text" name="userId_text" class="ui_combobox_input" readonly><span class="ui_combobox_down"></span>
	
	<div id="ContentContainer">
		<iframe src='about:blank' frameBorder='0' width='100%' height='100%' scrolling='no'></iframe>
		<table border="1" width="100%" style="position:absolute; left:0px; top:0px;border-collapse:collapse;border-style:solid;">
			<tr><td>11111</td></tr>
			<tr><td>22222</td></tr>
			<tr><td>33333</td></tr>
			<tr><td>44444</td></tr>
			<tr><td>55555</td></tr>
		</table>
	</div>
</div>

  

    2、控件的js代码：

jQuery(function(){
	//鼠标移入、移出自定义下拉框箭头图标时触发的事件
	jQuery(".ui_combobox_down").hover(
		function(){
			jQuery(this).addClass("ui_combobox_select");
		},
		function(){
			jQuery(this).removeClass("ui_combobox_select");
		}
	);

	//单击自定义下拉框时触发的事件
	jQuery(".ui_combobox_down").bind("click", function(){
		var source = jQuery(this);
		var parent = jQuery(this).parent();
		var offset = parent.offset();

		var h = parseInt(source.css("height"));
		var paddingLeft = parseInt(parent.css("padding-left"));

		var panel = jQuery(parent).find("#ContentContainer");
		panel.css("left", offset.left + paddingLeft);
		panel.css("top", h+offset.top+1);
		panel.css("width", 200);

		panel.slideDown("fast");
		panel.fadeIn("normal");
	});

	//单击document时，隐藏自定义下拉框的下来列表
	jQuery().bind("click", function(e){
		var tagName = e.srcElement.tagName.toLowerCase();
		if(tagName == "body"){
			jQuery("#ContentContainer").slideUp("fast");
			jQuery("#ContentContainer").fadeOut("normal");
			jQuery("#ContentContainer").hide();
		}
	});
});

  

  3、控件的css样式：

.ui_combobox_input{
	border-width: 1 0 1 1;
	border-style: solid;
	width: 180;
	height: 20;
}

.ui_combobox_down{
	border-width: 1 1 1 0;
	border-style: solid;
	width: 20;
	height: 20;
	cursor: hand;
	background-image: url("btn-arrow.gif");
	background-repeat: no-repeat;
	background-position: 3 2;
	background-color: #B9DCFF;
}

.ui_combobox_select{
	background-position: 3 -48;
	background-color: #D7EBFF;
}

#ContentContainer{
	border-width: 1 1 1 1;
	border-style: solid;
	position: absolute;
	display: none;
	z-index: 9;
}