处理EasyUI中tab的切换问题以及accordion左侧导航栏的代码实现
//左侧导航菜单
function leftMenus()
{
//$(".easyui-accordion").empty();
$.each(_menus.menus, function(i, n) {
$(".easyui-accordion").accordion('add',
{
title: n.text,
content:moduleIndex(n.menus),
iconCls:'icon-search'
});
});
$(".easyui-accordion").accordion();
liClick();
} function liClick()
{
$('.easyui-accordion li a').click(function()
{
var tabTitle = $(this).text();
/**
*处理tab切换问题:将"href"修改成"way"。
*/
var url = $(this).attr("way");
addTab(tabTitle,url);//打开tab选项卡
$('.easyui-accordion li div').removeClass("selected");
$(this).parent().addClass("selected");
}).hover(function()
{
$(this).parent().addClass("hover");
},function()
{
$(this).parent().removeClass("hover");
});
} function moduleIndex(menusData)
{
var text="";
text += '<ul>';
$.each(menusData,function(j,o)
{
/**
*处理tab切换问题:将‘a’标签中的"href"修改成"way"。
*/
text += '<li><div ><a target="mainFrame" way="'+o.attributes+'" >' + o.text + '</a></div></li> ';
});
text += '</ul>';
return text;
} function addTab(subtitle,url)
{
if(!$('#tabs').tabs('exists',subtitle))
{
$('#tabs').tabs('add',{
title:subtitle,
content:createFrame(url),
closable:false,
width:$('#mainPanle').width()-10,
height:$('#mainPanle').height()-26,
iconCls:'icon-search'
});
}
else
{
$('#tabs').tabs('select',subtitle);
}
tabClose();
} function createFrame(url)
{
var s = '<iframe name="mainFrame" scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
return s;
} function tabClose()
{
/*双击关闭TAB选项卡*/
$(".tabs-inner").dblclick(function(){
var subtitle = $(this).children("span").text();
$('#tabs').tabs('close',subtitle);
}) //绑定右键菜单
$(".tabs-inner").bind('contextmenu',function(e){
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY,
}); var subtitle =$(this).children("span").text();
$('#mm').data("currtab",subtitle); return false;
});
} //绑定右键菜单事件
function tabCloseEven()
{
//关闭当前
$('#mm-tabclose').click(function(){
var currtab_title = $('#mm').data("currtab");
$('#tabs').tabs('close',currtab_title);
})
//全部关闭
$('#mm-tabcloseall').click(function(){
$('.tabs-inner span').each(function(i,n){
var t = $(n).text();
$('#tabs').tabs('close',t);
});
});
//关闭除当前之外的TAB
$('#mm-tabcloseother').click(function(){
var currtab_title = $('#mm').data("currtab");
$('.tabs-inner span').each(function(i,n){
var t = $(n).text();
if(t!=currtab_title)
$('#tabs').tabs('close',t);
});
});
//关闭当前右侧的TAB
$('#mm-tabcloseright').click(function(){
var nextall = $('.tabs-selected').nextAll();
if(nextall.length==0){
//msgShow('系统提示','后边没有啦~~','error');
alert('后边没有啦~~');
return false;
}
nextall.each(function(i,n){
var t=$('a:eq(0) span',$(n)).text();
$('#tabs').tabs('close',t);
});
return false;
});
//关闭当前左侧的TAB
$('#mm-tabcloseleft').click(function(){
var prevall = $('.tabs-selected').prevAll();
if(prevall.length==0){
alert('到头了,前边没有啦~~');
return false;
}
prevall.each(function(i,n){
var t=$('a:eq(0) span',$(n)).text();
$('#tabs').tabs('close',t);
});
return false;
}); //退出
$("#mm-exit").click(function(){
$('#mm').menu('hide');
})
} /*进度条*/
function progress(){
var win = $.messager.progress({
title:'请稍等',
msg:'正在加载数据...'
});
setTimeout(function(){
$.messager.progress('close');
},2000)
}
处理EasyUI中tab的切换问题以及accordion左侧导航栏的代码实现的更多相关文章
- easyui中Tab的tools按钮刷新当前tab
easyui中Tab的tools按钮刷新当前tab 点击刷新按钮,刷新当前Tab选项卡. $('#index_tabs').tabs({ fit : true, border : false, too ...
- 使用vue封装一个tab栏切换的左侧导航栏的公共组件
首先看最终效果图: 1.compent文件夹里添加tab文件夹,里面创建index.vue index.js index.css index.vue内的template部份代码如下:(最新更正:代码 ...
- jquery easyui 中tab页添加其他页面,href与content的用法与区别
//tab页增加 function addPanel(name,url){ var dd = $('#tt').tabs('exists',name); if(dd){ $('#tt').tabs(' ...
- easyui中tab页中js脚本无法加载的问题及解决方法
我发现tab页中<script src="xxx.js">方式加载的脚本没有生效,firebug看请求也没有请求相应的脚本文件. 单独在浏览器中打开tab页中的页面js ...
- 网页中tab标签切换分别用jquery和javascript源码实现
//HTML布局<ul id="tabTitle"> <li class="active">HTML5</li> <l ...
- vant中tab标签切换时会改变内容滚动高度
vant的tabs标签页,标签切换时会改变内容区的滚动高度,这是因为内容区共用同一个父元素为滚动区域引起的,解决办法:在tabs的内容区域嵌套一层滚动区域,让每个内容区域使用单独的滚动元素就行了. ...
- adjustResize模式下ExpandaleListView中输入框焦点错乱及布局底部的导航栏被顶在键盘上方的处理
为了更好的用户体验,煎熬了许久,得到这么个解决方案.在此记录下来,以供后来者参考. 第一部分 清单文件中组件activity的android:windowSoftInputMode属性值的含义: [A ...
- easyUI框架之学习2--添加左侧导航栏
<head> function addTab(title, url) { if ($('#tableContainer').tabs('exists', title)) { $('#tab ...
- uni-app中实现左侧导航栏效果
HTML: 1 <view class="list"> 2 <!-- 一级 --> 3 <scroll-view class="list-l ...
随机推荐
- [React] Close the menu component when click outside the menu
Most of the time, your components respond to events that occur within the component tree by defining ...
- SpringMVC实战(三种控制器方式)
1.前言 上篇博客着重说了一下SpringMVC中几种处理映射的方式,这篇博客来说一下SpringMVC中几种经常使用的控制器. 2.经常使用控制器 2.1 ParameterizableViewC ...
- 关于Android中设置闹钟的相对完善的解决方案
前些时候,有人在我「非著名程序员」微信公众号的后台问我有没有设置闹钟的demo,我当时说承诺为大家写一个,一直没空,直到最近又有人跟我要,我决定抽时间写一个吧.确实设置闹钟是一个比较麻烦的东西.我在这 ...
- 15、USB摄像头图片采集+QT显示
一.Qt的下载和的安装 关于Qt的安装,网络上有很详细的介绍.这里只做简单介绍. 需要的安装包一共有两个:Qt Creator 和QTE. 1)QT Creator 下载地址:qt-sdk-linux ...
- 看朋友日志发现的一个ios下block相关的内存管理问题,非常奇怪,请大家帮忙一起来回答!
http://blog.csdn.net/fengsh998/article/details/38090205 这篇文章以下是我的回复.相同的代码仅仅是把变量的定义从局部变量改为类的成员变量就发现了非 ...
- JDK8 直接定义接口中静态方法
JDK8前,接口只能是抽象方法. 但是在JDK8中,静态方法是可以直接定义方法体,可以直接用接口名调用.实现类和实现是不可以调用的 一.直接调用接口的静态方法 二.实现接口的子类来调用接口的静态方法 ...
- 【2186】Popular Cows(强连通分支及其缩点)
id=2186">[2186]Popular Cows(强联通分支及其缩点) Popular Cows Time Limit: 2000MS Memory Limit: 65536 ...
- Lucene学习总结之二:Lucene的总体架构 2014-06-25 14:12 622人阅读 评论(0) 收藏
Lucene总的来说是: 一个高效的,可扩展的,全文检索库. 全部用Java实现,无须配置. 仅支持纯文本文件的索引(Indexing)和搜索(Search). 不负责由其他格式的文件抽取纯文本文件, ...
- Android菜鸟的成长笔记(27)——SurfaceView的使用
前面有关自定义View中进行了绘图,但View的绘图机制存在如下缺陷: 1.View缺乏双缓冲机制. 2.当程序需要更新View上的图像时,程序必须重绘View上显示的整张图片. 3.新线程无法直接更 ...
- Google VR技术大揭秘
VR 虚拟现实(Virtual Reality)技术是一种能够创建和体验虚拟世界的计算机仿真系统.它利用计算机生成一种模拟环境.是一种多源信息融合的.交互式的三维动态视景和实体行为的系统仿真, 使用户 ...