实例代码讲解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 相关文章推荐
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
Jun 07 Javascript
html的DOM中Event对象onabort事件用法实例
Jan 21 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 Javascript
完善的jquery处理机制
Feb 21 Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
Mar 27 Javascript
JS基于递归实现网页版计算器的方法分析
Dec 20 Javascript
深入理解ES6中let和闭包
Feb 22 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
JavaScript监听键盘事件代码实现
Jun 03 Javascript
用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
跟我学Laravel之视图 &amp; Response
2014/10/15 PHP
浅谈ThinkPHP的URL重写
2014/11/25 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
jQuery 加上最后自己的验证
2009/11/04 Javascript
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
js无提示关闭浏览器窗口的两种方法分析
2016/11/06 Javascript
Js apply方法详解
2017/02/16 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
fetch 如何实现请求数据
2018/12/20 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
vue+elementUi图片上传组件使用详解
2019/08/20 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
Django内容增加富文本功能的实例
2017/10/17 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
Jar包的作用是什么
2014/03/30 面试题
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
文秘大学生求职信
2014/02/25 职场文书
2014预备党员党课学习心得范文
2014/07/08 职场文书
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis