Jquery EasyUI tabs处理

一 获取选中的 Tab

1.   // 获取选中的 tab panel 和它的 tab 对象

2.  var pp = $(‘#tt‘).tabs(‘getSelected‘);

3.  var tab = pp.panel(‘options‘).tab;    // 相应的 tab 对象

注:根据指定tab的title 获取tab对象接口使用方式如下:

var tab = $(‘#tt‘).tabs(‘getTab‘,‘title‘),

二 更新特定的选项卡面板 可使用update方法,param参数包含2个属性:

tab: 将被更新的选项卡。

options: 选项卡相关配置项。

//当前被选中的tab
var current_tab = $(‘#frame_tabs‘).tabs(‘getSelected‘);
$(‘#frame_tabs‘).tabs(‘update‘,{
     tab:current_tab,
     options : {
          content : ‘<iframe scrolling="auto" frameborder="0"  src="‘+URL+‘" style="width:100%;height:100%;"></iframe>‘,
      //或者 href : ‘‘;
     }
});

1.创建tab,同时捕捉 ‘onSelect‘ 事件

  $(‘#tt‘).tabs({
      border:false,
      onSelect:function(title){
          alert(title+‘ is selected‘);
      }
  });

  2.增加新的tab panel

  $(‘#tt‘).tabs(‘add‘,{
      title:‘New Tab‘,
      content:‘Tab Body‘,
      closable:true
  });

三 tabs 动态加载iframe

 $(‘#EasyTabs‘).tabs(‘add‘, {
                    title: tabTitle,
                    content: ‘<iframe frameborder="0"  src="‘ + ContentUrl + ‘" style="width:100%;height:100%;"></iframe>‘,
                    iconCls: ‘icon-tip‘,
                    closable: true,
                    tools: [{
                        iconCls: ‘icon-mini-refresh‘,
                        handler: function () {
                            alert(‘refresh‘);
                        }
                    }]
                });
EasyUI相同的Tab只打开一个(即EasyUI方法的调用方法)
function addTabA(title){
    if ($(‘#tt‘).tabs(‘exists‘, title)){
        $(‘#tt‘).tabs(‘select‘, title);
    } else {
         $(‘#tt‘).tabs(‘add‘,{
         title:title,
         content:‘Tab Body ‘ ,
         iconCls:‘icon-save‘,
         closable:true
        });
    }
}

jQuery EasyUI的其他方法调用方式相似
例如:layout 默认收起
$(‘#layout‘).layout(‘collapse‘, ‘north‘);
时间: 2024-11-07 13:54:34

Jquery EasyUI tabs处理的相关文章

jquery.easyui.tabs 中的首个tabs被最后tabs覆盖的问题解决方法

这是由于tabs对href重载的的问题导致,因此我们需要将href更改为其它自定义的属性即可避免此问题的发生. 解决方法如下: 第一步页面端: 循环体开始 <li> <div><a target="tagFrame" href="@n.Url" ><span class="icon icon-sys"> </span>@n.Title</a></div> <

实现jquery EasyUI tabs选项卡关闭图标后加载自定义事件

项目中当关闭tabs选项卡时,底部footer需要通过javascript重新定位calcFooter(),如何实现呢?选项卡上的关闭图标的方法是easyui自带的,calcFooter()写在onClose中不起作用,API中没有关闭后的方法,但有个关闭之前的方法onBeforeClose,在onBeforeClose方法中先实现onClose()方法,再calcFooter(),再return false,这样就达到要的效果 代码如下: $('#tt').tabs({ onBeforeClo

jQuery EasyUI实现关闭全部tabs

有时候当我们打开很多tabs选项卡时,要关闭它只能一个一个的进行关闭 显然太麻烦,这时可以在选项卡的最右边添加一个按钮 实现关闭全部. 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>index.html</title> <meta http-equiv="keywords&qu

jquery easyUi 根据数据动态创建tabs标签

<link rel="stylesheet" type="text/css" href="tabs.css"> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.easyui.mi

网站前端_EasyUI.基础入门.0007.使用EasyUI Tabs组件的最佳姿势?

1. 基础选项卡 <div id="t" class="easyui-tabs" data-options="width:500,height:300">     <div data-options="title:'About',closable:true,bodyCls:'tabbody'">         <p style="font-size:14px">jQue

【转】 jquery easyui Tab 引入页面的问题

原地址:http://blog.csdn.net/superdog007/article/details/8225518 jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页)上的内容:“href远程请求”和“content本地内容”,本文就两种方式的优缺点进行简单分析和思考. 两者特点: href方式加载数据的特点: 被加载的页面只有body元素内部的内容才会被加载,也就是jQuery的ajax请求的只是html片段. 加载远程url时有遮罩效果,也就是“等待中……”效果

jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

转自:http://www.cnblogs.com/sunjie9606/archive/2012/09/13/2683636.html 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout" 等 处理方法: 在html片段加载完毕后使用 Js代码 $.parser.parse(context) 即可重新渲染. 实现原理: 首先附上jquery.parser.js的源码 Js代码 (function($){ $.parser

套用JQuery EasyUI列表显示数据、分页、查询

声明,本博客从csdn搬到cnblogs博客园了,以前的csdn不再更新,朋友们可以到这儿来找我的文章,更多的文章会发表,谢谢关注! 有时候闲的无聊,看到extjs那么肥大,真想把自己的项目改了,最近看到一款轻型的UI感觉不错,但是在网上找了好多教程,但是没有一个是完全是C#asp.net写的 无耐下,自己写了下,感觉效果不错,故拿出来和大学分享一下,希望可以抛砖引玉作用. 由于好多人都只是拷贝代码,故在此全用图片作说明. 图片效果图1 这个界面是上左右下结构 左边是一棵树 右边是一个表格 上部

jQuery EasyUI 右键菜单--关闭标签/选项卡

目录结构: noContextMenu.js 文件内容如下: $(function(){ //屏蔽右键菜单 $(document).bind("contextmenu", function(e){ return false; }); }); 效果图: 方式 一: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOC