我们承诺每页只显示一个小型广告。不用担心，隐藏此消息将确保您不会再次收到提示。
类型
选项卡
基本选项卡
状态
激活
选项卡可以被激活，并在页面上可见。
加载
选项卡可以显示加载指示器。
基本示例
基本选项卡
选项卡使用在 data-tab 属性中指定的路径进行连接。选项卡然后在 Javascript 中在激活的元素上初始化。
第一个
第二个
第三个
$('.menu .item') .tab() ;
多个选项卡组
有几种方法可以在同一页面上包含独立的选项卡组，即使使用历史记录也是如此。最简单的方法之一是为每个选项卡组提供一个特定的父上下文。
$('#context1 .menu .item') .tab({ context: $('#context1') }) ; $('#context2 .menu .item') .tab({ // 特殊关键字与上面相同 context: 'parent' }) ;
1A
1B
1C
2A
2B
2C
3A
3B
3C
4
5
6
1A
1B
1C
2A
2B
2C
3A
3B
3C
4
5
6
默认路径
当您在打开选项卡后指定路径（例如 first/）时，它会查找任何子路径并打开第一个。在这个例子中，即使路径是 first/，与 first/a 对应的选项卡也会自动打开，因为它是默认的子选项卡。这将对您包含的任何其他子选项卡组递归地起作用。
$('.paths.example .menu .item') .tab({ context: '.paths.example' }) ;
1A
1B
1C
2A
2B
2C
3A
3B
3C
远程示例
检索远程内容
使用 auto: true 将从您的服务器加载选项卡的路径，并添加额外的标头以指定页面内请求。当 cache: true 设置后，重新打开选项卡将从缓存中加载，而不会进行服务器请求。
$('.dynamic.example .menu .item') .tab({ cache: false, // 模拟 API 请求 apiSettings: { loadingDuration : 300, mockResponse : function(settings) { var response = { first : 'AJAX 选项卡一', second : 'AJAX 选项卡二', third : 'AJAX 选项卡三' }; return response[settings.urlData.tab]; } }, context : 'parent', auto : true, path : '/' }) ;
AJAX 选项卡一
在 HTML 中评估脚本
默认情况下，包含在 HTML 中的 script 标签只会在第一次加载时被评估。要更改此行为，您可以调整 evaluateScripts 设置。
$('.eval.example .menu .item') .tab({ evaluateScripts : 'once', context : 'parent', auto : true, path : '/' }) ;
AJAX 选项卡一
历史记录示例
使用哈希历史记录
对于静态网站，或只需要简单历史记录的网站，页面内链接可用于触发不同的本地选项卡状态。
$('.history.example .menu .item') .tab({ context : '.history.example', history : true }) ;
1A
1B
1C
2A
2B
2C
3A
3B
3C
使用 HTML5 状态
对于能够在服务器上复制更改的网站，选项卡可以自动将选项卡导航中的更改映射到 html5 状态。
$('.ui.menu .item') .tab({ history : true, historyType : 'state', // 所有其他路径更改的基址 path : '/my/base/url' }) ;
初始化选项卡
...与菜单一起
选项卡通常与激活选项卡的元素一起使用。选项卡在激活项上初始化，而不是在选项卡上。
选项卡使用元数据属性 data-tab 连接到它们的激活器。这应该添加到激活元素和选项卡本身。
$('.tabular.menu .item').tab();
...没有菜单
如果页面上没有激活选项卡元素的菜单，则可以使用 $.tab() 全局初始化选项卡，并使用 $.tab('change tab', path); 以编程方式激活。
$('.ui.button') .on('click', function() { // 以编程方式激活选项卡 $.tab('change tab', 'tab-name'); }) ;
管理状态
...使用哈希标签
哈希标签使用页面内链接和 onhashstatechange 为每个选项卡创建历史事件。这有时比更高级的推送状态更容易使用，因为它不需要您在服务器上路由这些 URL。所有页面内链接都将路由到同一个 URL。
$('.ui.menu .item') .tab({ history: true, historyType: 'hash' }) ;
...使用 HTML5 状态
选项卡可以使用 html5 推送状态来管理页面状态，而无需使用 #/foo 链接。当用户使用推送状态刷新页面时，将查询服务器以获取新的 URL。这意味着您必须在后端设置适当的路由以匹配每个链接。
$('.ui.menu .item') .tab({ history: true, historyType: 'state', path: '/modules/tab.html' }) ;
设置路径
使用 historyType: state 需要指定一个不包含任何内部状态的基址。这无法自动设置为 window.location，因为所有具有 html5 状态的选项卡都将显示为正常的页面 URL，并相应地进行路由。
HTML5 状态只能与动态网站后端一起使用，因为它要求每个选项卡路径在服务器上正确路由到相应的内容。
$('.ui.menu .item') .tab({ history: true, historyType: 'state' path: '/modules/tab.html' }) ;
AJAX 内容
… 以及自动路由
指定设置 auto: true 将会自动从浏览器中设置的 URL 中检索匹配的远程 URL 的内容。
例如，标签 inbox 将会从 URL base-url/inbox/ 检索内容。
该 URL 将会接收一个额外的 HTTP 头部 'X-Remote': true。您可以在服务器的后端使用它来确定请求是来自标签的 AJAX 请求，还是完整的页面请求。
带有 'X-Remote': true 的查询应该只刷新标签内容，而没有该头的查询是正常的资源，应该刷新**整个页面内容**。
这使用类似于 pJax 或 Rails 的 turbolinks 的技术。
$('.dynamic.example .menu .item') .tab({ context : '.dynamic.example', auto : true, path : '/modules/tab.html' }) ;
… 以及 API 行为
标签提供了一个可选的 API 耦合，允许您指定一个标签可以查询的模板化的 API 终结点。
标签会自动传递 URL 变量 {$tab}，它可以被替换为 RESTful API 链接。
要了解更多关于构建在语义中的 API 行为，请查看 API 文档。
查看 API 文档行为
所有以下行为可以使用语法$('.foo').tab('behavior name', argumentOne, argumentTwo) 调用。| 附加事件 (选择器, 事件) | 将标签操作附加到给定的选择器。如果未指定，默认事件为切换。 |
| 更改标签 (路径) | 将标签更改为路径。 |
| 设置状态 (路径) | 将当前路径设置为状态。 |
| 获取路径 | 返回当前路径。 |
| 是否为标签 | 返回标签是否存在。 |
| 读取缓存 (路径) | 返回路径的缓存的 HTML。 |
| 添加缓存 (路径, html) | 设置路径的缓存的 HTML。 |
| 移除缓存 (路径) | 移除路径的缓存的 HTML。 |
标签设置表单设置修改标签的行为。
| 设置 | 默认值 | 描述 |
|---|---|---|
| auto | false | 标签是否应该加载与历史记录相同的 URL 的远程内容。 |
| deactivate | 'siblings' | 当设置为 siblings 时，将仅停用与激活元素为 DOM 兄弟元素的元素。当设置为 all 时，组件将停用所有在同一时间初始化的其他元素。 |
| history | false | 是否记录标签更改的历史事件。 |
| ignoreFirstLoad | false | 在第一次加载标签时不要远程加载内容。这在打开标签是在服务器上渲染时很有用。 |
| evaluateScripts | once | 标签 HTML 中的内联脚本是否应该在标签加载时解析。默认值为 once，仅在第一次加载时解析。也可以设置为 true 或 false 来始终解析或从不解析内联脚本。 |
| alwaysRefresh | false | 标签应该在每次打开时重新加载内容。 |
| deactivate 2.2 |
siblings | 可以设置为 siblings 或 all。siblings 将仅停用当标签被选中时为点击元素的siblings 的标签激活器。All 将停用所有在同一时间初始化的其他标签激活器。 |
| cacheType 2.2 |
response | 可以设置为 response、DOM 或 html。使用 DOM 将缓存 DOM 树的克隆，保留所有在渲染时存在的事件。response 将缓存加载时的原始响应，这样回调始终接收相同的内容。使用 html 将在所有回调之后缓存生成的 html，确保保留对内容的任何更改。 |
| cache | true | 标签在本地加载后应该缓存内容，以避免在第二次加载时访问服务器。 |
| apiSettings | false | 用于 $.api 调用的设置对象。 |
| historyType | hash | 可以设置为 hash 或 state。Hash 将使用页面内链接来创建历史事件。State 将使用 DOM 历史记录 并从服务器上加载页面进行刷新。 |
| path | false | 当使用 historyType state 时，您必须指定所有内部链接的基本 URL。 |
| context | false | 标签仅限于在该上下文内部找到的标签。 |
| childrenOnly | false | 如果启用，将标签限制为传递上下文的子级。 |
| maxDepth | 25 | 允许的嵌套标签的最大数量（避免递归）。 |
回调
回调指定在特定行为之后发生的函数。
| 参数 | 上下文 | 描述 | |
|---|---|---|---|
| onFirstLoad | tabPath, parameterArray, historyEvent | 选项卡 | 仅在第一次加载标签时回调。 |
| onLoad | tabPath, parameterArray, historyEvent | 选项卡 | 每次加载标签时回调。 |
| onRequest | tabPath | 选项卡 | 当标签开始加载远程内容时调用。 |
| onVisible | tabPath | 选项卡 | 在标签变得可见后调用。 |
DOM 设置DOM 设置指定此模块应该如何与 DOM 交互。
| 设置 | 默认值 | 描述 |
|---|---|---|
| namespace | tab | 事件命名空间。确保模块拆卸不会影响附加到元素的其他事件。 |
| templates |
templates : { // 返回页面标题 determineTitle: function(tabArray) {} }
|
用于返回内容的函数。 |
| selector |
selector : { tabs : '.ui.tab', parent : '.ui:not(.menu)' }
|
模块使用的选择器。 |
| metadata |
metadata : { tab : 'tab', loaded : 'loaded', promise: 'promise' }
|
模块使用的 DOM 元数据。 |
| className |
className : { loading : 'loading', active : 'active' }
|
用于将样式附加到状态的类名。 |
调试设置调试设置控制调试输出到控制台。
| 设置 | 默认值 | 描述 |
|---|---|---|
| name | 选项卡 | 调试日志中使用的名称。 |
| silent | False | 静默所有控制台输出，包括错误消息，无论其他调试设置如何。 |
| debug | False | 向控制台提供标准调试输出。 |
| performance | True | 向控制台提供标准调试输出。 |
| verbose | True | 向控制台提供辅助调试输出。 |
| errors |
error: { api : '您尝试在没有 API 模块的情况下加载内容', method : '您调用的方法未定义', missingTab : '在此上下文中找不到激活的标签。', noContent : '您指定的标签缺少内容 URL。', path : '启用了历史记录，但未指定路径。', recursion : '已达到最大递归深度', state : '状态库尚未初始化' }
|
|