SUI
新版本1.4.2发布了。第一次升级到 1.4.x 版本请注意在1.4.0版本的重大变动，具体请阅读更新日志。

设计规范

开发者文档

三种不同大小的标签页，可以当做静态组件使用，引入js之后可以做动态的切换。js用法参考 tab-js。

  • 更新 v1.1.9：修复了灰色导航条样式的标签页在ie8下垂直样式的bug。
  • 更新 v1.1.7：为导航条样式的标签页增加了一个轻量的样式（灰色高亮）。

默认标签页

  1. <ul class="sui-nav nav-tabs">
  2.   <li class="active"><a>标签一</a></li>
  3.   <li><a href="#">标签二</a></li>
  4.   <li><a href="#">标签二</a></li>
  5. </ul>
  6. <ul class="sui-nav nav-tabs nav-large">
  7.   <li><a>语文</a></li>
  8.   <li class="active"><a href="#">数学</a></li>
  9.   <li><a href="#">英语</a></li>
  10. </ul>
  11. <ul class="sui-nav nav-tabs nav-xlarge">
  12.   <li><a>语文</a></li>
  13.   <li class="active"><a href="#">数学</a></li>
  14.   <li><a href="#">英语</a></li>
  15. </ul>
  16. <h3>垂直</h3>
  17. <ul class="sui-nav nav-tabs nav-large tab-vertical">
  18.   <li><a>语文</a></li>
  19.   <li class="active"><a href="#">数学</a></li>
  20.   <li><a href="#">英语</a></li>
  21. </ul>
有三种尺寸: default, .nav-large, .nav-tabs-xlarge。通过在 li 标签上添加 .active 可以指定当前高亮的tab。
默认标签页是静态的，如果需要动态的标签页可以参考这里 js 标签页

首要标签页

  1. <ul class="sui-nav nav-tabs nav-primary">
  2.   <li class="active"><a>标签一</a></li>
  3.   <li><a href="#">标签二</a></li>
  4.   <li><a href="#">标签二</a></li>
  5. </ul>
  6. <ul class="sui-nav nav-tabs nav-large nav-primary">
  7.   <li><a>语文</a></li>
  8.   <li class="active"><a href="#">数学</a></li>
  9.   <li><a href="#">英语</a></li>
  10. </ul>
  11. <ul class="sui-nav nav-tabs nav-xlarge nav-primary">
  12.   <li><a>前端</a></li>
  13.   <li class="active"><a href="#">后端</a></li>
  14.   <li><a href="#">运维</a></li>
  15. </ul>
  16. <h3>垂直</h3>
  17. <ul class="sui-nav nav-tabs nav-primary nav-large tab-vertical">
  18.   <li><a>标签一</a></li>
  19.   <li class="active"><a href="#">标签二</a></li>
  20.   <li><a href="#">标签二</a></li>
  21. </ul>
首要标签页，添加 nav-primary

胶囊样式

  1. <ul class="sui-nav nav-tabs nav-pills">
  2.   <li class="active"><a>标签一</a></li>
  3.   <li><a href="#">标签二</a></li>
  4.   <li><a href="#">标签二</a></li>
  5. </ul>
  6. <ul class="sui-nav nav-tabs nav-large nav-pills">
  7.   <li><a>语文</a></li>
  8.   <li class="active"><a href="#">数学</a></li>
  9.   <li><a href="#">英语</a></li>
  10. </ul>
  11. <ul class="sui-nav nav-tabs nav-xlarge nav-pills">
  12.   <li><a>前端</a></li>
  13.   <li class="active"><a href="#">后端</a></li>
  14.   <li><a href="#">运维</a></li>
  15. </ul>
  16. <h3>垂直</h3>
  17. <ul class="sui-nav nav-tabs nav-xlarge nav-pills tab-vertical">
  18.   <li><a>前端</a></li>
  19.   <li class="active"><a href="#">后端</a></li>
  20.   <li><a href="#">运维</a></li>
  21. </ul>

