jsTree插件簡介(三)
阿新 • • 發佈:2017-08-29
asc dom 目前 highlight light 加載 boa open board view plain copy
UI-plugin
JSTree的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]- <div class="panel">
- <h3>Using the UI plugin</h3>
- <div id="demo1" class="demo">
- <ul>
- <li id="phtml_1">
- <a href="#">Root node 1</a>
- <ul>
- <li id="phtml_2">
- <a href="#">Child node 1</a>
- </li>
- <li id="phtml_3">
- <a href="#">Child node 2</a>
- </li>
- </ul>
- </li>
- <li id="phtml_4">
- <a href="#">Root node 2</a>
- </li>
- </ul>
- </div>
- <script type="text/javascript" class="source">
- $(function () {
- $("#demo1").jstree({
- "ui" : {
- "select_limit" : 2,
- "select_multiple_modifier" : "ctrl",
- "selected_parent_close" : "select_parent",
- "initially_select" : [ "phtml_2" ]
- },
- "core" : { "initially_open" : [ "phtml_1" ] },
- "plugins" : [ "themes", "html_data", "ui" ]
- });
- });
- </script>
- </div>
jsTree插件簡介(三)