实例代码讲解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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 11 Javascript
学习javascript,实现插入排序实现代码
Jul 31 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 Javascript
教你快速搭建Node.Js服务器的方法教程
Mar 30 Javascript
vue的事件绑定与方法详解
Aug 16 Javascript
Vue异步加载about组件
Oct 31 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 Javascript
vue实现分页加载效果
Dec 24 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 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
php str_pad 函数用法简介
2009/07/11 PHP
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
php给图片加文字水印
2015/07/31 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
onkeydown事件解决按回车键直接提交数据的需求
2013/04/11 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
2016/06/12 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
javascript实现滑动解锁功能
2017/03/22 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
Python数据可视化之画图
2019/01/15 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
新学期班主任寄语
2014/01/18 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
党员承诺书怎么写
2014/05/20 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
会计专业自荐信范文
2015/03/05 职场文书
详解Redis瘦身指南
2021/05/26 Redis
MySQL修炼之联结与集合浅析
2021/10/05 MySQL