Menu

选项卡
选项卡是由菜单激活的隐藏内容部分

下载

类型

选项卡

一个基本的选项卡

选项卡在默认情况下是隐藏的,只有在给定类名时才可见 活跃的 或者用Javascript激活时. 有关更多信息,请参见用法部分.

活跃的

标签可以被激活,并且在页面上可见

加载

标签可以显示加载指示器

基本的Examples

基本选项卡

中指定的路径连接选项卡 data选项卡 属性. 然后在激活元素上用Javascript初始化选项卡.

要在页面加载中显示标签,添加类 活跃的 初始化菜单和选项卡.
第一个
第二个
第三
$('.menu .项目”) .选项卡() ;

多个选项卡组

有几种方法可以在同一个页面上包含独立的标签组,即使是历史记录. 最简单的方法之一是为每个选项卡组提供特定的父上下文.

如果在选项卡内部使用选项卡上下文,还可以指定 childrenOnly:真 哪个将只查找作为给定上下文的直接子节点的选项卡,还是 背景:‘父’ 一个特殊的关键字,可以避免为每个组创建唯一的选择器.
$ (' # Context1 .menu .项目”) .选项卡({ 背景:$ (' # Context1 ') }) ; $ (' # Context2 .menu .项目”) .选项卡({ //特殊关键字的工作原理与上面相同 背景:‘父’ }) ;
1A
1B
1C
2A
2B
2C
3A
3B
3C
1A
1B
1C
2A
2B
2C
3A
3B
3C

默认路径

当你指定一个路径,比如 第一个/ 打开标签后,它将查找所有子路径并打开第一个. 在这个Examples中,即使路径是 第一个/,对应的标签 第一次/ 也会自动打开,因为它是默认的子选项卡. 这将对您包含的任意多个子选项卡组递归地工作.

每个示例都用一个上下文初始化,以防止与该页上的其他选项卡示例污染. 这是没有必要的,除非在一个页面上使用多个选项卡系统.
$('.路径.Examples .menu .项目”) .选项卡({ 背景:“.路径.Examples的 }) ;
1A
1B
1C
2A
2B
2C
3A
3B
3C

远程实例

检索远程内容

使用 汽车:真 是否从服务器加载选项卡的路径,以指定一个页内请求的附加头. 当 缓存:真 设置,重新打开标签将从缓存加载而不需要服务器请求.

以下示例的API请求已被伪造 mockResponse API设置,以避免网络开销.
$('.动态.Examples .menu .项目”) .选项卡({ 缓存:假的, //伪造API请求 api设置: { loadingDuration: 300, mockResponse:函数(设置){ Var响应= { 第一个:'AJAX选项卡一个', 第二个:“AJAX 选项卡 2”, 第三个:“AJAX 选项卡 3” }; 返回响应(设置.urlData.选项卡); } }, 背景:‘父’, 汽车:没错, 路径:' / ' }) ;

AJAX选项卡一个

在HTML中评估脚本

默认情况下, script HTML中包含的标签只会在第一次加载时被评估. 要改变这种行为,您可以调整 evaluateScripts 设置.

$('.eval.Examples .menu .项目”) .选项卡({ evaluateScripts:“一次”, 上下文 : ' 父”, 汽车 : 真的, 路径 : '/' }) ;

AJAX选项卡一个

历史上的Examples

使用散列历史

静态网站, 或者只需要简单历史的网站, 页内链接可以用来触发不同的本地标签状态

$('.历史.Examples .menu .项目”) .选项卡({ 背景:“.历史.的Examples, 历史:真正的 }) ;
1A
1B
1C
2A
2B
2C
3A
3B
3C

使用HTML5状态

对于能够在服务器上复制更改的站点, TAB可以自动将TAB导航中的更改映射到 html5状态.

因为这些文档是静态托管在GitHub页面上的, Html5的状态标签是不能证明从文档. 您需要在自己的代码中尝试这个示例.
$('.ui.menu .项目”) .选项卡({ 历史:没错, 历史类型:“状态”, //所有其他路径更改的基础url 路径 : '/ 我的基地/ url }) ;

初始化标签

...与菜单

选项卡通常与激活选项卡的元素一起使用. 选项卡是在激活项上而不是在选项卡上初始化的.

选项卡通过元数据属性连接到它们的激活器 data选项卡. 这应该同时添加到激活元素和选项卡本身.

$('.表格.menu .项目”).选项卡();

...没有菜单

如果页面上没有激活选项卡元素的菜单, 可以使用以下命令全局初始化制表符 $.选项卡() 并以编程方式激活 $.选项卡(“改变选项卡”,路径);

$('.ui.按钮”) .(“点击”,函数(){ //以编程方式激活TAB $.选项卡(改变标签,'选项卡名称'); }) ;
激活选项卡

默认选项卡

在任何选项卡被打开后,它将在当前选项卡中寻找一个默认选项卡. 这是第一个以与父选项卡相同的茎url开头的选项卡. 例如,一个带有路径的选项卡 data选项卡=“家” 可能会自动打开标签 data选项卡= " / home /收件箱”.

这将对每个打开的选项卡进行递归,允许任意级别的选项卡.

管理状态

...与散列标签

在页面链接和 on哈希状态change 为每个选项卡创建历史事件. 这有时比更高级的push状态更容易使用, 因为它不需要你在你的服务器上路由那些url. 所有的页面链接将路由到相同的url.

标签使用Asual的 地址库 提供跨浏览器的推送状态支持. 这是一个 需要依赖 历史记录选项卡要正确工作.

$('.ui.menu .项目”) .选项卡({ 历史:没错, 历史类型:“希” }) ;

...与HTML5状态

标签可以使用html5推送状态来管理页面状态,而无需使用 # / foo 链接. 当用户使用推送状态刷新页面时,服务器将查询新的url. 这意味着您必须在后端设置适当的路由来匹配每个链接.

$('.ui.menu .项目”) .选项卡({ 历史:没错, 历史类型:“状态”, 路径:/模块/选项卡.html的 }) ;

设置路径

使用 历史类型:状态 需要指定一个 没有任何内部状态的base URL. 不能自动设置为 窗口.位置 因为所有带有html5状态的标签都将显示为正常的页面url,并相应地路由.

HTML5状态只适用于动态站点后端,因为它要求每个选项卡路径在服务器上正确路由到适当的内容.

$('.ui.menu .项目”) .选项卡({ 历史:没错, 历史类型:“状态” 路径:/模块/选项卡.html的 }) ;
使用不正确的基路径是使用HTML5状态时的常见错误, 会导致不寻常的行为.

AJAX内容

...自动路由

指定设置 汽车:真,将自动检索与浏览器中设置的url匹配的远程url上的内容.

比如标签 收件箱 将从URL检索内容 基url /邮箱/

URL将接收一个额外的HTTP报头 “X-Remote”:真的. 您可以在服务器的后端使用它来确定一个请求是否是来自选项卡的AJAX请求, 或者一个完整The页面请求.

查询与 “X-Remote”:真的 应该只刷新选项卡内容吗, 而没有的查询是正常的资源,应该刷新 整个页面内容

这使用了类似的技术 pJax 或铁路的 turbo链接.

有各种各样的设置来配置动态内容行为. 更多信息请访问选项卡设置部分
$('.动态.Examples .menu .项目”) .选项卡({ 背景:“.动态.的Examples, 汽车:没错, 路径:/模块/选项卡.html的 }) ;

...带有API行为

选项卡提供了一个可选的与API的耦合,它允许你指定一个模板化的API端点,选项卡可以查询它

选项卡将自动传递url变量 {$标签} 哪些可以替换为RESTful API链接.

要了解更多关于内置到语义中的API行为,请查看API文档

查看API文档

行为

可以使用该语法调用以下所有行为 $('.foo”).选项卡('行为名称',argumentOne, argumentTwo) <选项卡le class="ui definition celled 选项卡le segment"> 附加事件(选择器、事件) 将制表符动作附加到给定的选择器. 如果未指定,则默认事件为toggle 改变选项卡(路径) 将选项卡更改为路径 设置状态(路径) 将当前路径设置为状态 获取路径 返回当前路径 是选项卡 返回选项卡是否存在 缓存读取(路径) 返回缓存的HTML路径 缓存添加(道路、html) 设置缓存的HTML路径 缓存删除(路径) 删除缓存的HTML路径

选项卡设置
表单设置可以修改选项卡的行为

<选项卡le class="ui celled sor选项卡le definition 选项卡le segment"> 设置 默认的 描述 汽车 假 选项卡是否应该以与历史相同的url加载远程内容 禁用 “兄弟姐妹” 当设置为 兄弟姐妹 只会禁用与被激活元素是DOM兄弟的元素. 当设置为 所有 该组件将同时禁用所有其他初始化的元素. 历史 假 是否记录选项卡更改的历史事件 ignore第一个Load 假 第一个选项卡加载时不远程加载内容. 在服务器上呈现打开选项卡时非常有用. evaluateScripts 一次 标签HTML中的内联脚本是否应该在标签加载时解析. 默认为 一次,只在第一次加载时解析. 也可以设置为 真正的 or 总是解析或从不解析内联脚本. alwaysRefresh 假 选项卡应该在每次打开时重新加载内容 禁用
2.2
兄弟姐妹 可以设置为 兄弟姐妹 or 所有. 兄弟程序只会取消激活的选项卡激活器 兄弟姐妹 选项卡被选中时被单击元素的. 所有 是否停用所有其他TAB激活器初始化在同一时间. 缓存类型
2.2
响应 可以设置为 响应, DOM or html. 使用 DOM 是否会缓存DOM树的克隆,在呈现时保留所有存在的事件. 响应 加载时缓存原始响应,这样回调总是接收相同的内容. 使用 html 是否在所有回调之后缓存结果HTML,以确保对内容的任何更改都被保留. 缓存 真正的 选项卡应该在本地加载后缓存内容,以避免第二次加载时服务器跳转 api设置 假 设置对象 $.api 调用 历史类型 哈希 可以设置为 哈希 or 状态. Hash将使用页面内链接来创建历史事件. 国家将使用 DOM的历史 并在刷新时从服务器加载页面. 路径 假 当使用历史类型 状态 您必须为所有内部链接指定基URL. 上下文 假 选项卡仅限于在此上下文中找到的选项卡 childrenOnly 假 如果启用,则将选项卡限制为传递的上下文的子选项卡 maxDepth 25 允许的最大嵌套选项卡数量(避免递归)

回调

回调函数指定在特定行为之后发生的函数.

<选项卡le class="ui celled sor选项卡le definition 选项卡le segment"> 参数 上下文 描述 on第一个Load 选项卡Path、parameterArray 历史Event 选项卡 只在第一次加载标签时进行回调 onLoad 选项卡Path、parameterArray 历史Event 选项卡 每次加载标签时回调 onRequest 选项卡Path 选项卡 当选项卡开始加载远程内容时调用 onVisible 选项卡Path 选项卡 在标签变为可见后调用

DOM的设置
DOM设置指定该模块应该如何与DOM接口

<选项卡le class="ui celled definition 选项卡le segment"> 设置 默认的 描述 名称空间 选项卡 事件名称空间. 确保模块拆卸不会影响附加到元素的其他事件. 模板
模板:{ //返回页面标题 determineTitle:函数(选项卡Array) {} }
用于返回内容的函数 选择器
选择器:{ 标签:“.ui.选项卡”, 父:“.ui:没有(.菜单) }
模块使用的选择器 元数据
元数据:{ 标签:“选项卡”, 加载:“加载”, 承诺:“承诺” }
模块使用的DOM元数据 类名称
名称:{ 加载:“加载”, 积极:“活跃” }
用于将样式附加到状态的类名

调试设置
调试设置控制到控制台的调试输出

<选项卡le class="ui celled sor选项卡le definition 选项卡le segment"> 设置 默认的 描述 The名字 选项卡 调试日志的名称 沉默 假 关闭所有控制台输出,包括错误消息,而不考虑其他调试设置. 调试 假 提供标准的调试输出到控制台 性能 真正的 提供标准的调试输出到控制台 详细的 真正的 提供辅助调试输出到控制台 错误
错误:{ api: '你试图在没有api模块的情况下加载内容', 方法:'你调用的方法没有定义', missing选项卡: '激活标签无法找到此上下文.', noContent: '你指定的标签缺少一个内容url.', 路径: '启用历史记录,但未指定路径', 递归:'最大递归深度', 状态:“状态库尚未初始化” }

调光器的信息
调光器分联箱

友情链接: 1 2 3 4 5 6 7 8 9