ips.ui.tabbar

<！——标签栏——>< div班=“ipsTabs ipsClearfix”身份证件=“elTabBar”数据栏data-ipsTabBar-contentArea=“# elTabContent”><一个href=“# elTabBar”data-action=“expandTabs”>班=“icon-caret-down”> < / i > < / >< ul角色=“小报作家”><李角色=“演示”><一个href=“……”角色=“标签”身份证件=“elTabOne”班=“ipsTabs\u项目”aria-selected=“真正的”>选项卡一个< / >李< / ><李角色=“演示”><一个href=“……”身份证件=“elTabTwo”角色=“标签”班=“ipsTabs\u项目”>选项卡2< / >李< / >< / ul >< / div ><！——标签面板包装——><节身份证件=“elTabContent”>

关键细节如下:

• 小部件键属性属于选项卡栏包装元素。李< / ><李>选项卡栏的第一个子元素应该是具有该属性的元素data-action = ' expandTabs '．当选项卡栏显示在小型设备上时使用。为了便于访问，它应该是指向选项卡栏元素的锚定链接。李< / ><李>每个选项卡链接到一个静态页面-这也是远程获取内容时调用的同一URL。如果选项卡面板（见下一节）是页面上已经存在的静态内容，则可以使用指向该元素的锚定。李< / ><李>面板包装器将在选项卡小部件创建面板时接收它们。李< / ><李>该示例还使用ARIA属性标记了可访问性，例如角色= '标签'和aria-selected = '真的'．李< / >< / ul >

  如果选项卡小部件初始化时面板包装器元素中存在内容，小部件将获取该内容，从中创建一个面板，并将其视为默认选定选项卡的内容。这种机制意味着开发人员可以非常轻松地将默认内容包含到页面中，而无需通过另一个AJAX请求获取。

  面板可以手工创建，而不是通过AJAX加载。为此，面板元素应该存在于面板包装器元素中，并具有正确的ID。ID采用这种格式:

  < panelPrefix >_< barID >_<衰弱的>_panel

  其中值为：

  • 面板前缀是选项中设置的前缀（见下文）；ipsTabs默认情况下李< / ><李>barID标签栏元素上是否设置了ID李< / ><李>衰弱的是否在与此面板相关的单个选项卡元素上设置了ID李< / >< / ul >

    选项

    内容区
    (选择器;需要)

    一个CSS选择器，它将定位面板容器元素，面板将被创建到其中。例如,# elTabContent．

    更新
    (布尔;可选的;默认的真正的)

    确定当用户选择各个选项卡时，浏览器地址栏是否将更新为各个选项卡的URL。这样就可以将各个选项卡导航到浏览器的历史记录并显示在其中。

    项目选择器
    (选择器;可选的;默认的.ipsTab_项目')

    一个CSS选择器，它将在标签栏中定位标签元素。

    activeClass
    （字符串；可选；默认值'ipsTabs_activeItem')

    将应用于当前活动的选项卡元素的类名。

    loadingClass
    （字符串；可选；默认值'ipsLoading ipsTabs_loadingContent')

    加载新选项卡内容时将应用于面板容器元素的类名。

    panelClass
    （字符串；可选；默认值'IPS面板')

    一个类名，当单个面板被创建时应用于它们。

    面板前缀
    （字符串；可选；默认值'ipsTabs')

    在生成面板ID时使用的前缀。这有助于防止与其他元素的潜在命名冲突。在大多数情况下，默认值应该没问题。

    defaultTab
    (选择器;可选)

    如果提供此选项，则用于在选项卡栏首次加载时设置默认选项卡。如果未提供，则指定类的第一个选项卡activeClass是寻找;最后，如果所有其他选项都失败，则选择栏中的第一个选项卡。

    此外，值得注意的是，如果您希望选项卡栏在它所包含的容器的整个区域中延伸，那么可以添加CSS类．伊普斯图拉到选项卡栏元素。

    由ips.ui.tabbar触发的事件

    tabChanged

    当所选选项卡更改时触发。只要用户单击选项卡，就会触发此事件。

    事件数据:

    • barID
      标签栏包装器ID李< / ><李>衰弱的
      所选选项卡的ID李< / ><李>选项卡
      引用新选择的选项卡元素李< / ><李>面板
      对此选项卡的面板元素的引用李< / >< / ul >

      tabShown

      显示所选选项卡时触发。触发此事件之后淡入动画已经完成，不像上面的tabChanged事件。

      事件数据:

      • barID
        标签栏包装器ID李< / ><李>衰弱的
        所选选项卡的ID李< / ><李>选项卡
        引用新选择的选项卡元素李< / ><李>面板
        对此选项卡的面板元素的引用李< / >< / ul >