用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）。