EasyUI之Tabs基本用法

最新推荐文章于 2022-06-06 16:55:20 发布
最新推荐文章于 2022-06-06 16:55:20 发布
阅读量308 收藏
点赞数
文章标签： javascript python ui ViewUI
原文链接：https://my.oschina.net/u/2612473/blog/1826948
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

依赖

  • panel
  • linkbutton
创建标签页（Tabs）

1、通过标记创建标签页（Tabs）

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="keywords" content="jquery,ui,easy,easyui,web">
    <meta name="description" content="easyui help you build your web page easily!">
    <title>jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
</head>

<body>
    <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
        <div title="Tab1" style="padding:10px;">
            tab1
        </div>
        <div title="Tab2" data-options="closable:true" style="padding:10px;">
            tab2
        </div>
        <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:10px;">
            tab3
        </div>
    </div>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript">
	$(function(){
		$("#tt").tabs({
			selected:2,
            //  onBeforeClose:function(title){
            //     return confirm("are you sure you want to close" + title)
            // }
            onBeforeClose:function(title,index){
                var target = this;
                $.messager.confirm("Confirm","Are  you sure your want to close" + title,function(r){
                    if(r){
                        var opts = $(target).tabs("options");
                        var bc = opts.onBeforeClose;
                        opts.onBeforeClose = function(){};
                        $(target).tabs("close",index);
                        opts.onBeforeClose = bc;

                    }
                });
                return false;
            }
		})
       
	});
	//设置默认选项卡可以在div的 data-options="closable:true,selected:true" 或者js设置
	</script>
</body>

</html>

2、编程创建标签页（Tabs） 

<!DOCTYPE html> 
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>jQuery EasyUI Demo</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../../plugins/easyUI/themes/material/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../plugins/easyUI/themes/icon.css">
    <!-- <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css"> -->
</head>
<body style="padding:15px;">
    <div id="tt" style="">
    </div>
    <script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <script src="../../plugins/easyUI/jquery.easyui.min.js"></script>
    <script>
    var height = $(window).height()-30;
    //现在我们编程创建标签页（Tabs），我们同时捕捉 'onSelect' 事件。
    $("#tt").tabs({
        border: true,
        //width:"100%",不设置100% 默认也是100%
        height:height,
		selected:1,
        //fit:true,设置后效果不好
        onSelect: function(title) {
            console.log(title + ' is selected');
        }
    })
    //添加新的标签页面板（tab panel）
    $('#tt').tabs('add', {
        title: 'New Tab',
        content: 'Tab Body',
        closable: true,
        tools: [{
            iconCls: 'icon-mini-refresh',
            handler: function() {
                alert('refresh');
            }
        }]
    });
    $('#tt').tabs('add', {
        title: 'Next Tab',
        content: 'next Tab Body',
        closable: true,
        
    });
    </script>
</body>

</html>

 标签页方法

名称参数描述
optionsnone返回标签页（tabs）选项（options）。
tabsnone返回全部的标签页面板（tab panel）。
resizenone

调整标签页（tabs）容器的尺寸并做布局。

setTimeout(function(){$('#tt').tabs('resize', {
                width: '100%'
})},400)

addoptions

添加一个新的标签页面板（tab panel），options 参数是一个配置对象，更多详细信息请参见标签页面板（tab panel）属性。
当添加一个新的标签页面板（tab panel）时，它将被选中。
如需添加一个未选中的标签页面板（tab panel），请记得设置 'selected' 属性为 false。

// add a unselected tab panel

$('#tt').tabs('add',{

title: 'new tab',

selected: false

//...

});

closewhich关闭一个标签页面板（tab panel），'which' 参数可以是要被关闭的标签页面板（tab panel）的标题（title）或索引（index）。
getTabwhich获取指定的标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。
getTabIndextab获取指定的标签页面板（tab panel）索引。
getSelectednone获取选中的标签页面板（tab panel）。下面的实例演示如何获取选中的标签页面板（tab panel）的索引。

var tab = $('#tt').tabs('getSelected');

