jQuery EasyUI Tab 选项卡问题小结


Posted in Javascript onAugust 16, 2016

需要解决的问题:

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);
}
}

效果截图:

先打开产品类型和基础产品页面

jQuery EasyUI Tab 选项卡问题小结

到 产品类型 添加数据

jQuery EasyUI Tab 选项卡问题小结

到基础产品 添加数据

jQuery EasyUI Tab 选项卡问题小结

我想要的效果达到了!

主要代码:

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 选项卡问题小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js限制文本框为整数和货币的函数代码
Oct 13 Javascript
jquery入门—选择器实现隔行变色实例代码
Jan 04 Javascript
瀑布流布局并自动加载实现代码
Mar 12 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
javascript中的事件代理初探
Mar 08 Javascript
js Dialog 去掉右上角的X关闭功能
Apr 23 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
JavaScript简单实现的仿微博留言功能示例
Jan 17 Javascript
js中Array对象的常用遍历方法详解
Jan 17 Javascript
vue-cli3中vue.config.js配置教程详解
May 29 Javascript
jQuery3.0中的buildFragment私有函数详解
Aug 16 #Javascript
js 自带的 map() 方法全面了解
Aug 16 #Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 #Javascript
js 自带的sort() 方法全面了解
Aug 16 #Javascript
JavaScript实战之菜单特效
Aug 16 #Javascript
深入理解js generator数据类型
Aug 16 #Javascript
js 创建对象 经典模式全面了解
Aug 16 #Javascript
You might like
用PHP连接Oracle for NT 远程数据库
2006/10/09 PHP
php 文章调用类代码
2011/08/11 PHP
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
php用户注册信息验证正则表达式
2015/11/12 PHP
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
jQuery轻松实现无缝轮播效果
2017/03/22 jQuery
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
python实现爬虫下载漫画示例
2014/02/16 Python
Python批量发送post请求的实现代码
2018/05/05 Python
实时获取Python的print输出流方法
2019/01/07 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
业务员自荐信范文
2014/04/20 职场文书
目标责任书格式
2014/07/28 职场文书
暑期培训心得体会
2014/09/02 职场文书
小学见习报告
2015/06/23 职场文书
企业宣传语大全
2015/07/13 职场文书
我爱我班主题班会
2015/08/13 职场文书
表扬信范文
2019/04/22 职场文书
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js
MySQL创建管理RANGE分区
2022/04/13 MySQL