EasyUI中Tabs标签页的简单使用

最新推荐文章于 2021-09-10 17:09:53 发布

霸道流氓气质

最新推荐文章于 2021-09-10 17:09:53 发布

阅读量774

点赞数 1

分类专栏： EasyUI EasyUI入门学习教程文章标签： tabs

本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/92800269

版权

EasyUI 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

EasyUI入门学习教程

24 篇文章 3 订阅

订阅专栏

场景

效果

属性

tabs	none	返回全部的标签页面板（tab panel）。
resize	none	调整标签页（tabs）容器的尺寸并做布局。
add	options	添加一个新的标签页面板（tab panel），options 参数是一个配置对象，更多详细信息请参见标签页面板（tab panel）属性。当添加一个新的标签页面板（tab panel）时，它将被选中。如需添加一个未选中的标签页面板（tab panel），请记得设置 'selected' 属性为 false。 // add a unselected tab panel $('#tt').tabs('add',{ title: 'new tab', selected: false //... });
close	which	关闭一个标签页面板（tab panel），'which' 参数可以是要被关闭的标签页面板（tab panel）的标题（title）或索引（index）。
getTab	which	获取指定的标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。
getTabIndex	tab	获取指定的标签页面板（tab panel）索引。
getSelected	none	获取选中的标签页面板（tab panel）。下面的实例演示如何获取选中的标签页面板（tab panel）的索引。 var tab = $('#tt').tabs('getSelected'); var index = $('#tt').tabs('getTabIndex',tab); alert(index);
select	which	选择一个标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。
unselect	which	选择一个标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。该方法自版本 1.3.5 起可用。
showHeader	none	显示标签页（tabs）头部。该方法自版本 1.3.5 起可用。
hideHeader	none	隐藏标签页（tabs）头部。该方法自版本 1.3.5 起可用。
exists	which	指示指定的面板是否已存在，'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。
update	param	更新指定的标签页面板（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');
enableTab	which	启用指定的标签页面板（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
disableTab	which	禁用指定的标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。该方法自版本 1.3 起可用。代码实例： $('#tt').tabs('disableTab', 1); // disable the second tab panel.
scrollBy	deltaX	通过指定的像素数滚动标签页（tab）头部，负值表示滚动到右边，正值表示滚动到左边。该方法自版本 1.3.2 起可用。代码实例： // scroll the tab header to left $('#tt').tabs('scroll', 10);

标签页面板（Tab Panel）

标签页面板（tab panel）属性被定义在面板（panel）组件里，下面是一些常用的属性。

名称	类型	描述	默认值
id	string	标签页面板（tab panel）的 id 属性。	null
title	string	标签页面板（tab panel）的标题文字。
content	string	标签页面板（tab panel）的内容。
href	string	加载远程内容来填充标签页面板（tab panel）的 URL。	null
cache	boolean	当设置为 true 时，在设定了有效的 href 特性时缓存这个标签页面板（tab panel）。	true
iconCls	string	显示在标签页面板（tab panel）标题上的图标的 CSS class。	null
width	number	标签页面板（tab panel）的宽度。	auto
height	number	标签页面板（tab panel）的高度。	auto
collapsible	boolean	当设置为 true 时，允许标签页面板（tab panel）可折叠。	false

一些附加的属性。

名称	类型	描述	默认值
closable	boolean	当设置为 true 时，标签页面板（tab panel）将显示一个关闭按钮，点击它就能关闭这个标签页面板（tab panel）。	false
selected	boolean	当设置为 true 时，标签页面板（tab panel）将被选中。	false

实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <script type="text/javascript" src="/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
    <div title="Tab1" style="padding:20px;display:none;">
        tab1
    </div>
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
        tab2
    </div>
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
        tab3
    </div>
</div>
</body>
</html>

霸道流氓气质

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
EasyUI中Tabs标签页的简单使用

场景效果属性 tabs none 返回全部的标签页面板（tab panel）。 resize none 调整标签页（tabs）容器的尺寸并做布局。 add options 添加一个新的标签页面板（tab panel），options 参数是一个配置对象，更多详细信息请参见标签页面板（tab panel）属性。当添加一个新的标...
复制链接

扫一扫