场景

效果

属性

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>

EasyUI中Tabs标签页的简单使用相关推荐

Ant Design Vue中tabs标签页切换导致页面变宽的问题
问题在使用Ant Design Vue进行开发的时候,使用了tabs标签页,在页里面套用了表格,但是在页面切换后,会发现页面的width会变大差不多2倍,这样会导致页面一些结构的样式发生变化. 解决 ...
【Axure】制作Tabs标签页
最近工作中使用到了Tabs标签页,所以写篇操作步骤文,以免自己隔段时间不用忘记后供查看. 1.先把静态的原型制作好,如下图: 2. 把放内容的区域转换成动态面板,双击打开面板状态管理,添加面板,如下图 ...
Vue：利用Vue生成的网页，在浏览器中的标签页中的图标与标题怎么修改为自己的？
Vue:利用Vue生成的网页,在浏览器中的标签页中的图标与标题怎么修改为自己的? 在解决这个问题的时候,在网上搜到了许多答案,可以说是众说纷纭,作者结合了多个答案,最后解决了这个问题,下面把用到的资源 ...
如何获取FragmentTabHost中指定标签页的Fragment
使用FragmentTabHost构建了包含几个标签页的界面,如何获取指定标签页的Fragment? How to get Fragment in FragmentTabHost? TabHost中F ...
Easyui中input标签设置只读
Easyui中input标签设置只读直接在input标签中设置属性:readonly="readonly". 具体例子: <input class="easyui ...
Tabs标签页修改样式
ElementUI 的 Tabs标签页修改样式去除底部灰色线条 <style lang="scss" scoped> //去掉el-tab-pane底部灰色线条 /d ...
easyui打开新的选项卡_Easyui Tabs 标签页/选项卡_EasyUI 插件
通过 $.fn.tabs.defaults 重写默认的 defaults. The tabs display a collection of panel. It shows only one tab ...
vue 循环tabs 标签页组件_Vue render函数实战--实现tabs选项卡组件
用过Element ui库的童鞋肯定知道组件,简单.好用.可以自定义标签页,不知道广大童鞋们在刚开始使用组件的时候有没有想过它是如何实现的?我咋刚开始使用组件的时候就有去想过,也想去实现一个超级简单的 ...
对话框中加入标签页的5种方法
(2008-07-08 15:25 博客搬家拾遗) 标签页是MFC控件里有一点难用的东西,今天看到了一篇相关文章,觉得写得比较系统,而且浅显易懂,特地转来,与大家分享的同时也留备自己以后查用. (以下 ...

EasyUI中Tabs标签页的简单使用

场景

效果

属性

标签页面板（Tab Panel）

实现

EasyUI中Tabs标签页的简单使用相关推荐

最新文章

热门文章