- 浏览: 219177 次
- 性别:
- 来自: 北京
文章分类
最新评论
例子效果:
右键菜单方便好用的有很多,长用的为jquery contextMenu.
官网: http://www.trendskitchens.co.nz/jquery/contextmenu/
用法: $("table td").contextMenu("myMenu")
问题: 可以看出右键菜单需要制定一个绑定的对象(table td), 但zTree要绑定事件,还需要获得每个节点的li,不是很好,它本身提供右键事件和右键菜单(不是很好看), 所以我们可以在右键事件位置下手, 自己仿照jquery ContextMenu.js 写一个插件(jquery.popupSmallMenu.js):
在ztree触发右键事件时,弹出菜单:
1.使用:
ztree 右键事件:
callback: {
onRightClick:OnRightClick
}
function OnRightClick(event, treeId, treeNode) {
ztree.selectNode(treeNode);
if(treeNode) {
//弹出菜单
$("#menu").popupSmallMenu({
event : event,
onClickItem : function(item) {
chuli(treeNode,item);
}
});
}
}
Html:
<ul id="menu" class="small-menu">
<li class="edit"><a href="#">编辑</a></li>
<li class="cut"><a href="#">添加</a></li>
<li class="copy"><a href="#">删除</a></li>
<li class="small-menu-separator"></li>
<li class="delete"><a href="#"><span class="icon icon-edit"></span>Zoom Out</a></li>
</ul>
CSS 样式 仿照jquery ContextMenu:
右键菜单方便好用的有很多,长用的为jquery contextMenu.
官网: http://www.trendskitchens.co.nz/jquery/contextmenu/
用法: $("table td").contextMenu("myMenu")
问题: 可以看出右键菜单需要制定一个绑定的对象(table td), 但zTree要绑定事件,还需要获得每个节点的li,不是很好,它本身提供右键事件和右键菜单(不是很好看), 所以我们可以在右键事件位置下手, 自己仿照jquery ContextMenu.js 写一个插件(jquery.popupSmallMenu.js):
在ztree触发右键事件时,弹出菜单:
1.使用:
ztree 右键事件:
callback: {
onRightClick:OnRightClick
}
function OnRightClick(event, treeId, treeNode) {
ztree.selectNode(treeNode);
if(treeNode) {
//弹出菜单
$("#menu").popupSmallMenu({
event : event,
onClickItem : function(item) {
chuli(treeNode,item);
}
});
}
}
Html:
<ul id="menu" class="small-menu">
<li class="edit"><a href="#">编辑</a></li>
<li class="cut"><a href="#">添加</a></li>
<li class="copy"><a href="#">删除</a></li>
<li class="small-menu-separator"></li>
<li class="delete"><a href="#"><span class="icon icon-edit"></span>Zoom Out</a></li>
</ul>
CSS 样式 仿照jquery ContextMenu:
.small-menu { position: absolute; width: 120px; z-index: 99999; border: solid 1px #CCC; background: #EEE; padding: 0px; margin: 0px; display: none; } .small-menu li { list-style: none; padding: 0px; margin: 0px; } .small-menu li A { color: #333; text-decoration: none; display: block; line-height: 20px; height: 20px; background-position: 6px center; background-repeat: no-repeat; outline: none; padding: 1px 5px; padding-left: 28px; } .small-menu li a:hover { color: #FFF; background-color: #3399FF; } .small-menu-separator { padding-bottom:0; border-bottom: 1px solid #DDD; } .small-menu LI.edit A { background-image: url(images/page_white_edit.png); } .small-menu LI.cut A { background-image: url(images/cut.png); } .small-menu LI.copy A { background-image: url(images/page_white_copy.png); } .small-menu LI.paste A { background-image: url(images/page_white_paste.png); } .small-menu LI.delete A { background-image: url(images/page_white_delete.png); } .small-menu LI.quit A { background-image: url(images/door.png); }
/** * @description * small popup menu. * @deprecated * JQuery.js * @author Malt * @version 1.0 * Date: 2013-05-22 */ (function($,undefined){ $.fn.popupSmallMenu = function(options) { var $currMenu = $(this), defaultOptions = { event : null, onClickItem : null }, options = $.extend(defaultOptions,options); var _smallMenu = { popupSmallMenu : function() { this._bindItemClick(); this._bindMenuEvent(); this._showMenu(); return $currMenu; }, _bindMenuEvent : function() { var thiz = this; $currMenu.hover(function(){ },function(){ thiz._unBindItemClick(); $currMenu.hide(); }); $currMenu.click(function(){ thiz._unBindItemClick(); $currMenu.hide(); }); }, _showMenu : function() { if(!options.event) { alert('请传入鼠标事件'); } $currMenu.css({ top:options.event.clientY+"px", left:options.event.clientX+"px", display:"block" }); }, _bindItemClick : function() { $currMenu.find('li').each(function(index,obj){ var $li = $(obj); var itemIden = $li.attr('class'); $li.bind('click',function(event){ event.stopPropagation(); if(options.onClickItem && typeof options.onClickItem === 'function') { options.onClickItem(itemIden); } }); }); } , _unBindItemClick : function(){ $currMenu.find('li').each(function(index,obj){ $(obj).unbind(); }); } }; return _smallMenu.popupSmallMenu(); } })(jQuery);
- popupSmallMenu.rar (75.3 KB)
- 描述: demo
- 下载次数: 287
- popupSmallMenu-src.rar (5.5 KB)
- 下载次数: 133
发表评论
-
web界面父子页面互相调用
2017-10-27 14:25 580父页面:parent.html <!DOCT ... -
多选下拉框的回显(Select)
2015-10-20 17:29 10363多选下拉框打印时候是已数组形式展现的,按这种思路: &l ... -
jqgrid 网址
2015-05-13 16:41 497http://www.trirand.com/blog/jqg ... -
JQuery EasyUI combobox动态添加option
2015-03-20 09:41 1704<input class="easyui-c ... -
easy datagrid 获得page信息
2015-02-03 11:07 583var grid = $('#datagrid'); va ... -
easy ui datagrid api
2015-01-29 12:58 637http://www.jeasyui.com/document ... -
扩展easy ui tree 层级(level)
2014-12-22 10:38 838$.extend($.fn.tree.methods, { ... -
jquery 下拉框按text 选中
2014-11-18 16:03 429jQuery("#separator option[ ... -
jqGrid增加滚动条
2014-10-28 10:15 1867滚动条: $(xxx).jqGrid({ ...... aut ... -
jQuery ui 多选下拉
2014-09-25 11:49 977下载及代码:http://www.erichynds.com/ ... -
jqGrid 行编辑(select事件)动态追加控件(操作)
2014-09-15 11:26 7353在某个控件后面, 追加一个控件, 在某个控件下面设置 ... -
jQuery validate 自定义样式、规则
2014-09-12 17:07 1427jquery validate 常用的找Api 就好, 但有一 ... -
jqGrid自动适应窗口大小
2014-09-01 17:41 768$(window).resize(function(){ ... -
jqGrid 编辑自定义控件
2014-08-15 16:12 2357jqGrid 支持在某一列上,自己写一个控件显示,并影响弹出编 ... -
Ztree 常用
2014-08-14 17:36 1075Ztree 支持中文API 实在太easy 了, 有了API ... -
jquery ui Message 简单使用
2014-08-12 10:09 1217可以自己在前面加上一张图片 通过operation判断 用哪张 ... -
jQuery ui Combobox 扩展
2014-08-07 15:16 1389jQuery ui 是一个UI的雏形, 一些UI都基于 ... -
jQuery layout 插件属性
2014-07-30 16:08 1619相信很多人在用layout的时候都会找layout到底有多少属 ... -
jqGrid 两种列模型(TypeError: b is undefined)
2014-07-23 18:06 979jqGrid 的json支持两种列模型 1:如果用普通的js ... -
BS UI
2014-07-21 16:07 345http://www.bootcss.com/ 支持IE6 ...
相关推荐
jquery-1.4.4.min.js jquery.ztree.exhide.min.js jquery.ztree.exedit.min.js jquery.ztree.excheck.min.js jquery.ztree.core.min.js jquery.ztree.all.min.js jquery-1.4.4.js jquery.ztree.exhide.js jquery....
ztree demo jquery.ztree,jquery.ztree.core.js,jquery.ztree.core-3.5.min.js,jquery.ztree.excheck-3.5.min.js,jquery.ztree.all.min.js,jquery.ztree.exedit.js,jquery.ztree.exhide.min.js,jquery-1.4.4.min...
ztree实现模糊查询需要的依赖包:jquery.ztree.exhide.js
用于生成树形组件,javaScript的一个插件,用于使用树形的下拉组件!
ztree右键菜单,javascript源码展示。
ztree添加功能,使其支持字体图标,核心文件jquery.ztree.core.js,欢迎下载。
ztree 右键菜单,html的静态的,js和css都有,下载后直接就可以看到功能介绍,网上可真不好找啊,特此奉献
本项目通过ztree插件,后台连接mysql数据库实现动态树形菜单。只需要更改后台数据表即可快速生成一个树形菜单。
1.0.1.js(已修改)、jquery.jqzoom.js、jquery.thickbox.js、jquery.jqzoom.js、jquery.lazyload.js、jquery.soChange.js、jquery.uploadify.min.js、jquery.validate.js、jquery.form.js、jquery.weekcalendar.js...
ZTree右键增删改功能! html文件可直接运行!
jquery 树控件 万能树 拖拽 添 删 改 大数据操作 ajax操作 代码清晰便于重构 修改
生成树形资源管理的js以及css样式应用,可以有效的管理资源,以及维护
是一个js文件,zTree实现权限分配所需,可去ztree官网自行下载
使用jquery核心,构建一个完整的tree结构
ztree的核心JS文件,稳定版本的。下载即可使用!!!!!!!
是一个js,ztree实现权限管理所需的,可自行去ztree官网下载
下面介绍一下zTree 的主要功能:( 演示Demo 请访问 个人站点) 1、兼容 IE、FireFox、Chrome 等浏览器(对于IE 6.0的兼容问题将不做特殊维护) 2、在一个页面内可同时生成多个 Tree 实例 3、支持 JSON 数据 4...
jquery ztree 异步动态加载部署直接运行,大数据量,异步是很好的处理方式