jsTree插件简介(五)

HotKeys plugin

       JSTree的Hotkeys plugin实现键盘操作树结构，依赖于jquery.hotkeys.plugin。

hotkey 类似于键值操作，当点击键盘时，激活相应的事件操作。

默认的快捷键为："up", "ctrl+up", "shift+up", "down", "ctrl+down", "shift+down", "left", "ctrl+left", "shift+left", "right", "ctrl+right", "shift+right", "space", "ctrl+space", "shift+space", "f2", "del"。

下面是使用快捷键的例子：

[html] view plaincopy

1. <h3>JSTree hotkeys</h3>  
2.   
3. By default "up", "ctrl+up", "shift+up", "down", "ctrl+down", "shift+down", "left", "ctrl+left", "shift+left", <br/>  
4. "right", "ctrl+right", "shift+right", "space", "ctrl+space", "shift+space", "f2", "del"<br/>  
5.   
6. <div id="demo1" class="demo">  
7.     <ul>  
8.         <li id="phtml_1">  
9.             <a href="#">Root node 1</a>  
10.             <ul>  
11.                 <li id="phtml_2">  
12.                     <a href="#">Child node 1</a>  
13.                 </li>  
14.                 <li id="phtml_3">  
15.                     <a href="#">Child node 2</a>  
16.                 </li>  
17.             </ul>  
18.         </li>  
19.         <li id="phtml_4">  
20.             <a href="#">Root node 2</a>  
21.         </li>  
22.     </ul>  
23. </div>  
24.   
25.   
26. <h4>modify hotkeys please move to https://github.com/jeresig/jquery.hotkeys/blob/master/test-static-01.html</h4>  
27. <script type="text/javascript" class="source">  
28. $(function () {  
29.     $("#demo1").jstree({   
30.       "core" : { "initially_open" : [ "phtml_1" ] },  
31.       "plugins" : ["themes","html_data","ui","crrm","hotkeys"]  
32.     });  
33.     //$("#demo1").jstree("disable_hotkeys");    
34.       
35. });  
36.   
37. </script>  

上例实现了利用键盘操作树结构的行为。如果不想使用快捷键，最简单的方法是将hotkeys插件从plugins中移除，或者使用代码中的注视部分

$("#demo1").jstree("disable_hotkeys"); 

如果要激活快捷键操作请使用$("#demo1").jstree("enable_hotkeys");函数。

另：也可以覆盖默认的快捷键，这是jquery插件的一部分，详见：jquery.hotkeys.plugin

上文源自：http://www.jstree.com/documentation/hotkeys 

代码请见：代码 之hotkey-plugin.html