EasyUI Tabs绑定右键

JS:

/*为选项卡绑定右键*/

$("#tabs").tabs({

onContextMenu : function(e) {

/* 选中当前触发事件的选项卡 */

var subtitle = $(this).text();

$(‘#tabs‘).tabs(‘select‘, subtitle);

//显示快捷菜单

e.preventDefault();

//阻止冒泡

$(‘#menu‘).menu(‘show‘, {

left : e.pageX,

top : e.pageY

});

return false;

}

})

//刷新

$("#m-refresh").click(function () {

var currTab = $(‘#tabs‘).tabs(‘getSelected‘);    //获取选中的标签项

var url = $(currTab.panel(‘options‘).content).attr(‘src‘);    //获取该选项卡中内容标签(iframe)的 src 属性

if (url == null) {

/* 重新设置该标签 */

$(‘#tabs‘).tabs(‘update‘, {

tab: currTab,

options: {

content: ‘<iframe frameborder="0"  src="Tabs/Monitoring/MonitoringOfMapType.aspx" style="height: 100%; width: 100%;" ></iframe>‘//如果用herf,容易导致样式与主页面重载,导致页面奔溃.

}

})

}

else {

/* 重新设置该标签 */

$(‘#tabs‘).tabs(‘update‘, {

tab: currTab,

options: {

content: ‘<iframe frameborder="0"  src="‘ + url + ‘"  style="height: 100%; width: 100%;" ></iframe>‘//如果用herf,容易导致样式与主页面重载,导致页面奔溃.

}

})

}

});

//关闭所有

$("#m-closeall").click(function () {

$(".tabs li").each(function (i, n) {

var title = $(n).text();

if (title != ‘主页‘) {//非主页全部关闭

$(‘#tabs‘).tabs(‘close‘, title);

}

});

});

//除当前之外关闭所有

$("#m-closeother").click(function () {

var currTab = $(‘#tabs‘).tabs(‘getSelected‘);

currTitle = currTab.panel(‘options‘).title;

$(".tabs li").each(function (i, n) {

var title = $(n).text();

if (currTitle != title && title != ‘主页‘) {//除本页和主页以外全部关闭

$(‘#tabs‘).tabs(‘close‘, title);

}

});

});

//关闭当前

$("#m-close").click(function () {

var currTab = $(‘#tabs‘).tabs(‘getSelected‘);

currTitle = currTab.panel(‘options‘).title;

$(‘#tabs‘).tabs(‘close‘, currTitle);

});

html:

<%--右键菜单--%>

<div id="menu" class="easyui-menu" style="width: 150px;">

<div id="m-refresh" data-options="iconCls:‘icon-reload‘">

刷新</div>

<div class="menu-sep" data-options="iconCls:‘‘">

</div>

<div id="m-closeall" data-options="iconCls:‘‘">

全部关闭</div>

<div id="m-closeother" data-options="iconCls:‘‘">

关闭其他</div>

<div class="menu-sep">

</div>

<div id="m-close" data-options="iconCls:‘icon-no‘">

关闭</div>

</div>

来自为知笔记(Wiz)

时间: 2024-11-11 14:21:09

EasyUI Tabs绑定右键的相关文章

解决easyui tabs中href无法跨域跳转

<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html" /> <meta name="author" content="blog.anchen8.net" /> <script type="text/javascript" src=&q

【EasyUI学习-3】Easyui tabs入门实践

作者:ssslinppp       1. 摘要 一般我们在设计程序主框架的时候,当点击(子)菜单时,希望相应界面都在tabs页中显示: 在显示的时候,如果之前打开过该界面,则希望重新选中对应的tab页,并刷新: 如果之前没有打开对应的tab页,则创建一个新的tab页: 如下图所示: 2. jsp界面 <!-- 主操作区 --> <div region="center" style="background:#eee; overflow-y:hidden&qu

easyui tabs getSelected

var index = $('#centerTag').tabs('getTabIndex',$('#centerTag').tabs('getSelected')); 在easyui tabs中,根据选中的页签,获取对应的index值. ps:今儿才得以发现博客园开通啦,这应该是首篇博客园的博文啦撒,哈哈...偶把今儿学到的有关easyui tabs控件的方法写下来,以示纪念啦.

jquery.easyui.tabs 中的首个tabs被最后tabs覆盖的问题解决方法

这是由于tabs对href重载的的问题导致,因此我们需要将href更改为其它自定义的属性即可避免此问题的发生. 解决方法如下: 第一步页面端: 循环体开始 <li> <div><a target="tagFrame" href="@n.Url" ><span class="icon icon-sys"> </span>@n.Title</a></div> <

Easyui tabs的herf和content属性

在backstage.jsp页面中我写了一个方法,用于在指定位置添加面板(id为msg的地方)function addTab(t,h){ if($('#msg').tabs('exists',t)){ $('#msg').tabs('select',t); }else{ $('#msg').tabs('add',{ title:t, href:h }); }}在body方法中有一个超连接<a id="admins">查看管理员信息</a>方法调用$("

EasyUI Tabs + Yii2.0实现iframe方式打开页面(解决共用静态文件引入加载的问题)

在项目实际开发中,有将打开的各个链接页面隔离的需求(防止静态资源起冲突),这个时候常规思路就是使用iframe来实现!但遇到一个比较棘手的问题,当用easyui Tabs打开一个iframe页面时,怎么解决原有共用静态资源引入的问题.有人建议可以考虑将共用静态资源文件放到一个php文件中,然后每次渲染页面时加载即可,这个时候很多朋友会想到PHP的include()方式,但是每个iframe页面都要include一次,岂不是很麻烦.而且项目的要求是iframe打开和easyui tabs href

目录树加载并绑定右键点击事件

1 using System.Collections; 2 using System.Drawing; 3 using System.IO; 4 using System.Linq; 5 using System.Windows.Forms; 6 7 namespace menuTreeWITHrightMouseClick 8 { 9 public partial class Form1 : Form 10 { 11 string strRootFolderPath = @"D:\CODE&q

EasyUI 表格点击右键添加或刷新 绑定右键菜单

例1 在HTML页面中设置一个隐藏的菜单(前提是已经使用封装的Easyui) 代码: <div id="contextMenu_jygl" class="easyui-menu" style="width: 80px; display: none;">                              <div id="btn_More" data-options="iconCls:'ico

网站前端_EasyUI.基础入门.0007.使用EasyUI Tabs组件的最佳姿势?

1. 基础选项卡 <div id="t" class="easyui-tabs" data-options="width:500,height:300">     <div data-options="title:'About',closable:true,bodyCls:'tabbody'">         <p style="font-size:14px">jQue