实例代码讲解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也要引用，浪费就产生了。

赞 (0)

相关推荐

  • jQuery Easyui学习之datagrid 动态添加、移除editor

    jQuery Easyui学习之datagrid 动态添加、移除editor

    使用easyui行编辑的时候完成编辑的功能比较简单,但是如果要根据一个框的值动态改变别的值或者编辑的时候禁用某个框的时候就比较麻烦了. 比如像下面这样:添加行的时候每个值都是手动输入,修改的时候第一个值不能修改.我们来看下怎么实现这样的效果. easyui本身是不提供这么细节的功能的,需要我们自己拓展下: 在编辑的时候移除第一列的editor属性,添加的时候,添加第一列的属性. //扩展datagrid:动态添加删除editor $.extend($.fn.datagrid.methods, {

  • jQuery EasyUI 布局之动态添加tabs标签页

    jQuery EasyUI 布局之动态添加tabs标签页

    在没看下文之前先给大家简单介绍easyui相关知识. easyui是一种基于jQuery的用户界面插件集合.ddd easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能. 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面. easyui是个完美支持HTML5网页的完整框架. easyui节省您网页开发的时间和规模. easyui很简单但功能强大的. 通过使用 jQuery EasyUI 可以很容易地添加 Tabs.您只需要调用

  • EasyUI的treegrid组件动态加载数据问题的解决办法

    搜遍了treegrid源码和文档发现treegrid是扩展自datagrid和tree的,不过以往利用datagrid的reload方法加参数的方式加载查询结果数据,可是treegrid却只执行reload不能加载带参数的查询结果,可能是做了限制,如下代码不能加载查询结果: 复制代码 代码如下: <table id='treegrid' class='easyui-treegrid' url='/User/List'></table>$('#treegrid').treegrid(

  • Jquery easyui 实现动态树

    在上篇文章给大家介绍了jquery中EasyUI实现异步树,本文给大家介绍jquery easyui实现动态树. 首先是在jsp页面中引入相关的js文件 在body中加入流程列表,通过后天拼接json数据 具体内容请看下面代码详情吧. 首选在jsp页面中引入相关的js <link rel="stylesheet" type="text/css" href="<%=path %>/css/jquery_easyui/themes/defau

  • jQuery easyui datagrid动态查询数据实例讲解

    jQuery easyui datagrid动态查询数据实例讲解

    该插件组小巧使用方便,以下是一个从前台提交查询条件,从MSSQL返回json数据的一个事例 HTML前端代码 复制代码 代码如下: <?php include_once("auth.php"); ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel=&qu

  • 实例代码讲解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

  • jQuery判断邮箱格式对错实例代码讲解

    废话不多说了,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>检测Email地址格式是否正确</title> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"><

  • 实例代码讲解JAVA多线程

    进程与线程 进程是程序的一次动态执行过程,它需要经历从代码加载,代码执行到执行完毕的一个完整的过程,这个过程也是进程本身从产生,发展到最终消亡的过程.多进程操作系统能同时达运行多个进程(程序),由于 CPU 具备分时机制,所以每个进程都能循环获得自己的CPU 时间片.由于 CPU 执行速度非常快,使得所有程序好像是在同时运行一样. 多线程是实现并发机制的一种有效手段.进程和线程一样,都是实现并发的一个基本单位.线程是比进程更小的执行单位,线程是进程的基础之上进行进一步的划分.所谓多线程是指一个进

  • 实例代码讲解c++ 继承特性

    --派生类需要自己的构造函数. 派生类中可以根据需要添加额外的数据成员和成员函数,甚至可以给予继承的原成员函数新的定义. 基类指针或引用可指向派生对象,反过来则只能使用强制类型转换. 派生类对象可使用基类的非私有成员. 可使用派生对象初始化基类对象或赋值. 一般不允许将基类对象赋给派生类对象(上面第三条),特殊情况下可以. 已有派生类对象初始化创建的派生类对象. 已有派生类对象给另一个派生类对象赋值. 派生类对象的析构函数被调用后会自动调用基类的析构函数. C++11增加了允许继承构造函数的机制

  • 实例代码讲解Python 线程池

    大家都知道当任务过多,任务量过大时如果想提高效率的一个最简单的方法就是用多线程去处理,比如爬取上万个网页中的特定数据,以及将爬取数据和清洗数据的工作交给不同的线程去处理,也就是生产者消费者模式,都是典型的多线程使用场景. 那是不是意味着线程数量越多,程序的执行效率就越快呢. 显然不是.线程也是一个对象,是需要占用资源的,线程数量过多的话肯定会消耗过多的资源,同时线程间的上下文切换也是一笔不小的开销,所以有时候开辟过多的线程不但不会提高程序的执行效率,反而会适得其反使程序变慢,得不偿失. 所以,如

  • ASP.NET操作MySql数据库的实例代码讲解

    一.把MySql.Data.dll放到BIN目录下. 二.这是aspx.cs的全部源码,修改参数直接运行即可!   using MySql.Data.MySqlClient; using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; publ

  • JS实现JSON.stringify的实例代码讲解

    JSON.stringify是浏览器高版本带的一个将JS的Objtect对象转换为JSON字符串的一个方法,不过再IE6下面,并不存在JSON这一对象,因此,用到此方法时,需要写一套兼容性的代码. JSON.stringify的一些规则以及注意点:当对象为数字,null,boolean的时候,直接转换为相应的字符串就可以了. 但是string,function,undefined,object,array等,需要特殊处理. 1.undefined,该类型使用JSON.stringify处理的时候

  • Spring boot + mybatis + orcale实现步骤实例代码讲解

    Spring boot + mybatis + orcale实现步骤实例代码讲解

    接着上次的实现, 添加 mybatis 查询 orcale 数据库 第一步: 新建几个必须的包, 结果如下 第二步: 在service包下新建personService.java 根据名字查person方法接口 package com.example.first.service; import com.example.first.entity.Person; public interface personService { Person queryPersonByName(String name

  • Android Dialog对话框实例代码讲解

    Dialog的基本方法 //创建Dialog AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this); //设置标题图标 builder.setIcon(R.drawable.ic_launcher); //设置标题 builder.setTitle("这是一个对话框"); //设置信息 builder.setMessage("是否要跳转?"); //确定按钮 setPosit

  • vue slot与传参实例代码讲解

    插槽分为默认插槽和具名插槽: 默认插槽: //父组件 <div> <h3>父组件</h3> <testChild> <div>默认插槽</div> </testChild> </div> //子组件 <div> <h4>子组件</h4> <slot></slot> </div> 具名插槽: 注意:具名插槽需要包裹在  template  标

随机推荐