jsTree外掛程式簡介(三)

標籤：get   load   blog   組件   parent   lang   theme   oar   tail   

UI-pluginJSTree的UI外掛程式：用來處理選擇、不選和滑鼠懸浮樹選項的外掛程式。一、屬性包括：1、select_limit：指定一次可以選中幾個節點，預設為-1，表示無限制選中。2、select_multiple_modifier：處理當按住某個鍵時，用滑鼠點擊其他的節點可全部選中；(類似在檔案目錄中的按住ctrl並用滑鼠選擇其它目錄或者檔案)；預設按鍵為"ctrl"，可以用"shift"，"alt"等替代。3、select_range_modifier：先選中一個節點，然後按住某個鍵位，再用滑鼠點擊另外一個節點，這樣就選中這兩個節點之間的部分並包含這兩個節點，類似於windows中選中檔案系統中的"shift"，預設選項為"shift"，可用"ctrl", "alt"等代替。注意：使用這個選項選中的必須為兄弟節點。4、select_parent_close：當選中節點的父節點關閉時是否選中父節點。若為"select_parent"則關閉父節點時選中父節點，若為"false"和"deselect"則當父節點關閉時不選中父節點。預設為"select_parent"。5、select_parent_open：當程式運行過程中選中了一個節點並且這個節點的節點全是關閉的，這時要自動開啟關閉的父節點。預設為"true"6、select_prev_on_delete：當刪除一個節點時預設選擇前一個兄弟節點，若沒有前一個兄弟節點，則選擇父節點。預設為"true"7、disable_selecting_children：預設為"false"，如果設定為"true"，你將無法選擇這個節點的子節點。(待驗證)8、initially_select：當樹完成載入時預設選中的節點，它需要節點的id值來標識。 貼一段官方的代碼 [html] view plain copy 

1. <div class="panel">  
2.   
3.   
4.   
5. <h3>Using the UI plugin</h3>  
6.   
7. <div id="demo1" class="demo">  
8.     <ul>  
9.         <li id="phtml_1">  
10.             <a href="#">Root node 1</a>  
11.             <ul>  
12.                 <li id="phtml_2">  
13.                     <a href="#">Child node 1</a>  
14.                 </li>  
15.                 <li id="phtml_3">  
16.                     <a href="#">Child node 2</a>  
17.                 </li>  
18.             </ul>  
19.         </li>  
20.         <li id="phtml_4">  
21.             <a href="#">Root node 2</a>  
22.         </li>  
23.     </ul>  
24.   
25. </div>  
26.   
27. <script type="text/javascript" class="source">  
28.   
29. $(function () {  
30.   
31.     $("#demo1").jstree({   
32.   
33.         "ui" : {  
34.             "select_limit" : 2,  
35.             "select_multiple_modifier" : "ctrl",  
36.             "selected_parent_close" : "select_parent",  
37.             "initially_select" : [ "phtml_2" ]  
38.         },  
39.   
40.         "core" : { "initially_open" : [ "phtml_1" ] },  
41.   
42.         "plugins" : [ "themes", "html_data", "ui" ]  
43.   
44.     });  
45.   
46. });  
47.   
48. </script>  
49.   
50.   
51.   
52. </div>  

二、函數包括：1、._get_node(node, allow_multiple)：覆蓋了core組件的get_node函數。如果node為null或者沒有定義，並且allow_multiple為true，返回所有現在被選中的節點；如果node為null或者沒有定義，並且allow_multiple不為true，返回最後被選中的節點。node：混合類型，可以為Dom node，jQuery node或指向元素在書中的選擇點。allow_multiple：是否返回所有節點或者node為null時最後一個被選中的節點。2、.save_selected()：儲存樹節點當前被選中的狀態。(實現是儲存在一個變數中，因此重新整理頁面後不存在)。這個函數和cookies plugin外掛程式相關。主要在內部使用，事件觸發函數。3、.reselect()：從save_selected()函數儲存的變數恢複樹的狀態，主要在內部使用，事件觸發函數。4、.refresh(node)：覆蓋了core組件中的refresh函數。啟用前重新整理儲存選擇狀態和事後恢複。5、.hover_node(node)：設定節點hoverd，事件觸發函數。node:mixed，混合類型，可以為Dom node，jQuery node或指向元素在書中的選擇點。6、dehover_node()：刪除目前已經hovered 節點，事件激發函數。7、.select_node(node, check, event)：node:mixed，混合類型，可以為Dom node，jQuery node或指向元素在書中的選擇點。check:bool ，是否檢測規則(檢測"select_limit"選項等)並且做合適的行動或者僅僅選中被選中的節點。event:event，內部使用，當點擊一個節點時觸發此動作。8、.deslect_node(node), .toggle_select(node):這兩個函數控制一個節點的選中狀態，deselect_node激發了一個事件。9、.get_selected(context)：返回被選中的所有節點。10、.deselect_all(context)：補選中所有節點。11、is_select(node)：返回是否某個節點被選中。 本文代碼見 http://download.csdn.net/detail/yizhizouxiaqu/4268775之ui_plugin.html 原英文地址為：http://www.jstree.com/documentation/ui

jsTree外掛程式簡介(三)