导航条样式

  1. <ul class="sui-nav nav-tabs tab-navbar">
  2.   <li class="active"><a>标签一</a></li>
  3.   <li><a href="#">标签二</a></li>
  4.   <li><a href="#">标签二</a></li>
  5. </ul>
  6. <ul class="sui-nav nav-tabs nav-large tab-navbar">
  7.   <li><a>语文</a></li>
  8.   <li class="active"><a href="#">数学</a></li>
  9.   <li><a href="#">英语</a></li>
  10. </ul>
  11. <ul class="sui-nav nav-tabs nav-xlarge tab-navbar">
  12.   <li><a>前端</a></li>
  13.   <li><a href="#">后端</a></li>
  14.   <li class="active"><a href="#">运维</a></li>
  15. </ul><br>
  16. <ul class="sui-nav nav-tabs tab-navbar tab-light">
  17.   <li class="active"><a>标签一</a></li>
  18.   <li><a href="#">标签二</a></li>
  19.   <li><a href="#">标签二</a></li>
  20. </ul>
  21. <ul class="sui-nav nav-tabs nav-large tab-navbar tab-light">
  22.   <li><a>语文</a></li>
  23.   <li class="active"><a href="#">数学</a></li>
  24.   <li><a href="#">英语</a></li>
  25. </ul>
  26. <ul class="sui-nav nav-tabs nav-xlarge tab-navbar tab-light">
  27.   <li><a>前端</a></li>
  28.   <li><a href="#">后端</a></li>
  29.   <li class="active"><a href="#">运维</a></li>
  30. </ul>
  31. <h3>垂直</h3>
  32. <ul class="sui-nav nav-tabs nav-xlarge tab-navbar tab-vertical">
  33.   <li class="active"><a>前端</a></li>
  34.   <li><a href="#">后端</a></li>
  35.   <li><a href="#">运维</a></li>
  36. </ul>
  37. <ul class="sui-nav nav-tabs nav-xlarge tab-navbar tab-vertical">
  38.   <li><a>前端</a></li>
  39.   <li class="active"><a href="#">后端</a></li>
  40.   <li><a href="#">运维</a></li>
  41. </ul>
  42. <ul class="sui-nav nav-tabs nav-xlarge tab-navbar tab-vertical">
  43.   <li><a>前端</a></li>
  44.   <li><a href="#">后端</a></li>
  45.   <li class="active"><a href="#">运维</a></li>
  46. </ul><br>
  47. <ul class="sui-nav nav-tabs nav-xlarge tab-navbar tab-vertical tab-light">
  48.   <li class="active"><a>前端</a></li>
  49.   <li><a href="#">后端</a></li>
  50.   <li><a href="#">运维</a></li>
  51. </ul>
  52. <ul class="sui-nav nav-tabs nav-xlarge tab-navbar tab-vertical tab-light">
  53.   <li><a>前端</a></li>
  54.   <li class="active"><a href="#">后端</a></li>
  55.   <li><a href="#">运维</a></li>
  56. </ul>
  57. <ul class="sui-nav nav-tabs nav-xlarge tab-navbar tab-vertical tab-light">
  58.   <li><a>前端</a></li>
  59.   <li><a href="#">后端</a></li>
  60.   <li class="active"><a href="#">运维</a></li>
  61. </ul>

包裹内容

  • 注意，需要在sui-nav和tab-content上都加上 .tab-wraped
  • 默认是四列，可以通过在sui-nav加上 .column3 / .column5 变成3列/5列。
  • 内部的label和ul的宽度可以根据需求自己调整。

qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park

Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

help!!!help!!!help!!!help!!!help!!!help!!!help!!!help!!!help!!!help!!!help!!!

  1. <style>
  2.   /*自己调整宽度*/
  3.   .tab-wraped > li ul {
  4.     width: 140px;
  5.   }
  6.   .tab-wraped > li ul label {
  7.     width: 50px!important;
  8.   }
  9. </style>
  10. <ul class="sui-nav nav-tabs tab-wraped">
  11.   <li class="active"><a href="#index" data-toggle="tab">
  12.       <h3>海贼王</h3>
  13.       <ul class="unstyled">
  14.         <li>
  15.           <label>总赏金</label><strong class="sui-text-warning">999,999</strong>
  16.         </li>
  17.         <li>
  18.           <label>占比</label><span class="sui-text-info">33%</span>
  19.         </li>
  20.       </ul></a></li>
  21.   <li><a href="#profile" data-toggle="tab">
  22.       <h3>海贼王</h3>
  23.       <ul class="unstyled">
  24.         <li>
  25.           <label>总赏金</label><strong class="sui-text-warning">999,999</strong>
  26.         </li>
  27.         <li>
  28.           <label>占比</label><span class="sui-text-info">33%</span>
  29.         </li>
  30.       </ul></a></li>
  31.   <li><a href="#about" data-toggle="tab">
  32.       <h3>海贼王</h3>
  33.       <ul class="unstyled">
  34.         <li>
  35.           <label>总赏金</label><strong class="sui-text-warning">999,999</strong>
  36.         </li>
  37.         <li>
  38.           <label>占比</label><span class="sui-text-info">33%</span>
  39.         </li>
  40.       </ul></a></li>
  41.   <li><a href="#help" data-toggle="tab">
  42.       <h3>海贼王</h3>
  43.       <ul class="unstyled">
  44.         <li>
  45.           <label>总赏金</label><strong class="sui-text-warning">999,999</strong>
  46.         </li>
  47.         <li>
  48.           <label>占比</label><span class="sui-text-info">33%</span>
  49.         </li>
  50.       </ul></a></li>
  51. </ul>
  52. <div class="tab-content tab-wraped">
  53.   <div id="index" class="tab-pane active">
  54.     <p>qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
  55.   </div>
  56.   <div id="profile" class="tab-pane">
  57.     <p>Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park</p>
  58.   </div>
  59.   <div id="about" class="tab-pane">
  60.     <p>Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
  61.   </div>
  62.   <div id="help" class="tab-pane">
  63.     <p>help!!!help!!!help!!!help!!!help!!!help!!!help!!!help!!!help!!!help!!!help!!!</p>
  64.   </div>
  65. </div>
  • @time 2014.03.07
  • @author [本站仅为SUI文档保留的镜像站，与官方无关]