自定义jQuery PickList插件 - 用法与实例(1)
这是我自己写的基于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。两种方法：
$(function(){ // 第1种方法 var pl_1 = $("#pickListContainer").pickList(); // 第2种方法 var pl_2 = new $.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函数，待下一篇继续分享~