master

分支 (2)

标签 (4)

管理

管理

master

gh-pages

zui_1.2.stable_20141118

zui_1.2.beta_20141030

zui_1.1.stable_20140805

zui_1.0.stable_20140724

zui
/
docs
/
example
/
dropdowns.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset='utf-8'>
  <link href="../css/example.css" rel="stylesheet">

  <link rel="stylesheet/less" type="text/css" href="../src/less/zui.less" />
  <script type="text/javascript"> less = { env: "development", dumpLineNumbers:'mediaquery' }; </script>
  <script src="../assets/js/less.js"></script>
  <script src="../../assets/jquery.js"></script>
  <script src="../../dist/js/zui.min.js"></script>


  <link href="../css/zui.min.css" rel="stylesheet">

  <script src="../assets/js/example.js"></script>
</head>
<body>
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">ZUI</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span id="navbarCurrent">examples</span> <b class="caret"></b></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="alerts.html">alerts</a></li>
            <li><a href="article.html">article</a></li>
            <li><a href="breadcrumb.html">breadcrumb</a></li>
            <li><a href="button-groups.html">button-groups</a></li>
            <li><a href="buttons.html">buttons</a></li>
            <li><a href="cards.html">cards</a></li>
            <li><a href="carousel.html">carousel</a></li>
            <li><a href="chosen.html">chosen</a></li>
            <li><a href="collapse.html">collapse</a></li>
            <li><a href="colorset.html">colorset</a></li>
            <li><a href="comment.html">comment</a></li>
            <li><a href="dropdowns.html">dropdowns</a></li>
            <li><a href="forms.html">forms</a></li>
            <li><a href="grid.html">grid</a></li>
            <li><a href="icons.html">icons</a></li>
            <li><a href="input-groups.html">input-groups</a></li>
            <li><a href="kindeditor.html">kindeditor</a></li>
            <li><a href="labels.html">labels</a></li>
            <li><a href="lightbox.html">Lightbox</a></li>
            <li><a href="list-group.html">list-group</a></li>
            <li><a href="list.html">list</a></li>
            <li><a href="modals.html">modals</a></li>
            <li><a href="navbars.html">navbars</a></li>
            <li><a href="navs.html">navs</a></li>
            <li><a href="pager.html">pager</a></li>
            <li><a href="panels.html">panels</a></li>
            <li><a href="popovers.html">popovers</a></li>
            <li><a href="progress.html">progress</a></li>
            <li><a href="tables.html">tables</a></li>
            <li><a href="tabs.html">tabs</a></li>
            <li><a href="textbox.html">textbox</a></li>
            <li><a href="tooltip.html">tooltip</a></li>
            <li><a href="type.html">type</a></li>
          </ul>
        </li>
        <li id="navbarNext"><a href="###">NEXT <i class="icon-angle-right icon-large"></i></a></li>
      </ul>
    </div>
  </nav>
