自定義jQuery PickList插件 - 用法與實例(2)

上篇文章(http://blog.csdn.net/gengv/archive/2010/04/22/5514813.aspx )中演示了最簡單的一個例子，只用了三四行代碼就能實現一個PickList控件。這次將使用個性化設置，來製作滿足各種需要的PickList控件。

自由的選擇符

像上一篇中提到的一樣，pickList()具有多個option選項，其中包括多個選擇器定義選項，通過這些選項可以自定義各種選擇器查找表達式。這些選項包括：

選項名	默認值	說明
availableList_selector	#availableList	availableList的選擇器表達式。默認值爲"#availableList"。可以自定義爲其他jQuery支持的各種選擇器，例如"ul"、".aListClass"。
pickedList_selector	#pickedList	pickedList的選擇器表達式。默認值爲"#pickedList"。可以自定義爲其他jQuery支持的各種選擇器，例如"div"、".pLstClass"。
item_selector	li	availableList和pickedList中條目的選擇器表達式。默認值爲"li"，也可以自定義爲其他jQuery支持的各種選擇器，例如"div"、".pickListItem"。
addButton_selector	#btnAdd	將選中的條目從availableList移至pickedList的按鈕的選擇器表達式。
removeButton_selector	#btnRemove	將選中的條目從pickedList移至availableList的按鈕的選擇器表達式。
root_selector (很少用到)	body	pickList()函數總是在root_selector選擇器的後代元素中查找availableList_selector、item_selector等其他選擇器表達式所定義的元素，用來構造pickList控件。默認值爲"body",，也就是從整個頁面查找availableList_selector、item_selector等其他選擇器表達式所定義的元素。

使用以上這些參數，可以自定義pickList控件中的各個組成部分的選取方式。例如：

pl2 = $("#sample_2").pickList({ availableList_selector : "#leftList", pickedList_selector : "#rightList", item_selector : "li.simpleItem", addButton_selector : "#addButton", removeButton_selector : "#delButton" });

自由的CSS樣式

不只是選擇符可以自由定義，CSS樣式名也可以自定義，依然是通過pickList()選項：

選項名	默認值	說明
selectedItemClassName	selectedItem	當availableList和pickedList中的條目被高亮選中的時候，所使用的CSS樣式。默認值爲"selectedItem"
hoverItemClassName	hoverItem	當鼠標滑過availableList和pickedList中的條目時，所使用的CSS樣式。默認值爲"hoverItem"

如果想替換這兩個CSS樣式類，只需在調用pickList()時，增加這兩個自定義選項設置：

自由的Callback回調

pickList()的選項中還可以定義各種回調方法：

選項名	默認值	說明
beforeAdd	null	當將條目從availableList移到pickedList之前，此方法會被回調。如果返回false，則條目不放發生移動。
afterAdd	null	當將條目從availableList成功移到pickedList之後，此方法會被回調。
beforeRemove	null	當將條目從pickedList移到availableList之前，此方法會被回調。如果返回false，則條目不放發生移動。
afterRemove	null	當將條目從pickedList成功移到availableList之後，此方法會被回調。
hoverOverAvailableItem	null	當鼠標劃入availableList中的每個條目上時，此方法會被回調。
hoverOutAvailableItem	null	當鼠標劃出availableList中的每個條目時，此方法會被回調。
hoverOverPickedItem	null	當鼠標劃入pickedList中的每個條目上時，此方法會被回調。
hoverOutPickedItem	null	當鼠標劃出pickedList中的每個條目時，此方法會被回調。

還有一個方法是可以被覆蓋的：

選項名	說明
containsItem	默認情況下，這個方法會從要被移動條目的後代元素中尋找".idCol"元素，然後比較這個元素和目標List裏面各個條目的".idCol"後代元素的text()返回值，如果相等則認爲有重複條目，當前需要被移動的這一條目將不發生移動，而目標List中的"重複"條目會被加上"selectedItemClassName"定義的CSS樣式。可以在pickList()的參數中，覆蓋這個方法，如果返回false，則意爲目標List中沒有重複條目，條目會被直接移動。

選項名

說明

containsItem

默認情況下，這個方法會從要被移動條目的後代元素中尋找".idCol"元素，然後比較這個元素和目標List裏面各個條目的".idCol"後代元素的text()返回值，如果相等則認爲有重複條目，當前需要被移動的這一條目將不發生移動，而目標List中的"重複"條目會被加上"selectedItemClassName"定義的CSS樣式。可以在pickList()的參數中，覆蓋這個方法，如果返回false，則意爲目標List中沒有重複條目，條目會被直接移動。

$(function(){					
	pl2 = $("#sample_2").pickList({
		availableList_selector : "#leftList",
		pickedList_selector : "#rightList",
		item_selector : "li.simpleItem",
		addButton_selector : "#addButton",
		removeButton_selector : "#delButton",
		selectedItemClassName : "selectedItem2",
		hoverItemClassName : "hoverItem2",
		containsItem : function() {
			return false;
		},
		beforeAdd : ba,
		hoverOverPickedItem : hoverOver
	});
});
			
var ba = function(){				
	var selectedAvailableItems = pl2.getSelectedAvailableItems();
	if(selectedAvailableItems.size()<=0) {
		alert("Please first select item!");
		return false;
	} else {
		var msg = "";
		selectedAvailableItems.each(function(i){
			msg += ((i+1) + "/t" + $(this).find(".nameCol").text() + "/n");
		});
					
		alert("Selected: /n/n" + msg);
		return true;
	}
};
			
var hoverOver = function() {
	var hoverItem = pl2.getPickedItems().filter("." + pl2.settings.hoverItemClassName);
	var countryName = "" + hoverItem.find(".nameCol").text();
	if(countryName.length>0) {
		var firstLetter = countryName.substring(0,1);
		if(firstLetter == "C") {
			alert("The country name starts with 'C'");
		} 
	}
};

綜合實例

完整代碼:

<!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(){
				pl2 = $("#sample_2").pickList({
					availableList_selector : "#leftList",
					pickedList_selector : "#rightList",
					item_selector : "li.simpleItem",
					addButton_selector : "#addButton",
					removeButton_selector : "#delButton",
					selectedItemClassName : "selectedItem2",
					hoverItemClassName : "hoverItem2",
					containsItem : function() {
						return false;
					},
					beforeAdd : ba,
					hoverOverPickedItem : hoverOver
				});
			});
			
			var ba = function(){				
				var selectedAvailableItems = pl2.getSelectedAvailableItems();
				if(selectedAvailableItems.size()<=0) {
					alert("Please first select item!");
					return false;
				} else {
					var msg = "";
					selectedAvailableItems.each(function(i){
						msg += ((i+1) + "/t" + $(this).find(".nameCol").text() + "/n");
					});
					
					alert("Selected: /n/n" + msg);
					return true;
				}
			};
			
			var hoverOver = function() {
				var hoverItem = pl2.getPickedItems().filter("." + pl2.settings.hoverItemClassName);
				var countryName = "" + hoverItem.find(".nameCol").text();
				if(countryName.length>0) {
					var firstLetter = countryName.substring(0,1);
					if(firstLetter == "C") {
						alert("The country name starts with 'C'");
					} 
				}
			};
        </script>
        
        <style type="text/css">
			h4 {
				margin: 5px;
			}
		
			.sampleDiv ul {
				text-decoration: none;
				list-style: none;
				padding: 0;
			}
					
			/* CSS for #sample_2*/	
						
			#sample_2 ul {
				width: 200px;
				height: 150px;
				overflow: auto;
				border: 1px solid #708090;
				padding: 2px;
				background: #E6E6FA;
				float: left;
				margin-top: 0;
			}
			
			#sample_2 #buttonGroup {
				float: left;
				margin: 50px 10px;			
			}
			
			#addButton, #delButton {
				width: 60px;
			}
			
			#sample_2 .idCol {
				display: none;
			}
			
			.simpleItem {
				background: #D1EEEE;
				border-top: 1px solid #FFF;
				border-left: 1px solid #FFF;
				border-right: 1px solid #99C;
				border-bottom: 1px solid #99C;
			}
			
			.hoverItem2 {
				background: #A2B5CD;
			}	
			
			.selectedItem2 {
				background: #DAA520;
				color: #FFFFFF;
			}
        </style>
    </head>
    
    <body>
   	
    <h3>Rich Content Sample</h3>
	    <div id="sample_2" class="sampleDiv">
	    	<ul id="leftList">
	        	<li class="simpleItem">
	            	<span class="idCol">1</span>
	                <span class="flagCol">
	                	<img src="http://hi.csdn.net/attachment/201004/27/689772_1272331866Eftj.gif" height="15"/>
	                </span>
	                <span class="nameCol">China</span>
	            </li>
	            <li class="simpleItem">
	            	<span class="idCol">2</span>
	                <span class="flagCol">
	                	<img src="http://hi.csdn.net/attachment/201004/27/689772_1272331864Nhht.gif" height="15"/>
	                </span>
	                <span class="nameCol">United States</span>
	            </li>
	            <li class="simpleItem">
	            	<span class="idCol">3</span>
	                <span class="flagCol">
	                	<img src="http://hi.csdn.net/attachment/201004/27/689772_1272331866TtjY.gif" height="15"/>
	                </span>
	                <span class="nameCol">Britain</span>
	            </li>
	            <li class="simpleItem">
	            	<span class="idCol">4</span>
	                <span class="flagCol">
	                	<img src="http://hi.csdn.net/attachment/201004/27/689772_1272331867zZzn.gif" height="15"/>
	                </span>
	                <span class="nameCol">Germany</span>
	            </li>
	            <li class="simpleItem">
	            	<span class="idCol">5</span>
	                <span class="flagCol">
	                	<img src="http://hi.csdn.net/attachment/201004/27/689772_12723321447FHG.gif" height="15"/>
	                </span>
	                <span class="nameCol">Sweden</span>
	            </li>
	            <li class="simpleItem">
	            	<span class="idCol">6</span>
	                <span class="flagCol">
	                	<img src="http://hi.csdn.net/attachment/201004/27/689772_1272332145udDs.gif" height="15"/>
	                </span>
	                <span class="nameCol">Italy</span>
	            </li>
	            <li class="simpleItem">
	            	<span class="idCol">7</span>
	                <span class="flagCol">
	                	<img src="http://hi.csdn.net/attachment/201004/27/689772_1272332145jNoO.gif" height="15"/>
	                </span>
	                <span class="nameCol">Japan</span>
	            </li>
	            <li class="simpleItem">
	            	<span class="idCol">8</span>
	                <span class="flagCol">
	                	<img src="http://hi.csdn.net/attachment/201004/27/689772_1272331866qeY7.gif" height="15"/>
	                </span>
	                <span class="nameCol">Canada</span>
	            </li>
	            <li class="simpleItem">
	            	<span class="idCol">9</span>
	                <span class="flagCol">
	                	<img src="http://hi.csdn.net/attachment/201004/27/689772_1272332144Rael.gif" height="15"/>
	                </span>
	                <span class="nameCol">Saudi Arabia</span>
	            </li>
	            <li class="simpleItem">
	            	<span class="idCol">9</span>
	                <span class="flagCol">
	                	<img src="http://hi.csdn.net/attachment/201004/27/689772_1272331867W4m1.gif" height="15"/>
	                </span>
	                <span class="nameCol">France</span>
	            </li>
	        </ul>
	        <div id="buttonGroup">
	            <div><input id="addButton" type="button" value="Add &gt;" /></div>
	           	<div><input id="delButton" type="button" value="&lt; Del" /></div>
	        </div>
	        <ul id="rightList">
	        </ul>
	    </div>    
    </body>
</html>

關於pickList的其他API方法，將會在下一篇文章中介紹。

自定義jQuery PickList插件 - 用法與實例(2)

工作中用到的腳本合集

微服務實踐Aspire項目發佈到遠程k8s集羣

通過f-string編寫簡潔高效的Python格式化輸出代碼

[轉帖]20個常用的Linux工具命令

[轉帖]PostgreSQL從小白到高手教程 - 第46講：poc-tpch測試

24-5-18 X

使用 Java 生成 MD5 編碼

jqGrid與Struts2的結合應用（一） —— 顯示基本Grid表格

Javascript跳轉

如何用ArchiveUpdateSite方式安裝MyEclipse8.5

自定義jQuery PickList插件 - 用法與實例(3)

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結