菜单

选项页
选项页是内容中隐藏的部分,由菜单激活

下载

类型

选项页 (Tab)

基本的选项页

选项页默认是隐藏着的, 只有加上CSS类 active 或使用 javascript 让它可见. 查看使用章节获取更多信息.

状态

激活 (Active)

选项页可以被激活,在页面上可见

加载 (Loading)

选项页可以显示一个加载指示器

基本例子

基本选项页 (Basic Tabs)

选项页使用 data-tab 中设置的路径来相互连接。然后在激活元素中用 Javascript 来进行初始化。

要让选项页在页面加载时显示,需要在菜单和tab中用 active 进行初始化。
第一
第二
第三
$('.menu .item') .tab() ;

多选项页组 (Multiple Tab Groups)

有几个方法可以在同一页中包含独立的选项卡组,甚至有历史记录。最简单的方法之一是为每个选项卡组提供特定的父上下文。

如果在选项卡内使用选项卡上下文,你可以指定 childrenOnly: true which will 只会查找标签作为给定上下文中的子上下文,或者 context: 'parent' :一个特殊的关键字,避免为每个组创建唯一的选择器。
$('#context1 .menu .item') .tab({ context: $('#context1') }) ; $('#context2 .menu .item') .tab({ // special keyword works same as above context: 'parent' }) ;
1A
1B
1C
2A
2B
2C
3A
3B
3C
1A
1B
1C
2A
2B
2C
3A
3B
3C

默认路径 (Default Paths)

当你指定类似 first/ 的路径,打开选项时就会寻找任何一个子路径并且打开第一个选项页。在这个例子里,即使路径是 first/,选项页 first/a 也会相应的自动打开,因为它是默认的子选项页,这种规律是递归的。

这些例子中的每一个都初始化了一个上下文,以防止与其他选项卡的例子造成影响。其实这是没有必要的,除非在一个页面上使用多个标签系统。
$('.paths.example .menu .item') .tab({ context: '.paths.example' }) ;
1A
1B
1C
2A
2B
2C
3A
3B
3C

远程示例

检索远程内容 (Retreiving Remote Content)

使用 auto: true 将从你的服务器加载标签的路径,该服务器用附加的标题指定一个内部页面请求。当 cache: true 被设置后,额外的请求将会自动从缓存中加载不需要服务器请求。

下面例子的API请求,被伪造使用 mockResponse 来避免网络开销。
$('.dynamic.example .menu .item') .tab({ cache: false, // faking API request apiSettings: { loadingDuration : 300, mockResponse : function(settings) { var response = { first : 'AJAX Tab One', second : 'AJAX Tab Two', third : 'AJAX Tab Three' }; return response[settings.urlData.tab]; } }, context : 'parent', auto : true, path : '/' }) ;

AJAX标签一

HTML中评估脚本 (Evaluating Scripts in HTML)

默认情况下,HTML中包含的脚本只在第一次加载时进行评估。要改变这种行为可以调整evaluatescripts设置。

$('.eval.example .menu .item') .tab({ evaluateScripts : 'once', context : 'parent', auto : true, path : '/' }) ;

AJAX标签一

历史例子

使用Hash历史 (Using Hash History)

对于静态站点或只需要简单历史的站点,可以使用页链接触发不同的本地选项卡状态。

$('.history.example .menu .item') .tab({ context : '.history.example', history : true }) ;
1A
1B
1C
2A
2B
2C
3A
3B
3C

使用HTML5状态 (Using HTML5 State)

对于能够在服务器上复制更改的站点,选项卡可以自动将选项卡导航的更改映射到HTML5状态

由于这些文档是静态托管在GitHub上的网页,HTML5的状态标签是不能从文档上直接显示的,你需要在你自己的代码中尝试这个示例。
$('.ui.menu .item') .tab({ history : true, historyType : 'state', // base url for all other path changes path : '/my/base/url' }) ;

初始化选项页

用菜单 (...with Menus)

选项页在激活元素上激活,而不是在选项页中激活。

选项页使用data-tab与它的激活器相关联,这个参数应该在激活器和选项页中都添加。

$('.tabular.menu .item').tab();

不用菜单 (...without Menus)

如果在页面上没有菜单来激活,那么可以用 $.tab() 来全局初始化,并且使用 $.tab('change tab', path); 来控制。

$('.ui.button') .on('click', function() { // programmatically activating tab $.tab('change tab', 'tab-name'); }) ;
激活选项页

默认标签页

当选项页被选中后,它将寻找当前选项页中默认的子选项,比如一个路径为 data-tab="home" 的选项页,将自动寻找路径为 data-tab="/home/inbox" 的子选项。

这将递归的自动寻找子选项页,不管有多少级。

管理状态

包含哈希选项页 (...with Hash Tags)

哈希选项页用于页面链接 onhashstatechange 为每一个标签创建历史事件. 这有时候比先进的推进状态用起来更简单, 因为它不需要你将这些URLs路由到你的服务器上.所有页面内的链接都将路由到同一个url.

选项页使用Asual's 地址库提供交叉浏览推进状态.对于一个有历史的选项页,确保能正确执行这是必须依赖的。

$('.ui.menu .item') .tab({ history: true, historyType: 'hash' }) ;

包含HTML5状态 (...with HTML5 State)

便签页可以用HTML5推进状态管理页面状态,不需要用#/foo链接. 当用户用推进状态刷新页面时,服务器会被请求一个新的url.这意味着你必须在后台设置适当的路由来匹配每一个链接.

$('.ui.menu .item') .tab({ history: true, historyType: 'state' path: '/modules/tab.html' }) ;

设置路径 (Setting Paths)

使用 historyType: state需要指定一个没有任何内部状态的基本url.这不可能为 window.location自动设置,因为所有包含html5的选项页将作为正常页面urls出现,并且依照指定的路径路由.

HTML5状态只能在动态网站的后台工作,因为要恰当的显示内容,它要求每一个标签路径都在服务器上正确地路由.

$('.ui.menu .item') .tab({ history: true, historyType: 'state' path: '/modules/tab.html' }) ;
用错误的路径是HTML5中一个常见的错误, 可能引起不寻常的行为.

AJAX内容

包含自动路由 (...with automatic routing)

指定设置auto: true, 将自动从一个远程url中检索内容,该url能够匹配浏览器中设置的url.

例如标签inbox 将从URL base-url/inbox/中检索内容

该URL将检索一个附加的HTTP头'X-Remote': true. 你可以将该功能用在你的服务器的后台来判断一个请求是来自标签的AJAX请求还是来自整个页面的请求.

包含 'X-Remote': true 的查询应该只刷新标签的内容, 当查询正常的资源时需要刷新整个页面内容

这和 pJax 或者 Rail's turbolinks 使用类似的技术。

配置动态内容行为有多种设置。访问选项卡设置部分获取更多信息。
$('.dynamic.example .menu .item') .tab({ context : '.dynamic.example', auto : true, path : '/modules/tab.html' }) ;

包含API行为 (...with an API Behavior)

选项页与API之间提供一个可选的链接,允许您指定一个模板API端点,使标签可以查询

选项页自动通过url变量{$tab},它可以被替换为RESTful API链接.

要学习更多的API行为语法,可以查看API文档

查看API文档

行为

下列所有行为可以通过语法$('.foo').tab('behavior name', argumentOne, argumentTwo)调用
attach events(selector, event) 为给定的选择器附加标签动作. 如果没有指定的切换将是默认行为
change tab(path) 改变标签(路径)
set state(path) 设置当前路径(状态)
get path 返回当前路径
is tab 返回是否存在标签
cache read(path) 为路径返回缓存的html
cache add(path, html) 为路径设置缓存的html
cache remove(path) 为路径移除缓存的html

标签设置
表格设置更新标签行为

设置 默认 描述
auto false 是否标签应加载相同URL的远程内容
deactivate 'siblings' 当设置为 siblings 时,会关闭与激活元素的DOM相邻的元素。当设置为 all 时,组件将同时停用所有初始化的其他元素。
history false 是否在选项页改变时记录历史事件。
ignoreFirstLoad false 首次加载时不加载远程内容,当打开选项页在服务器上呈现时是有用的。
evaluateScripts once 在选项页HTML中内联的脚本,是否在加载时解析。默认 once是只在第一次加载时解析。也可以设置为 true 或者 false 来总是解析或者永远不解析。
alwaysRefresh false 每次标选项页打开的时候都应该重新加载内容
2.2
版本中停用
siblings Can be set to either siblings or all. Siblings will only de-activate tab activators that are siblings of the clicked element when a tab is selected. All will deactivate all other tab activators initialized at the same time.
2.2
版本中停用
response Can be set to either response, DOM or html. Using DOM will cache the a clone of the DOM tree, preserving all events as they existed on render. response will cache the original response on load, this way callbacks always receive the same content. Using html will cache the resulting html after all callbacks, making sure any changes to content are preserved.
cache true 为了防止服务器陷入二次加载,标签应该在本地加载之后缓存内容。
apiSettings false $.api 设置对象
historyType hash 可以设置为 hash 或者 state.哈希将使用一个内部页面链接创建历史事件. 状态将用DOM History 并从服务器重新刷新加载页面.
path false 当使用历史类型state你必须为所有的内部链接指定基础url.
context false 选项卡仅限于在上下文中找到的
childrenOnly false If enabled limits tabs to children of passed context
maxDepth 25 允许的嵌套标签的最大数量(避免递归)

回调函数

回调函数指定一个函数在特定行为之后执行

参数 语境 描述
onFirstLoad tabPath, parameterArray, historyEvent Tab 选项页第一次加载时候调用
onLoad tabPath, parameterArray, historyEvent Tab 选项页每次加载时都调用
onRequest tabPath Tab 当选项页加载远程内容的时候调用
onVisible tabPath Tab 选项页可见时调用

DOM 设置
DOM设置指定如何用DOM接口模块

设置 默认 描述
namespace tab 事件命名空间。确保模块不被其他元素影响。
templates
templates : { // returns page title 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 Tab 在调试日志中使用的名字
silent False 禁用所有信息输出,包括错误。
debug False 提供标准调试输出到控制台
performance True 提供标准调试输出到控制台
verbose True 提供辅助调试输出到控制台
errors
error: { api : 'You attempted to load content without API module', method : 'The method you called is not defined', missingTab : 'Activated tab cannot be found for this context.', noContent : 'The tab you specified is missing a content url.', path : 'History enabled, but no path was specified', recursion : 'Max recursive depth reached', state : 'The state library has not been initialized' }