<article>
  <section id='dropdowns' class="page-section">
    <h1>下拉菜单</h1>

    <h3>类型</h3>
    <h4>基本类型</h4>
    <p>将下拉菜单触发器和下拉菜单都包裹在.dropdown里，或者另一个声明了position: relative;的元素。然后添加组成菜单的HTML代码。</p>
    <p>通过是否指定data-toggle='dropdown'来开关下拉菜单。</p>
    <div class="bs-example">
      <div class="dropdown clearfix">
        <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">操作 <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <li role="presentation" class="dropdown-header">Dropdown header</li>
          <li><a href="#">编辑</a></li>
          <li><a href="#">删除</a></li>
          <li class="divider"></li>
          <li role="presentation" class="dropdown-header">Dropdown header</li>
          <li><a href="#">修改</a></li>
        </ul>
      </div>
    </div><!-- /example -->
    <div style='clear:both'></div>

    <h4>导航条下来菜单</h4>
    <ul class="nav nav-primary">
      <li class="active"><a href="#">首页</a></li>
      <li><a href="#"></i>演示</a></li>
      <li><a href="#"></i>下载</a></li>
      <li>
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 团队 <span class="caret"></span> </a>
        <ul class="dropdown-menu">
          <li><a href="#">关于我们</a></li>
          <li><a href="#">开发计划</a></li>
          <li class="divider"></li>
          <li><a href="#">开源代码</a></li>
          <li><a href="#">团队博客</a></li>
        </ul>
      </li>
    </ul>

    <h4>标签下拉菜单</h4>
    <div class="dropdown">
      <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"> 操作 <span class="caret"></span> </a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li><a href="#">编辑</a></li>
        <li><a href="#">删除</a></li>
        <li class="divider"></li>
        <li><a href="#">修改</a></li>
      </ul>
    </div>

    <h4>按钮下拉菜单</h4>
    <div class="btn-group">
      <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">操作 <span class="caret"></span></button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li><a href="#">编辑</a></li>
        <li><a href="#">删除</a></li>
        <li class="divider"></li>
        <li><a href="#">修改</a></li>
      </ul>
    </div>
    <div class="btn-group">
      <button type="button" class="btn">操作</button>
      <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">编辑</a></li>
        <li><a href="#">删除</a></li>
        <li class="divider"></li>
        <li><a href="#">增加</a></li>
      </ul>
    </div>

    <h3>变化</h3>
    <h4>弹出方式</h4>
    <div class="btn-group">
      <button type="button" class="btn">默认向下</button>
      <button type="button" class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button>
      <ul class="dropdown-menu" role="menu"> <li><a href="#">div.btn-group</a></li> </ul>
    </div>
    <div class="btn-group">
      <button type="button" class="btn">下右</button>
      <button type="button" class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button>
      <ul class="dropdown-menu pull-right" role="menu"> <li><a href="#">div.btn-group > ul.dropdown-menu.pull-right</a></li> </ul>
    </div>
    <div class="btn-group dropup">
      <button type="button" class="btn">向上</button>
      <button type="button" class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button>
      <ul class="dropdown-menu" role="menu"> <li><a href="#">div.btn-group.dropup</a></li> </ul>
    </div>
    <div class="btn-group dropup">
      <button type="button" class="btn">向右</button>
      <button type="button" class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button>
      <ul class="dropdown-menu pull-right" role="menu"> <li><a href="#">div.btn-group.dropup > ul.dropdown-menu.pull-right</a></li> </ul>
    </div>

    <h4>下拉菜单的子菜单</h4>
    <div class="btn-group dropup">
      <button type="button" class="btn">编辑</button>
      <button type="button" class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
        <li><a tabindex="-1" href="#">关闭</a></li>

        <li class="dropdown-submenu">
          <a tabindex="-1" href="#">评审</a>
          <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">确认通过</a></li>
            <li><a tabindex="-1" href="#">有待明确</a></li>
            <li class="dropdown-submenu">
              <a tabindex="-1" href="#">拒绝</a>
              <ul class="dropdown-menu">
                <li><a tabindex="-1" href="#">已完成</a></li>
                <li><a tabindex="-1" href="#">延期</a></li>
                <li><a tabindex="-1" href="#">不做</a></li>
                <li><a tabindex="-1" href="#">已取消</a></li>
                <li><a tabindex="-1" href="#">设计如此</a></li>
              </ul>
            </li>
          </ul>
        </li>

        <li class="dropdown-submenu">
          <a tabindex="-1" href="#">计划</a>
          <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">Plan A</a></li>
            <li><a tabindex="-1" href="#">Plan B</a></li>
            <li><a tabindex="-1" href="#">Plan C</a></li>
            <li><a tabindex="-1" href="#">Plan D</a></li>
            <li><a tabindex="-1" href="#">Plan E</a></li>
          </ul>
        </li>

        <li class="dropdown-submenu">
          <a tabindex="-1" href="#">阶段</a>
          <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">未开始</a></li>
            <li><a tabindex="-1" href="#">已计划</a></li>
            <li><a tabindex="-1" href="#">已立项</a></li>
            <li><a tabindex="-1" href="#">研发中</a></li>
            <li><a tabindex="-1" href="#">研发完毕</a></li>
            <li><a tabindex="-1" href="#">测试中</a></li>
            <li><a tabindex="-1" href="#">测试完毕</a></li>
            <li><a tabindex="-1" href="#">已验收</a></li>
            <li><a tabindex="-1" href="#">已发布</a></li>
          </ul>
        </li>

        <li class="divider"></li>
        <li class="dropdown-submenu pull-left">
          <a tabindex="-1" href="#">.pull-left</a>
          <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">Item1</a></li>
            <li><a tabindex="-1" href="#">Item2</a></li>
          </ul>
        </li>
      </ul>
    </div>

    <h4>小标题和禁用</h4>
    <p>通过li.dropdown-header增加小标题，为li增加.disabled来禁用。</p>
    <div class="bs-example">
      <div class="dropdown">
        <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">操作<span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
          <li class="dropdown-header">基本操作</li>
          <li><a href="#">编辑</a></li>
          <li class='disabled'><a role="menuitem" tabindex="-1" href="#">修改</a></li>
          <li class="divider"></li>
          <li class="dropdown-header">其他操作</li>
          <li><a href="#">增加</a></li>
        </ul>
      </div>
    </div><!-- /example -->
    <div style='clear:both'></div>


    </section>
    </article>
  </body>
</html>