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

 更新时间:2015年11月17日 14:52:21   投稿:mrr  
这篇文章主要介绍了实例代码讲解jquery easyui动态tab页的相关资料,需要的朋友可以参考下

通过使用 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也要引用,浪费就产生了。

相关文章

  • 网站如何做到完全不需要jQuery也可以满足简单需求

    网站如何做到完全不需要jQuery也可以满足简单需求

    据统计,目前全世界57.3%的网站使用它。也就是说,10个网站里面,有6个使用jQuery。如果只考察使用工具库的网站,这个比例就会上升到惊人的91.7%
    2013-06-06
  • 分享精心挑选的23款美轮美奂的jQuery 图片特效插件

    分享精心挑选的23款美轮美奂的jQuery 图片特效插件

    jQuery是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择。其中,jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入各种精美的图片展示效果
    2012-08-08
  • 基于jquery实现左右按钮点击的图片切换效果

    基于jquery实现左右按钮点击的图片切换效果

    这篇文章主要介绍了基于jquery实现左右按钮点击的图片切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JQuery点击事件回到页面顶部效果的实现代码

    JQuery点击事件回到页面顶部效果的实现代码

    下面小编就为大家带来一篇JQuery点击事件回到页面顶部效果的实现代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • layui文件上传实现代码

    layui文件上传实现代码

    这篇文章主要为大家详细介绍了layui导航栏效果的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • jQuery提交多个表单的小例子

    jQuery提交多个表单的小例子

    这篇文章介绍了jQuery提交多个表单的小例子,有需要的朋友可以参考一下
    2013-06-06
  • Jquery 数据选择插件Pickerbox使用介绍

    Jquery 数据选择插件Pickerbox使用介绍

    目前市面上很少见或几乎没有这数据(对象)选择插件.比如,点击input , select 元素时弹出div(窗口),载入数据让用户选择数据,选择后在填充回对应的元素.
    2012-08-08
  • jquery怎样实现ajax联动框(二)

    jquery怎样实现ajax联动框(二)

    ajax联动框想必大家早有所耳闻,接下来将介绍jquery实现另一种形式的联动框,右边的联动框用jquery生成,仿照上篇的js方法修改的,感兴趣的你可以参考下希望可以帮助到你
    2013-03-03
  • 使用jQuery ajaxupload插件实现无刷新上传文件

    使用jQuery ajaxupload插件实现无刷新上传文件

    项目中会经常用到AJAX无刷新上传图片,但是iframe上传和flash插件都是比较复杂的,所以就找了一个jquery的插件。下面通过实例代码给大家介绍使用jQuery ajaxupload插件实现无刷新上传文件功能,需要的朋友参考下吧
    2017-04-04
  • jQuery实现动画效果的简单实例

    jQuery实现动画效果的简单实例

    本篇文章主要是对jQuery实现动画效果的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01

最新评论