导航 - AuxUI - 模块化前端UI框架

使用下拉菜单时需要加载element模块，可通过下列方式加载

//加载element模块
auxui(['element'], function (){
    //加载后执行一些动作和事件处理
});

实例

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">首页</a></li>
  <li role="presentation"><a href="#">新闻</a></li>
  <li role="presentation"><a href="#">下载</a></li>
</ul>

胶囊式标签页

HTML 标记相同，但使用 .nav-pills 类：

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">首页</a></li>
  <li role="presentation"><a href="#">资讯</a></li>
  <li role="presentation"><a href="#">产品</a></li>
</ul>

胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked 类。

<ul class="nav nav-pills nav-stacked nav-pills-stacked-example">
  <li role="presentation" class="active"><a href="javascript:;">首页</a></li>
  <li role="presentation"><a href="javascript:;">视频</a></li>
  <li role="presentation"><a href="javascript:;">文章</a></li>
</ul>

两端对齐的标签页

在大于 768px 的屏幕上，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。

<ul class="nav nav-pills nav-justified">
  <li role="presentation" class="active"><a href="javascript:;">作品</a></li>
  <li role="presentation"><a href="javascript:;">产品</a></li>
  <li role="presentation"><a href="javascript:;">消息</a></li>
</ul>

禁用的链接

对任何导航组件（标签页、胶囊式标签页），都可以添加 .disabled 类，从而实现链接为灰色且没有鼠标悬停效果。

链接功能不受到影响

这个类只改变 <a> 的外观，不改变功能。可以自己写 JavaScript 禁用这里的链接。

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">禁用链接</a></li>
  ...
</ul>

带下拉菜单的标签页

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="javascript:;">首页</a></li>
  <li role="presentation"><a href="javascript:;">帮助</a></li>
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;" role="button" aria-haspopup="true" aria-expanded="false">
      下拉菜单<span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li><a href="javascript:;">子菜单</a></li>
      <li><a href="javascript:;">子菜单</a></li>
      <li><a href="javascript:;">子菜单</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="javascript:;">子菜单</a></li>
    </ul>
  </li>
</ul>

带下拉菜单的胶囊式标签页

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="javascript:;">首页</a></li>
  <li role="presentation"><a href="javascript:;">帮助</a></li>
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;" role="button" aria-haspopup="true" aria-expanded="false">
      下拉菜单 <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li><a href="javascript:;">子菜单</a></li>
      <li><a href="javascript:;">子菜单</a></li>
      <li><a href="javascript:;">子菜单</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="javascript:;">子菜单</a></li>
    </ul>
  </li>
</ul>