var index = $('#tt').tabs('getTabIndex',tab);

alert(index);

selectwhich选择一个标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。
unselectwhich选择一个标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。该方法自版本 1.3.5 起可用。
showHeadernone显示标签页（tabs）头部。该方法自版本 1.3.5 起可用。
hideHeadernone隐藏标签页（tabs）头部。该方法自版本 1.3.5 起可用。
existswhich指示指定的面板是否已存在，'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。
updateparam更新指定的标签页面板（tab panel），param 参数包含两个属性：
tab：被更新的标签页面板（tab panel）。
options：面板（panel）的选项（options）。

代码实例：

// update the selected panel with new title and content

var tab = $('#tt').tabs('getSelected'); // get selected panel

$('#tt').tabs('update', {

tab: tab,

options: {

title: 'New Title',

href: 'get_content.php' // the new content URL

}});

// call 'refresh' method for tab panel to update its content

var tab = $('#tt').tabs('getSelected'); // get selected panel

tab.panel('refresh', 'get_content.php');

enableTabwhich启用指定的标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。该方法自版本 1.3 起可用。

代码实例：

$('#tt').tabs('enableTab', 1); // enable the second tab panel

$('#tt').tabs('enableTab', 'Tab2'); enable the tab panel that has 'Tab2' title

disableTabwhich禁用指定的标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。该方法自版本 1.3 起可用。
代码实例：

$('#tt').tabs('disableTab', 1); // disable the second tab panel.

 标签页属性

widthnumber标签页（Tabs）容器的宽度。auto
heightnumber标签页（Tabs）容器的高度。auto
plainboolean当设置为 true 时，就不用背景容器图片来呈现 tab 条。false
fitboolean当设置为 true 时，就设置标签页（Tabs）容器的尺寸以适应它的父容器。false
borderboolean当设置为 true 时，就显示标签页（Tabs）容器边框。true
scrollIncrementnumber每按一次 tab 滚动按钮，滚动的像素数。100
scrollDurationnumber每一个滚动动画应该持续的毫秒数。400
toolsarray,selector放置在头部的左侧或右侧的工具栏，可能的值：
1、数组，指示工具组，每个工具选项都和链接按钮（Linkbutton）一样。
2、选择器，指示包含工具的 <div>。

代码实例：
通过数组定义工具。

$('#tt').tabs({

tools:[{

iconCls:'icon-add',

handler:function(){

alert('add')

}

},{

iconCls:'icon-save',

handler:function(){

alert('save')

}

}]

});

通过已有的 DOM 容器定义工具。

$('#tt').tabs({

tools:'#tab-tools'

});

<div id="tab-tools">

<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-add"></a>

<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a>

</div>

null
toolPositionstring工具栏位置。可能的值：'left'、'right'。该属性自版本 1.3.2 起可用。right
tabPositionstring标签页（tab）位置。可能的值：'top'、'bottom'、'left'、'right'。该属性自版本 1.3.2 起可用。top
headerWidthnumber标签页（tab）头部宽度，只有当 tabPosition 设置为 'left' 或 'right' 时才有效。该属性自版本 1.3.2 起可用。150
tabWidthnumbertab 条的宽度。该属性自版本 1.3.4 起可用。auto
tabHeightnumbertab 条的高度。该属性自版本 1.3.4 起可用。27
selectednumber初始化选定的标签页索引。该属性自版本 1.3.5 起可用。0
showHeaderboolean当设置为 true 时，显示标签页（tab）头部。该属性自版本 1.3.5 起可用。true

标签页事件

名称参数描述
onLoadpanel当一个 ajax 标签页面板（tab panel）完成加载远程数据时触发。
onSelecttitle,index当用户选择一个标签页面板（tab panel）时触发。
onUnselecttitle,index当用户未选择一个标签页面板（tab panel）时触发。该事件自版本 1.3.5 起可用。
onBeforeClosetitle,index当一个标签页面板（tab panel）被关闭前触发，返回 false 就取消关闭动作。下面的实例演示如何在关闭标签页面板（tab panel）前显示确认对话框。

