這是我自己寫的基於jQuery的pickList插件的說明文檔，希望能和大家分享。
可以參考我之前一篇日誌http://blog.csdn.net/gengv/archive/2010/04/20/5508707.aspx
插件以及Demo的下載地址 ：http://code.google.com/p/jquery-picklist/downloads/list
主要特點：
- 需要jQuery 1.3以上版本支持；
- 在選項條目中支持豐富的HTML內容，例如<div>、<img>等；
- 可以爲子元件定義充分自由的jQuery選擇器，以及CSS樣式；
- 支持CTRL、SHIFT鍵操作；
- 支持多種事件callback回調。
第一個例子：
使用pickList其實很簡單，它本身提供了默認的設置。
上圖是一個pickList的截圖，爲了表述清楚，現將上面的列表稱爲A列表，下面的列表稱爲P列表。
首先將jQuery和pickList的js文件引入頁面：
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jquery-picklist.googlecode.com/files/jquery.pickList-0.1.7.pack.js"></script>
然後，再在$(function(){})中，聲明pickList。兩種方法：
這兩種方法都基於默認設置，即:
- A列表的默認jQuery選擇符爲 "#availableList"；
- P列表的默認選擇符爲 "#pickedList"；
- 列表中的項目的默認 選擇符爲"li"；
- Add按鈕的默認 選擇符爲"#btnAdd"；
- Remove按鈕的默認 選擇符爲"#btnRemove"；
- 懸停時的CSS樣式名稱默認爲"hoverItem"；
- 選中後的CSS樣式名稱默認爲"selectedItem"。
這些默認選項不用聲明，pickList會默認使用；如果你有需求，可以通過pickList()的options參數，自定義這些設置（具體用法稍後介紹）。
聲明pickList的兩種方法，不同之處在於：
第一種方法是在 $("#pickListContainer") 這個對象內部查找對應的列表選擇符、按鈕選擇符等，來構成pickList組件；
第二種方法是在 <body> 下直接查找對應的列表選擇符、按鈕選擇符等，來構成pickList組件。
因此更推薦第一種用法。
概括一下最簡單的用法步驟：
- 引入jQuery和pickList的js文件；
- 在HTML和CSS中按照默認的選擇符和CSS類名，來定義控件名稱和CSS類名；
- 在javascript中，聲明pickList組件。
簡單吧~~~
第一個例子的完整代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GengV's PickList - Demo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js
"></script>
<script type="text/javascript" src="http://jquery-picklist.googlecode.com/files/jquery.pickList-0.1.7.pack.js
"></script>
<script type="text/javascript">
$(function(){
$("#sample_1").pickList()
;
});
</script>
<style type="text/css">
.sampleDiv ul {
text-decoration: none;
list-style: none;
padding: 0;
}
.hoverItem {
background: #6CC;
}
.selectedItem {
background: #FC3;
}
#sample_1 ul {
width: 280px;
height: 120px;
overflow: auto;
border: 1px solid #609;
}
#sample_1 span {
margin: 0 10px;
}
</style>
</head>
<body>
<h3>The First Sample</h3>
<div id="sample_1" class="sampleDiv">
<ul id="availableList">
<li>
<span class="idCol">1</span><span>Dog</span>
</li>
<li>
<span class="idCol">2</span><span>Cat</span>
</li>
<li>
<span class="idCol">3</span><span>Mouse</span>
</li>
<li>
<span class="idCol">4</span><span>Goat</span>
</li>
<li>
<span class="idCol">5</span><span>Horse</span>
</li>
<li>
<span class="idCol">6</span><span>Donkey</span>
</li>
<li>
<span class="idCol">7</span><span>Caw</span>
</li>
</ul>
<input id="btnAdd" type="button" value="+ Add" />
<input id="btnRemove" type="button" value="- Remove" />
<ul id="pickedList">
</ul>
</div>
</body>
</html>
pickList插件還有不少自定義選項和API函數，待下一篇繼續分享~