EasyUI中Tabs标签页的简单使用

最新推荐文章于 2022-06-06 16:55:20 发布
最新推荐文章于 2022-06-06 16:55:20 发布
阅读量881 收藏 1
点赞数 1
分类专栏： 前端那些骚操作 文章标签： tabs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/BADAO_LIUMANG_QIZHI/article/details/92800269
版权
博客围绕标签页面板展开，介绍了其场景、效果、属性等内容。标签页面板属性定义在面板组件里，还提及了常用属性和一些附加属性，最后提到了实现相关内容。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

场景

效果

属性


tabs		none返回全部的标签页面板（tab panel）。
resizenone调整标签页（tabs）容器的尺寸并做布局。
addoptions添加一个新的标签页面板（tab panel），options 参数是一个配置对象，更多详细信息请参见标签页面板（tab panel）属性。
当添加一个新的标签页面板（tab panel）时，它将被选中。
如需添加一个未选中的标签页面板（tab panel），请记得设置 'selected' 属性为 false。 
 
  1. // add a unselected tab panel
  2. $('#tt').tabs('add',{
  3. title: 'new tab',
  4. selected: false
  5. //...
  6. });
closewhich关闭一个标签页面板（tab panel），'which' 参数可以是要被关闭的标签页面板（tab panel）的标题（title）或索引（index）。
getTabwhich获取指定的标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。
getTabIndextab获取指定的标签页面板（tab panel）索引。
getSelectednone获取选中的标签页面板（tab panel）。下面的实例演示如何获取选中的标签页面板（tab panel）的索引。 
 
  1. var tab = $('#tt').tabs('getSelected');
  2. var index = $('#tt').tabs('getTabIndex',tab);
  3. 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）。

代码实例： 
 
  1. // update the selected panel with new title and content
  2. var tab = $('#tt').tabs('getSelected'); // get selected panel
  3. $('#tt').tabs('update', {
  4. tab: tab,
  5. options: {
  6. title: 'New Title',
  7. href: 'get_content.php' // the new content URL
  8. }
  9. });
  10.  
  11. // call 'refresh' method for tab panel to update its content
  12. var tab = $('#tt').tabs('getSelected'); // get selected panel
  13. tab.panel('refresh', 'get_content.php');
enableTabwhich启用指定的标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。该方法自版本 1.3 起可用。

代码实例： 
 
  1. $('#tt').tabs('enableTab', 1); // enable the second tab panel
  2. $('#tt').tabs('enableTab', 'Tab2'); enable the tab panel that has 'Tab2' title
disableTabwhich禁用指定的标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。该方法自版本 1.3 起可用。

代码实例： 
 
  1. $('#tt').tabs('disableTab', 1); // disable the second tab panel.
scrollBydeltaX通过指定的像素数滚动标签页（tab）头部，负值表示滚动到右边，正值表示滚动到左边。该方法自版本 1.3.2 起可用。

代码实例： 
 
  1. // scroll the tab header to left
  2. $('#tt').tabs('scroll', 10);

标签页面板（Tab Panel）

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

名称类型描述默认值
idstring标签页面板（tab panel）的 id 属性。null
titlestring标签页面板（tab panel）的标题文字。 
contentstring标签页面板（tab panel）的内容。 
hrefstring加载远程内容来填充标签页面板（tab panel）的 URL。null
cacheboolean当设置为 true 时，在设定了有效的 href 特性时缓存这个标签页面板（tab panel）。true
iconClsstring显示在标签页面板（tab panel）标题上的图标的 CSS class。null
widthnumber标签页面板（tab panel）的宽度。auto
heightnumber标签页面板（tab panel）的高度。auto
collapsibleboolean当设置为 true 时，允许标签页面板（tab panel）可折叠。false

一些附加的属性。

