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

站长资源 2024/11/29 佚名

2 0 1

通过使用 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="/UploadFiles/2021-04-02/'+href+'">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_easyui_tab页, jquery_easyui_tab