实例代码讲解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 相关文章推荐
js GridView 实现自动计算操作代码
Mar 25 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
axios 封装上传文件的请求方法
Sep 26 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
echarts多条折线图动态分层的实现方法
May 24 Javascript
node实现mock-plugin中间件的方法
Dec 25 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
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
jquery中的$(document).ready()使用小结
2014/02/14 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
Javascript中神奇的this
2016/01/20 Javascript
js老生常谈之this,constructor ,prototype全面解析
2016/04/05 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
javascript回到顶部特效
2016/07/30 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
Python3基础之基本数据类型概述
2014/08/13 Python
Python实现的多线程端口扫描工具分享
2015/01/21 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
django静态文件加载的方法
2018/05/20 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
python列表推导式入门学习解析
2019/12/02 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
秋季婚礼证婚词
2014/01/11 职场文书
工程承诺书怎么写
2014/05/24 职场文书
欢迎词范文
2015/01/27 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书
2019个人半年工作总结
2019/06/21 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书