前言
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)。