Right click on a node to display context menu.

 
  • My Documents
    • Photos
    • Program Files
      • Intel
      • Java
      • Microsoft Office
      • Games
    • index.html
    • about.html
    • welcome.html
源代码
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Tree Context Menu - jQuery EasyUI Demo</title>
  6. <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
  7. <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
  8. <link rel="stylesheet" type="text/css" href="../demo.css">
  9. <script type="text/javascript" src="../../jquery.min.js"></script>
  10. <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
  11. </head>
  12. <body>
  13. <h2>Tree Context Menu</h2>
  14. <p>Right click on a node to display context menu.</p>
  15. <div style="margin:20px 0;"></div>
  16. <div class="easyui-panel" style="padding:5px">
  17. <ul id="tt" class="easyui-tree" data-options="
  18. url: 'tree_data1.json',
  19. method: 'get',
  20. animate: true,
  21. onContextMenu: function(e,node){
  22. e.preventDefault();
  23. $(this).tree('select',node.target);
  24. $('#mm').menu('show',{
  25. left: e.pageX,
  26. top: e.pageY
  27. });
  28. }
  29. "></ul>
  30. </div>
  31. <div id="mm" class="easyui-menu" style="width:120px;">
  32. <div onclick="append()" data-options="iconCls:'icon-add'">Append</div>
  33. <div onclick="removeit()" data-options="iconCls:'icon-remove'">Remove</div>
  34. <div class="menu-sep"></div>
  35. <div onclick="expand()">Expand</div>
  36. <div onclick="collapse()">Collapse</div>
  37. </div>
  38. <script type="text/javascript">
  39. function append(){
  40. var t = $('#tt');
  41. var node = t.tree('getSelected');
  42. t.tree('append', {
  43. parent: (node?node.target:null),
  44. data: [{
  45. text: 'new item1'
  46. },{
  47. text: 'new item2'
  48. }]
  49. });
  50. }
  51. function removeit(){
  52. var node = $('#tt').tree('getSelected');
  53. $('#tt').tree('remove', node.target);
  54. }
  55. function collapse(){
  56. var node = $('#tt').tree('getSelected');
  57. $('#tt').tree('collapse',node.target);
  58. }
  59. function expand(){
  60. var node = $('#tt').tree('getSelected');
  61. $('#tt').tree('expand',node.target);
  62. }
  63. </script>
  64. </body>
  65. </html>

Tree Context Menu的更多相关文章

  1. SAP Context menu（菜单）

    *&---------------------------------------------------------------------* *& Report RSDEMO_CO ...

  2. Android Contextual Menus之一：floating context menu

    Android Contextual Menus之一:floating context menu 上下文菜单 上下文相关的菜单(contextual menu)用来提供影响UI中特定item或者con ...

  3. create Context Menu in Windows Forms application using C# z

    In this article let us see how to create Context Menu in Windows Forms application using C# Introduc ...

  4. Win7/Win8右键菜单管理工具(Easy Context Menu) v1.5 绿色版

    软件名称: Win7/Win8右键菜单管理工具(Easy Context Menu)软件语言: 简体中文授权方式: 免费软件运行环境: Win8 / Win7 / Vista / WinXP软件大小: ...

  5. Description Resource Path Location Type Project configuration is not up-to-date with pom.xml. Select: Maven->Update Project... from the project context menu or use Quick Fix. spark-MT line 1 Maven Co

    1.相信大家新建的maven项目,然后添加好依赖(即修改了pom.xml文件以后就会出现如下所示的错误): Description Resource Path Location Type Projec ...

  6. sublime text 3-right click context menu

    dd a system wide windows explorer button " Edit with Sublime" similar to how Notepad++ doe ...

  7. 手机浏览器中屏蔽img的系统右键菜单context menu

    我们知道通过oncontextmenu事件可以屏蔽浏览器右键菜单 $('img').on("contextmenu",function(E){E.preventDefault(); ...

  8. Android -- Options Menu,Context Menu,Popup Menu

    Options Menu                                                                           创建选项菜单的步骤: 1. ...

  9. Vue 2.0 右键菜单组件 Vue Context Menu

    Vue 2.0 右键菜单组件 Vue Context Menu https://juejin.im/entry/5976d14751882507db6e839c

随机推荐

  1. [MAC] SVN lock的使用

    转载 : http://www.eefocus.com/czzheng/blog/12-03/245532_4ca94.html 如果压根没有锁lock,那么每个人都拥有一个本地copy,每个人都能自 ...

  2. touch详解

    touch事件 前言 一个触屏网站到底和传统的pc端网站有什么区别呢,交互方式的改变首当其冲.例如我们常用的click事件,在触屏设备下是如此无力. 手机上的大部分交互都是通过touch来实现的,于是 ...

  3. 强制JSP页面刷新，防止被服务器缓存(可用于静态include强制刷新)

    对于jsp页面,为了防止页面被服务器缓存.始终返回同样的结果. 通常的做法是在客户端的url后面加上一个变化的参数,比如加一个当前时间. 我现在使用的方法是在jsp头部添加以下代码: <%    ...

  4. 案例（用封装的ajax函数检查用户名）

    本程序主要功能是检查用户输入的用户名是否在检查的范围之内 CheckUserName.htm代码: <head> <title></title> <scrip ...

  5. Windows环境下配置Vim为Python的IDE

    (一)安装Python 2.7 在官网下载Python,并安装,我的安装路径是D:\Program Files\Python.安装完成后编辑环境变量Path,在其后添加;D:\Program File ...

  6. TypeScript 1.5 Beta带来修饰元数据支持

    (此文章同时发表在本人微信公众号"dotNET每日精华文章") 今天由于有点小感冒,就不长篇大论了,简单介绍一下和VS 2015 RC一同发布的TypeScript 1.5 Bet ...

  7. 我与C++的不解情缘

    我是一个老实人,我当时报考C++真的全心是为了自己自考的免考,绝不是为了什么二级证,可是,进行到一半的时候,突然获悉,C++自我们这次开始,不作为免考科目了,当时我的心里啊,那个纠结,那个痛啊,随后, ...

  8. 由文章缩略图读出banner图

    <div class="banner"> {dede:sql sql="select litpic FROM #@__archives where typei ...

  9. The Suspects 简单的并查集

    Description 严重急性呼吸系统综合症( SARS), 一种原因不明的非典型性肺炎,从2003年3月中旬开始被认为是全球威胁.为了减少传播给别人的机会, 最好的策略是隔离可能的患者. 在Not ...

  10. 3.PopupWindow 、拍照、裁剪

    实现这样的效果 圆角图片的自定义控件直接拷进来,和com一个等级 想要弹出内容可以使用悬浮窗 layout_pupup <LinearLayout xmlns:android="htt ...