jQuery EasyUI Tab 选项卡问题小结
更新时间：2016年08月16日 09:50:04 作者：hellokitty燕
这篇文章主要介绍了jQuery EasyUI Tab 选项卡问题小结,在项目开发阶段很多朋友都遇到过此问题，其实解决办法很简单的，下面小编给大家分享下问题原因及解决办法，需要的朋友可以参考下
需要解决的问题：
比如说 我先把行政区域的页面打开之后，我又把产品类型管理的页面打开，之后我再产品类型管理里添加了一条数据，当我点击横着的行政区域选项卡时，我需要使用到产品类型管理岗添加的数据，但是在行政区域里不存在那条数据。我就想让这条数据显示出来，所以我就想当我点击横着的选项卡的时候，我就想让刷新一下页面。这时那条数据就会显示出来。
主要是我完全不知道我点击横着的选项卡触发的事件。代码如下：
html
选项卡
<div data-options="region:'center',collapsible:false"> <div id="mainTabs" class="easyui-tabs" data-options="fit:true,narrow:true"> <div title="首页" style="overflow:hidden;" data-options="iconCls:'fa fa-home'"> <div id="myclock" style="margin: 0 auto;width: 400px;" class="clock"></div> </div> </div> </div>
js
添加横着的选项卡
function addTab(title, url) {
if ($('#mainTabs').tabs('exists', title)) {
$('#mainTabs').tabs('select', title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="'+ url+'" style="width:100%;height:99%;"></iframe>';
$('#mainTabs').tabs('add', {
title: title,
content: content,
closable: true ,
cache:true,
});
}
}
点击左边选项卡
function clickTree(node) {
if ($(this).tree('isLeaf', node.target)) {
addTab(node.text, node.attributes.url);
} else {
$(this).tree('toggle', node.target);
}
}
问题算是解决了吧！
思路：主要就是点击横着的选项卡的时候，重新加载数据一样。
function addTab(title, url) {
if ($('#mainTabs').tabs('exists', title)) {
$('#mainTabs').tabs('select', title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="'+ url+'" style="width:100%;height:99%;"></iframe>';
$('#mainTabs').tabs('add', {
title: title,
content: content,
closable: true ,
cache:true,
});
}
}
function clickTree(node) {
if ($(this).tree('isLeaf', node.target)) {
addTab(node.text, node.attributes.url);
/* 获取横向的选项卡 */
var content = '<iframe scrolling="auto" frameborder="0" src="'+ node.attributes.url+'" style="width:100%;height:99%;"></iframe>';
$('#mainTabs').tabs({
onSelect: function (title) {
var currTab = $('#mainTabs').tabs('getTab', title, node.attributes.url);
var iframe = $(currTab.panel('options').content);
var src =iframe.attr('src');
$('#mainTabs').tabs('update',{
options: {
title: title,
href: src
}
});
}
});
} else {
$(this).tree('toggle', node.target);
}
}
效果截图：
先打开产品类型和基础产品页面
到 产品类型 添加数据
到基础产品 添加数据
我想要的效果达到了！
主要代码：
var content = '<iframe scrolling="auto" frameborder="0" src="'+ node.attributes.url+'" style="width:100%;height:99%;"></iframe>';
$('#mainTabs').tabs({
onSelect: function (title) {
var currTab = $('#mainTabs').tabs('getTab', title, node.attributes.url);
var iframe = $(currTab.panel('options').content);
var src =iframe.attr('src');
$('#mainTabs').tabs('update',{
options: {
title: title,
href: src
}
});
}
});
以上所述是小编给大家介绍的jQuery EasyUI Tab 选项卡问题小结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
我们经常看到有很多的垂直时间轴用来记录事件进展，而有朋友问我要求分享水平的时间轴，其实水平时间轴的难点在于自适应屏幕尺寸。那么 今天我要给大家分享的是一款支持响应式、支持触屏手势滑动的水平时间轴2015-12-12
这篇文章主要介绍了jQuery中的$是什么意思及 $. 和 $().的区别,需要的朋友可以参考下2018-04-04
jQuery在vs2008及js文件中的无智能提示的解决方法
我通过下面方法实现了jQuery在VS2008及js文件中的智能提示的，希望对朋友们有所帮助。2010-12-12
这篇文章主要为大家详细介绍了jquery插件uploadify多图上传功能实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要介绍了jQuery新窗口打开外链接的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
一般元素下的多个指定子元素显示隐藏效果,使用css中的选择器:nth-child()、:nth-of-type(),但如果想使用JavaScript动态控制,就需要用到jquery的filter()方法2023-08-08
这篇文章主要介绍了jQuery中click事件用法,以实例形式分析了click事件的具体功能及应用技巧,非常具有实用价值,需要的朋友可以参考下2014-12-12
基于PHP+Jquery制作的可编辑的表格的代码，需要的朋友可以参考下。2011-04-04
这篇文章主要介绍了JQuery中的常用事件、对象属性与使用方法,结合实例形式分析了jquery事件、对象属性、方法相关使用技巧,需要的朋友可以参考下2019-12-12
jQuery Migrate是应用迁移辅助插件，是用于高级版本兼容低级版本辅助插件。这篇文章主要介绍了jQuery Migrate 插件用法 ,需要的朋友可以参考下2019-05-05
最新评论