contextmenu

JavaFX初探（菜单） 本节我们介绍如何创建菜单、菜单栏、增加菜单项、为菜单分类，创建子菜单、设置菜单上下文。你可以使用下面的类来创建菜单。 MenuBar MenuItem Menu CheckMenuItem RadioMenuItem CustomMenuItem SeparatorMenuItem ContextMenu 下图是一个典型的菜单的使用： 在应用中构建菜单 一个菜单就是一系列可操作的项目，可以根据用户的需要来表现。当一个菜单可见的时候，用户可以在某一时刻选中其中一个，在用户选中某一项时，这个菜单变成隐藏模式。通过使用菜单，我们可以节省用户界面的空间，因为有一些功能某些时间并不是总要现实出来的。 菜单在菜单栏中被分组，你需要使用下面的菜单项类，当你构建一个菜单的时候。 MenuItem 创建可选项 Menu 创建子菜单 RadioButtonItem 创建一个单选项 CheckMenuItem 这个菜单项可以在选择被无选择之间转换。 为了给菜单分类，可以使用SeparatorMenuItem 类。 菜单通常在窗口的顶部，并且这些菜单是隐藏的，我们可以通过鼠标点击上下文来打开菜单。 创建菜单栏 尽管菜单栏可以放在用户界面的任何地方，但是一般情况我们放到窗口的顶部。并且菜单栏可已自动的改变自己的大小。默认情况下，每一个菜单栏中的菜单像一个按钮一样呈现出来。

JsTree是一个jquery的插件，它提交一个非常友好并且强大的交互性的树，并且是完全免费或开源的（MIT 许可）。Jstree技持Html 或 json格式的的数据， 或者是ajax方式的动态请求加载数据。 1、支持基于HTML定义、Json、XML方式加载树节点 2、支持拖放，动态增加、删除、重命名树节点 3、支持复选框 4、支持复制、剪切、粘贴树节点，动态刷新树 5、提供足够的回调方法： 6、此外，jsTree有极强的扩展性，可以自定义插件支持更广泛的应用 一.Getting started 1.1 下载jstree 从官网下载最新的版本，目前最新的版本为3.3.3，下载完成后，打开压缩包，将dist/下所有文件复制到你想到使用的地方 https://github.com/vakata/jstree/zipball/3.3.3 1.2 引用jstree及jquery jstree是jquery的一个插件，所以首先要引用jquery <script src="jquery.min.js"></script> <script src="dist/jstree.min.js"></script> <link rel="stylesheet" href="dist/themes/default/style.min.css" /> 1.3 在页面中定义jstree的容器

右键菜单 <! DOCTYPE html > < html > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < meta name ="viewport" content ="initial-scale=1.0, user-scalable=no" /> < style type ="text/css" > body, html, #allmap { width : 100% ; height : 100% ; overflow : hidden ; margin : 0 ; font-family : "微软雅黑" ; font-size : 14px ; } </ style > < script type ="text/javascript" src ="http://libs.baidu.com/jquery/1.9.1/jquery.min.js" ></ script > < script type ="text/javascript" src ="http://api.map.baidu.com/api?v=2.0&ak=31hnqKEhOUOWFXXxvWYXiM1v" ></ script > <!-- 加载鼠标绘制工具 --> < script

本次介绍的内容，稍稍复杂了一点，用VUE实现树形结构。目前这个属性结构还没有编辑功能，仅仅是展示。明天再开一篇文章，介绍如何增加编辑功能，标题都想好了。先看今天的展示效果： 构建树必须用到递归，使用slot这种直观明了的方式，已经行不通了。只能通过属性参数，传递一个树形的数据结构给组件，传入的数据结构大致是这个样子： [ { title:‘页面 ’ selected: false , opened: false , isFolder: true , children:[ { title: 'index.html' , selected: false , opened: false , icon: "far fa-file-code" , }, { title: 'product.html' , selected: false , opened: false , icon: "far fa-file-code" , }, ], }, { title:‘样式’ selected: false , opened: false , isFolder: true , children:[ { title: 'style.css' , selected: false , opened: false , icon: "far fa-file-code" , }, ], }, ]

实例方法和便捷方法是指jQuery可以直接通过链接操作的方法，是通过调用$.event上的方法(上一节介绍的底层方法)来实现的，常用的如下: on(types,selector,data,fn,one)　　;为匹配元素集合中的每个元素绑定一个或多个类型的事件监听函数 types 　　 ;事件类型字符串，多个事件类型之间用空格隔开 selector 　　 ;可选，是一个选择器表达式字符串，用于绑定代理事件。 data 　　 ;传递给事件监听函数的自定义数据，可以是任何类型。 fn 　　　　;待绑定的监听函数 one ;该事件是否只执行一次,为方法.one()提供支持 writer by:大沙漠 QQ:22969969 off(types,selector,fn) ;移除匹配元素中每个元素上绑定的一个或多个类型的监听函数，参数如下: types ;一个或多个以空格分隔的事件类型和可选的命名空间 selector ;可选的选择器表达式字符串，用于移除代理事件 fn ;待移除的监听函数，可以设置为false，表示内部定义的只返回false的函数 off(types,selector,fn)　 ;移除匹配元素中每个元素上绑定的一个或多个类型的监听函数 types ;一个或多个以空格分隔的事件类型和可选的命名空间 selector ;可选的选择器表达式字符串，用于移除代理事件 fn