实例代码讲解jquery easyui动态tab页


Posted in Javascript onNovember 17, 2015

通过使用 jQuery EasyUI 可以很容易地添加 Tabs。您只需要调用 'add' 方法即可。

function addTab(title, href,icon){ 
  var tt = $('#tabs'); 
  if (tt.tabs('exists', title)){//如果tab已经存在,则选中并刷新该tab     
    tt.tabs('select', title); 
    refreshTab({tabTitle:title,url:href}); 
  } else { 
    if (href){ 
      var content = '<iframe scrolling="no" frameborder="0" src="'+href+'" style="width:100%;height:100%;"></iframe>'; 
    } else { 
      var content = '未实现'; 
    } 
    tt.tabs('add',{ 
      title:title, 
      closable:true, 
      content:content, 
      iconCls:icon||'icon-default' 
    }); 
  } 
} 
/**   
 * 刷新tab 
 * @cfg 
 *example: {tabTitle:'tabTitle',url:'refreshUrl'} 
 *如果tabTitle为空,则默认刷新当前选中的tab 
 *如果url为空,则默认以原来的url进行reload 
 */ 
function refreshTab(cfg){ 
  var refresh_tab = cfg.tabTitle?$('#tabs').tabs('getTab',cfg.tabTitle):$('#tabs').tabs('getSelected'); 
  if(refresh_tab && refresh_tab.find('iframe').length > 0){ 
  var _refresh_ifram = refresh_tab.find('iframe')[0]; 
  var refresh_url = cfg.url?cfg.url:_refresh_ifram.src; 
  //_refresh_ifram.src = refresh_url; 
  _refresh_ifram.contentWindow.location.href=refresh_url; 
  }

以上代码简单易懂,代码就是注释,有疑问欢迎给我留言。

ps: jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页)上的内容:“href远程请求”和“content本地内容”。

两者特点:

href方式加载数据的特点:

被加载的页面只有body元素内部的内容才会被加载,也就是jQuery的ajax请求的只是html片段。
加载远程url时有遮罩效果,也就是“等待中……”效果,用户体验较好。
当加载的页面布局较为复杂,或者有较多的js脚本需要运行的时候,编码往往就需要谨慎了,容易出问题,后面会详细谈。

content方式加载数据的特点:

比较灵活,你可以在脚本里面拼写html代码,然后赋值给tab的content属性,不过这种写法会使得代码易读性变差。
可以把iframe赋给content,把一个iframe嵌入也就没有什么不能完成的了。
使用iframe会造成客户端js重复加载,浪费资源,比如说你主页面要引用easyui的库,你的iframe也要引用,浪费就产生了。

Javascript 相关文章推荐
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
谷歌浏览器 insertCell与appendChild的区别
Feb 12 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
jQuery的事件委托实例分析
Jul 15 Javascript
BootStrap 附加导航组件
Jul 22 Javascript
Validform表单验证总结篇
Oct 31 Javascript
浅谈JavaScript的计时器对象
Dec 26 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
详细分析vue响应式原理
Jun 22 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 Javascript
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 #Javascript
基于Jquery easyui 选中特定的tab
Nov 17 #Javascript
jquery实现简单的表单验证
Nov 17 #Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 #Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 #Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 #Javascript
jquery判断密码强度的验证代码
Apr 22 #Javascript
You might like
下载文件的点击数回填
2006/10/09 PHP
php数组一对一替换实现代码
2012/08/31 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
js常见表单应用技巧
2008/01/09 Javascript
intro.js 页面引导简单用法 分享
2013/08/06 Javascript
js简单抽奖代码
2015/01/16 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
Javascript中神奇的this
2016/01/20 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
js实现内置计时器
2019/12/16 Javascript
vue2.x数组劫持原理的实现
2020/04/19 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
Python下载指定页面上图片的方法
2016/05/12 Python
Python开发网站目录扫描器的实现
2019/02/21 Python
django-allauth入门学习和使用详解
2019/07/03 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
2019/09/26 HTML / CSS
家长会标语
2014/06/24 职场文书
煤矿安全知识竞赛活动总结
2014/07/07 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
大专护理专业自荐信
2015/03/25 职场文书
讲座通知范文
2015/04/23 职场文书
立春观后感
2015/06/18 职场文书
六五普法心得体会2016
2016/01/21 职场文书
HAM-2000摩机图
2021/04/22 无线电
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL