用jQuery做的一个dropdown-list

前言

dropdown list 是web应用中比较常用的一种控件，HTML标准提供的select标签的功能略显单薄，最大的缺点是不能定制图标，所以一般都是用div标签来模拟。又由于通用，所以有必要将其抽象成一个通用的控件，这样每次使用的时候只需要提供dropdown list 的数据模型即可。

 

效果图

收缩起来的效果

展开的效果

 

设计与实现

初步的设想是，提供一个标准的数据模型(data model)，然后通过调用一个javascript函数，动态的画出dropdown list来，这个例子中使用的数据模型如下：

/**
 * This is the list data model, defined
 * the style of the list, and all items it contained.
 */
var listDataModel = {
	style : {width:"440px", float:"left"},
	contents : [	
		{content:"CrossTable", icon:"images/crosstable.gif"},
		{content:"Table", icon:"images/table.gif"},
		{content:"Label", icon:"images/label.gif"},
		{content:"Image", icon:"images/image.gif"},
		{content:"Chart", icon:"images/chart.gif"}
	]
};

 用一个内部的(私有的)函数构造dropdown list的panel，也就是下拉出来的那个panel，其中包含所有的item，类似于select控件的option，这个函数不必暴露给最终的使用者：

/**
 * generate the dropdown panel, contains all list items
 * and then fulfill the container.
 * @dataModel data model of the list items
 * @container container of all list items
 */
function buildDropDownList(dataModel, container){
	var dropdownList = $("<div></div>").addClass("dropdownList_");
	var dropdownPanel = $("<div></div>").addClass("dropdownPanel");
	dropdownList.css("padding-left", "18px").text("Please Select a value");
	dropdownPanel.hide();
	dropdownList.click(function(){
		dropdownPanel.toggle();
	});

	for(var i = 0;i < dataModel.length;i++){
		var itemContainer = $("<div></div>").addClass("listItemContainer");
		itemContainer.css("background", "url(" + dataModel[i].icon + ") no-repeat");
		var item = $("<div></div>").addClass("listItem");
		item.text(dataModel[i].content);
		item.mouseover(function(){
			$(this).addClass("selected");
		}).mouseout(function(){
			$(this).removeClass("selected");
		}).click(function(){
			dropdownList.text($(this).text());
			dropdownList
			.css("background", $(this).parent().css("background"))
			.css("padding-left",$(this).parent().css("padding-left"));
			dropdownPanel.hide();
		});
		dropdownPanel.append(itemContainer.append(item));
	}
	container.append(dropdownList).append(dropdownPanel);
}

 然后，是我们需要暴露给用户的接口函数，这个函数接受一个参数，集数据模型，然后返回一个jQuery对象，调用者通常是一个container, 使用jQuery的话，可以很方便的使用container.append()将其插入到合适的位置：

/**
 * this is the interface for end-user, to use this function, you should provide:
 * @datamodel datamodel of the list object
 */
function dropdownList(dataModel){
	var ddcontainer = $("<div></div>").addClass("dropdownlist");
	for(var p in dataModel.style){ddcontainer.css(p, dataModel.style[p]);}
	var layout = 
		$("<table></table>")
		.attr({border:"0", cellspacing:"0", cellpadding:"0", width:"100%"});
		
	var dropdown = $("<tr></tr>");
	var listContainerTd = $("<td></td>").addClass("black");
	var listContainer = $("<div></div>");
	
	buildDropDownList(dataModel.contents, listContainer);
	listContainer.appendTo(listContainerTd);
	listContainerTd.appendTo(dropdown);
	var ddicon = 
		$("<td></td>").css({width:"17px", align:"right"}).append(
			$("<div></div>").attr("id", "ddicon").append(
				$("<img />")
				.css({width:"16px", height:"16px"})
				.attr("src", "images/dropdownlist_arrow.gif")
			)
		);
	
	ddicon.children(0).mouseover(function(){
		$(this).children(0).attr("src", "images/dropdownlist_arrow_hov.gif");
	}).mouseout(function(){
		$(this).children(0).attr("src", "images/dropdownlist_arrow.gif");
	}).click(function(){
		listContainer.children(0).click();
	});
	
	ddicon.appendTo(dropdown);
	dropdown.appendTo(layout);
	layout.append(dropdown);
	layout.appendTo(ddcontainer);
	
	return ddcontainer;
}

 

 

代码中，为每个item(option)提供必要的事件处理器，比如当鼠标移过时高亮显示，当单击时将值放入list中，并隐藏panel等。

 

使用jQuery确实可以提高效率，比如创建DOM元素，并添加到节点上，注册事件，设置DOM元素的style等，非常方便。最后，当然是$(document).ready() :

/**
 * execute those code when document tree is ready, it'll generate the 
 * dropdown list.
 */
$(document).ready(function(){
	var container = $("#list");
	container.append(dropdownList(listDataModel));
	$("#click").click(function(){
		alert("item ["+$("#list > div > table tr > td > div :first").text()+"] is selected");
	});
});

 到这里，这个dropdown list就已经完成了，看看如何使用

使用

使用起来很简单，需要在你的页面中指定一个dropdown list的容器div就可以了：

<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>yalist</title>
		<link rel="stylesheet" href="style/yalist.css" type="text/css">
		<script src="js/jquery-1.3.2.min.js" type="text/javascript" ></script>
		<script src="js/yalist.js" type="text/javascript" ></script>
	</head>
	<body>
		<div id="page" class="page">
			<table border="0" cellspacing="5" cellpadding="5">
				<tr>
					<td>
						<div id="list"></div>
					</td>
				</tr>
				<tr>
					<td>
						<input 
							type="button" 
							name="click" 
							value="show item value" 
							id="click">		
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>

 

okay, 这个dropdown list的介绍就到这里，有时间的话可以对table, text panel之类的做一些封装，方便使用，可以在一定程度上提高开发效率。

jQuery真是个好东西，不但支持全部的CSS3的选择器，而且支持一些自定义的选择器，如XPath选择器，重要的，最重要的是，在浏览器的兼容性方面的支持，这才是WEB开发中最令人头疼的问题。代码附在附件中，有需要的可以去看看（此list名叫yalist ,意为 yet another list）。

评论

3 楼 chainfox 2009-08-21  

我用的IE，效果很好，支持楼主

2 楼 abruzzi 2009-08-21  

royzhou1985 写道

定位有问题 我用的是firefox浏览器

方便的话，截个图看看，我用的FF3.5，效果如文章中的图所示。呵呵

1 楼 royzhou1985 2009-08-21  

定位有问题 我用的是firefox浏览器