$('#tt').tabs({

onBeforeClose: function(title){

return confirm('Are you sure you want to close ' + title);

}

});

// using the async confirm dialog

$('#tt').tabs({

onBeforeClose: function(title,index){

var target = this;

$.messager.confirm('Confirm','Are you sure you want to close '+title,function(r){

if (r){

var opts = $(target).tabs('options');

var bc = opts.onBeforeClose;

opts.onBeforeClose = function(){}; // allowed to close now

$(target).tabs('close',index);

opts.onBeforeClose = bc; // restore the event function

}

});

return false; // prevent from closing

}

});

onClosetitle,index当用户关闭一个标签页面板（tab panel）时触发。
onAddtitle,index当一个新的标签页面板（tab panel）被添加时触发。
onUpdatetitle,index当一个标签页面板（tab panel）被更新时触发。
onContextMenue, title,index当一个标签页面板（tab panel）被右键点击时触发。

 

转载于:https://my.oschina.net/u/2612473/blog/1826948

weixin_33795833
关注
easyUI快速入门第四讲——easyUI中的tabs（选项卡）组件
李阿昀的博客
10-29 2496
tabs（选项卡）组件的概述 选项卡会显示一批面板，但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。 tabs（选项卡）组件的使用 首先，在所在项目的WebContent目录下新建一个04-tabs目录，并在该目录下新建一个04-tabs.html页面。 <!DOCTYPE html> <html> <h...
EasyUi之Tabs(选项卡)
Lzxccas的博客
06-24 2149
Tabs控件什么是TabsTabs的使用案例Tabs的属性Tabs的事件Tabs的方法Tabs面板创建一个选项卡右键关闭tabs 什么是Tabs 选项卡是最流行的导航模式之一(与菜单栏和垂直导航一样)。 选项卡最大的优点是用户很熟悉，而且经常是持久的内容，所以即使用户在网站或应用程序中跳出刚浏览过的内容，他们也不会迷失。 官方示例 成品示例 Tabs的使用案例 通过标签创建选项卡 通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给标签添加一个类ID’easyui-ta
EasyUI-标签(Tabs)用法
weixin_33676492的博客
10-08 235
用法示例 创建tabs 1. 经由标记创建Tabs 从标记创建Tabs更容易，我们不需要写任何JavaScript代码。记住把 'easyui-tabs' 类添加到&lt;div/&gt;标记，每个tab panel 经由子&lt;div/&gt;标记被创建，其用法与Panel一样。 1.  &lt;div id="tt" class="easyui-tabs" style="width:500p...
EasyUI的tabs使用
liumengcheng的专栏
04-14 3306
html代码： 项目内容。。。 应用程序信息。。。。 部署项目。。。 日志列表。。。 js代码：
EasyUI中Tabs标签页的简单使用
BADAO_LIUMANG_QIZHI的博客
06-18 804
场景 效果 属性 tabs none 返回全部的标签页面板（tab panel）。 resize none 调整标签页（tabs）容器的尺寸并做布局。 add options 添加一个新的标签页面板（tab panel），options 参数是一个配置对象，更多详细信息请参见标签页面板（tab panel）属性。 当添加一个新的标...
Easyui 中 Tabsr的常用方法
weixin_34062469的博客
10-20 149
注：index必须为变量      tab页从0开始 //新增一个tab页var index = 0;$('#tt').tabs('add',{ title: 'Tab'+index, content: '&lt;div style="padding:10px"&gt;Content'+index+'&lt;/div&gt;', ...
jQuery easyui刷新当前tabs的方法
10-21
jQuery EasyUI提供了一个简洁的API来实现这一功能，主要涉及`tabs`组件的`update`方法。这篇文章将深入探讨如何使用这个方法以及相关的`param`参数。 首先，我们要理解`tabs`组件是jQuery EasyUI中的一个核心组件，...
jQuery EasyUI 获取tabs的实例解析
10-20
jQuery EasyUI是一个基于jQuery的UI库，它提供了一系列易于使用的组件，如tabs、tree等，用于快速构建美观的Web界面。 首先，我们来看如何实现点击tree节点时添加相应的tabs。在描述中提到的`addtabs`函数是这个...
easyui的tabs update正确用法分享
12-18
一直以为 tabs update 是 easyui 的 bug，最近在用的时候发现可以这样解决复制代码 代码如下:function updateTab(url){  var tab = $(‘#tt’).tabs(‘getSelected’);  $(“#tt”).tabs(‘update’,{ tab: tab,...
easyui的tabs控件
小七
06-24 1164
easyui的tabs控件前言一、先去看看前期做的前台和后台吧二、了解什么是tabs控件三、tabs属性的使用四、tabs事件的使用五、tabs方法的使用六、实现tabs的步骤1、我们先建两个jsp备用2、使用easyui中的模板tabs控件3、在index.js中再次使用tabs控件中的模板，进行修改 前言 因为前面做了easyui的前端和后端做铺垫，所以今天还是搞前端要实现的tabs控件 一、先去看看前期做的前台和后台吧 https://blog.csdn.net/qq_46964039/article
easyui tabs 操作
diaosui7570的博客
07-03 107
//添加 刷新 指定刷新 define(function (require, exports, module) { if (!window.cms) window.cms = {}; cms = { //添加新Tab页 addTab: function (data) { var co...
EasyUI之选项卡Tabs
sunpy
04-08 1560
1.样式 选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。 2.练习1：构建选项卡 tabs <div id="tabsID" class="easyui-tabs" style="width:500px;height:250px;" data-option
在easyui中如何调用其它tab中的function的方法
沉默的游鱼
06-06 326
使用easyui时，如何实现多个tab之间的方法互相调用
easyui tabs hideHeader的用法
遛弯的兔子
05-03 2192
今天用了easyui-tabs来加载了嵌入的页面，但是项目有需求不显示tab的头部信息，找了api  发现有这个方法hideHeader（该方法自1.3.5版开始可用）注意版本 tabs用例：             data-options="                 fit:true,                 border:false,
easyUI之tabs的应用
WithYou_wy的博客
12-22 648
最近用到的easyUI的知识比较多，今天就记录一下easyUI中tabs的用法，先显示效果图：
easyui tree和tabs控件的基本使用
weixin_52639224的博客
09-10 516
一、tree的使用 1.在demo文件中找到tree 2.打开tree文件夹，将josn文件复制到web项目中 3.在左边菜单栏里面使用代码： <ul id="tt"></ul> 4.在js目录下建一个文本 index.js 5.将api的代码复制index.js里面 $('#tt').tree({ url:'tree_data.json1' }); 注意：url要与复制的josn文件一致，$()要与界面的id一致 运行项目..
easyui 获取特定页签tab
weixin_33720452的博客
05-17 435
var findTab=$('#mytabs').tabs('getTab','财务信息').panel('options').tab; var findTabIndex = $('#tab').tabs('getTabIndex',findTab); $("#tabs").tabs("select", findTabIndex); var pp = $('#tt').tabs(...
解决设置easyUI tabs onSelect事件时提示tabs未定义的方法
hmwz0001的博客
07-09 1417
//解决设置easyUI tabs onSelect事件时提示tabs未定义的方法 //先定义一个变量，这个变量是标识是否为第一次使用，因为第一次使用时说明tabs是在初始化状态，此时绑定onSelect事件会弹出错误提示：tabs未定义 //当判断为真时，置为假，当为假时再绑定onSelect事件就不会再报错了！ var wdz_firstSelect = true; // 使用一个变量在判断是不是第一次 var ydz_firstSelect = true; // 使用一个变量在判断是不是第一次
easyUI+bootstrap：详解工作台制作中的Tabs方法
本教程提供了一个实用的指导，帮助读者理解如何在实际项目中整合easyUI和bootstrap，特别是使用tabs功能来组织和呈现复杂的工作站内容，这对于任何希望提升前端工作效率或学习这两种框架结合应用的开发者来说，都是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值