标签页部件(Tabs Widget)

收藏:0   阅读:26

jQuery UI API - 标签页部件(Tabs Widget)

所属类别

小部件(Widgets)

用法

描述:一种多面板的单内容区,每个面板与列表中的标题相关。

版本新增:1.0

标签页(Tabs)通常用于把内容分成多个部分,以便节省空间,就像折叠面板(accordion)一样。

标签页(Tabs)有一组必须使用的特定标记,以便标签页能正常工作:

每个标签页面板的内容可以在页面中定义好,或者可以通过 Ajax 加载。这两种方式都是基于与标签页相关的锚的href上自动处理的。默认情况下,标签页在点击时激活,但是通过 event 选项可以改变或覆盖事件。

下面是一些样品标记:

<div id="tabs">
  <ul>
    <li><a href="#fragment-1">一</a></li>
    <li><a href="#fragment-2">二</a></li>
    <li><a href="#fragment-3">三</a></li>
  </ul>
  <div id="fragment-1">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div>

键盘交互

当焦点在标签页上时,下面的键盘命令可用:

当焦点在面板上时,下面的键盘命令可用:

主题化

标签页部件(Tabs Widget)使用 jQuery UI CSS 框架 来定义它的外观和感观的样式。如果需要使用标签页指定的样式,则可以使用下面的 CSS class 名称:

依赖

附加说明

实例

一个简单的 jQuery UI 标签页(Tabs)。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>标签页部件(Tabs Widget)演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<div id="tabs">
  <ul>
    <li><a href="#fragment-1"><span>一</span></a></li>
    <li><a href="#fragment-2"><span>二</span></a></li>
    <li><a href="#fragment-3"><span>三</span></a></li>
  </ul>
  <div id="fragment-1">
    <p>第一个标签是默认激活的:</p>
    <code>$( "#tabs" ).tabs(); </code>
  </div>
  <div id="fragment-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div>
 
<script>
$( "#tabs" ).tabs();
</script>
 
</body>
</html>
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!