名称类型描述默认值
closableboolean当设置为 true 时，标签页面板（tab panel）将显示一个关闭按钮，点击它就能关闭这个标签页面板（tab panel）。false
selectedboolean当设置为 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快速入门第四讲——easyUI中的tabs（选项卡）组件
李阿昀的博客
10-29 2667
tabs（选项卡）组件的概述 选项卡会显示一批面板，但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。 tabs（选项卡）组件的使用 首先，在所在项目的WebContent目录下新建一个04-tabs目录，并在该目录下新建一个04-tabs.html页面。 <!DOCTYPE html> <html> <h...
EasyUI的tabs使用
liumengcheng的专栏
04-14 3350
html代码： 项目内容。。。 应用程序信息。。。。 部署项目。。。 日志列表。。。 js代码：
EasyUI-标签(Tabs)用法
weixin_33676492的博客
10-08 271
用法示例 创建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基本用法
weixin_33795833的博客
06-08 364
2019独角兽企业重金招聘Python工程师标准>>> ...
JQuery EasyUI TabPanel
weixin_34343689的博客
11-02 161
  1、属性 名称 类型 说明 默认值 width number Tabs 容器的宽度。 auto height number Tabs 容器的高度。 auto plain boolean True 就不用背景容器图...
jQuery EasyUI 布局之动态添加tabs标签页
10-23
Tabs 是一种方便的信息组织方式，可以将多个内容区域分割到不同的标签页中，用户可以通过点击标签在各个内容之间切换。在本文中，我们将探讨如何通过调用 `add` 方法来动态添加 tabs。 首先，我们需要创建一个基础...
jQuery EasyUI API 中文文档 – Tabs标签页/选项卡
01-19
Tabs 标签页/选项卡 用$.fn.tabs.defaults重写defaults。 依赖 panel linkbutton 用法示例 创建tabs 1、 经由标记创建Tabs 从标记创建Tabs更容易，我们不需要写任何JavaScript代码。记住把 ‘easyui-tabs’ 类添加...
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
10-28
jQuery EasyUI是一个基于...通过上述的API，开发者能够实现对jQuery EasyUI中Tabs标签页/选项卡组件的全面控制。掌握这些API不仅能够帮助开发人员构建标准的用户界面，也能通过扩展和定制来满足更多个性化的业务需求。
jQuery easyui刷新当前tabs的方法
10-21
在jQuery EasyUI框架中，开发人员经常需要处理各种用户界面交互，其中一项常见的需求就是刷新当前活动的选项卡（tabs）。jQuery EasyUI提供了一个简洁的API来实现这一功能，主要涉及`tabs`组件的`update`方法。这篇...
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
10-17
在使用Easyui，一个基于jQuery的用户界面库，特别是与jQuery-easui插件一起工作时，有时我们需要在用户尝试关闭某个tab标签页之前执行某些操作，比如进行数据验证或检查特定条件。本文将深入探讨如何实现这个功能，...
jQuery EasyUI 选项卡面板tabs使用实例精讲
whiteGay的博客
10-27 334
1、 对选项卡面板区域 div 设置 class=”easyui-tabs” 2、 对选项卡面板区域添加多个 div，每个 div 就是一个选项卡（每个面板一定设置 title） 3、 设置面板 ...
EasyUI：Tabs 标签页/选项卡
KaiSarH
11-24 1078
当构造布局的时候,可以通过 $.fn.tabs.defaults 重写默认的 defaults。 这些选项卡显示面板的集合。 一次仅显示一个选项卡面板。 每个选项卡面板都有标题标题和一些迷你按钮工具，包括关闭按钮和其他自定义按钮。 依赖 panel linkbutton 属性 名称 类型 描述 默认值 width number 标签页（Tabs）容器的宽度。 auto h...
EasyUI之选项卡Tabs
sunpy
04-08 1618
1.样式 选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。 2.练习1：构建选项卡 tabs <div id="tabsID" class="easyui-tabs" style="width:500px;height:250px;" data-option
在easyui中如何调用其它tab中的function的方法
沉默的游鱼
06-06 393
使用easyui时，如何实现多个tab之间的方法互相调用
easyui Tabs 标签页/选项卡
yb305
12-07 571
1、通过标记创建标签页（Tabs） &lt;div id="tt" class="easyui-tabs" style="width:500px;height:250px;"&gt;        &lt;div title="Tab1" style="padding:20px;display:none;"&gt;tab1&lt;/div&gt;    
EasyUI（tabs组件）
m0_46690290的博客
06-24 463
tabs选项卡tabs选项卡简介实现tabs选项卡实现关闭所有选项卡 tabs选项卡简介 1.从easyUI官方文档入手，找到tabs选项卡的简介以及查看demo示例 2.使用案例 (两种方式) 通过标签创建选项卡 通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给标签添加一个类ID’easyui-tabs’。每个选项卡面板都通过子标签进行创建，用法和panel(面板)相同。 示例 <div id="tt" class="easyui-tabs" style="
easyui的tabs控件
小七
06-24 1233
easyui的tabs控件前言一、先去看看前期做的前台和后台吧二、了解什么是tabs控件三、tabs属性的使用四、tabs事件的使用五、tabs方法的使用六、实现tabs的步骤1、我们先建两个jsp备用2、使用easyui中的模板tabs控件3、在index.js中再次使用tabs控件中的模板，进行修改 前言 因为前面做了easyui的前端和后端做铺垫，所以今天还是搞前端要实现的tabs控件 一、先去看看前期做的前台和后台吧 https://blog.youkuaiyun.com/qq_46964039/article
easyui tabs hideHeader的用法
遛弯的兔子
05-03 2233
今天用了easyui-tabs来加载了嵌入的页面，但是项目有需求不显示tab的头部信息，找了api  发现有这个方法hideHeader（该方法自1.3.5版开始可用）注意版本 tabs用例：             data-options="                 fit:true,                 border:false,
EasyUi之Tabs(选项卡)
qq_46765422的博客
06-28 315
@TOC Tabs（选项卡） 使用$.fn.tabs.defaults重写默认值对象。 选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。 通过标签创建选项卡 通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给标签添加一个类ID’easyui-tabs’。每个选项卡面板都通过子标签进行创建，用法和panel(面板)相同。 <div id="tt" class="easyui-tabs"
微信小程序在页面聚焦input框的时候会导致顶部的导航栏被顶上去如何解决
最新发布
10-31
微信小程序中，当焦点进入`<input>`或其他可能导致滚动元素时，由于浏览器的行为，可能会让顶部的导航栏看起来像是被“顶”了上去。这是因为输入框获取焦点后通常会获得滚动区域的优先级，导致整个页面滚动，包括头部导航。 要解决这个问题，你可以尝试以下几种方法： 1. **固定定位** (Fixed Positioning): 给包含导航栏的部分添加样式 `position: fixed;`, 并设置合适的`top`值使其保持在视口上方。这样在用户输入时，导航栏不会随页面滚动。 ```html <view class="header fixed"> <!-- 导航栏内容 --> </view> ``` ```css .fixed { position: fixed; top: 0; /* 添加其他必要的样式 */ } ``` 2. **阻止默认滚动** (Prevent Default Scroll): 当焦点在输入框上时，监听`touchmove`事件并阻止其默认行为，这样可以防止页面整体滚动。 ```javascript Page({ onLoad: function() { this.input = wx.createSelectorQuery().select('#your-input-id').boundingClientRect(); // 其他代码... document.addEventListener('touchmove', e => { if (this.input && !e.targetTouches[0].clientY < this.input.top) { // 检查是否在输入框区域内 e.preventDefault(); } }); }, // ... }) ``` 3. **手动处理滚动** (Manually Handle Scrolling): 创建一个自定义组件，包含输入框和一个用于显示导航栏的区域。当用户离开输入框时，恢复正常的滚动行为。 ```html <!-- 自定义滚动区域 --> <scroll-view :scroll-y='showHeader' @scrolltoupper='hideHeader'> <!-- 输入框和其他内容 --> <input ref="input" /> </scroll-view> <!-- 隐藏/显示导航栏 --> <view class='header' v-if='!showHeader'> <!-- 导航栏内容 --> </view> ``` ```javascript Page({ data: { showHeader: true, }, methods: { hideHeader() { this.showHeader = false; }, // 其他处理输入框聚焦的方法... } }) ``` 应用以上任一策略后，你应该能看到微信小程序在聚焦input框时，顶部导航栏不再被顶上去。然而，请注意，不同的解决方案可能会影响到用户体验，所以在实际项目中选择合适的方法很重要。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

霸道流氓气质

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值