处理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 ...
随机推荐
- Java基础学习总结(49)——Excel导入导出工具类
在项目的pom文件中引入 <dependency> <groupId>net.sourceforge.jexcelapi</groupId> <artifac ...
- php课程 8-30 实现验证码验证的难点是什么
php课程 8-30 实现验证码验证的难点是什么 一.总结 一句话总结:session技术实现验证码传递. 1.生成验证码的那个网页(php文件)中的验证码怎么搁到别的网页中去? 直接在img的src ...
- 像Bootstrap一样比较热门的前端框架有哪些
像Bootstrap一样比较热门的前端框架有哪些 一.总结 一句话总结:框架大同小异,可以多去各自官网看看效果(比较一下各自的不同点(也就是提供的不同的功能)),然后根据需求选择用哪个.我觉得boot ...
- 3、在编译过程中出现no space left on device
原因:通过df -h查看发现磁盘空间不错 删掉不需要的文件后执行sudo apt-get clean
- 【52.49%】【codeforces 556A】Case of the Zeros and Ones
time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...
- JavaScript实现form表单的多文件上传
form表单的多文件上传,具体内容如下 formData对象可以使用一系列的键值对来模拟一个完整的表单,然后使用Ajax来发送这个表单 使用<form>表单初始化FormData对象的方式 ...
- Django---MVC设计模式
把数据存储逻辑.业务逻辑和表现逻辑组合在一起的概念被称为软件架构的 Model-View-Controller (MVC)模式. 在这个模式中, Model 代表数据存层,View 代表的是系统中选择 ...
- [Grid Layout] Specify a grid gutter size with grid-gap
It’s beautifully straightforward to add a gutter to our grid layout. Let’s apply one with grid-gap.
- Net程序调试
Net程序调试 前言 作为一个.net开发工程师,不管是在写桌面程序.服务程序或web程序,在开发阶段,我们必须非常熟悉vs的动态调试技能,当然web程序可能还需要调试前端的脚本或样式,这不在本文的讨 ...
- 前端调用百度API
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...