Bootstrap 中的插件的学习2(导航)

实例

在导航栏内

下面的实例演示了在导航栏内的下拉菜单的用法：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <link href="/stylesheets/bootstrap.min.css" rel="stylesheet" >
  5. <script src="/scripts/jquery.min.js"></script>
  6. <script src="/scripts/bootstrap.min.js"></script>
  7. </head>
  8. <body>
  9. <nav class="navbar navbar-default" role="navigation">
  10. <div class="navbar-header">
  11. <a class="navbar-brand" href="#">W3Cschool</a>
  12. </div>
  13. <div>
  14. <ul class="nav navbar-nav">
  15. <li class="active"><a href="#">iOS</a></li>
  16. <li><a href="#">SVN</a></li>
  17. <li class="dropdown">
  18. <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  19. Java
  20. <b class="caret"></b>
  21. </a>
  22. <ul class="dropdown-menu">
  23. <li><a href="#">jmeter</a></li>
  24. <li><a href="#">EJB</a></li>
  25. <li><a href="#">Jasper Report</a></li>
  26. <li class="divider"></li>
  27. <li><a href="#">分离的链接</a></li>
  28. <li class="divider"></li>
  29. <li><a href="#">另一个分离的链接</a></li>
  30. </ul>
  31. </li>
  32. </ul>
  33. </div>
  34. </nav>
  35. </body>
  36. </html>

在标签页内

  1. <p>带有下拉菜单的标签页</p>
  2. <ul class="nav nav-tabs">
  3. <li class="active"><a href="#">Home</a></li>
  4. <li><a href="#">SVN</a></li>
  5. <li><a href="#">iOS</a></li>
  6. <li><a href="#">VB.Net</a></li>
  7. <li class="dropdown">
  8. <a class="dropdown-toggle" data-toggle="dropdown" href="#">
  9. Java <span class="caret"></span>
  10. </a>
  11. <ul class="dropdown-menu">
  12. <li><a href="#">Swing</a></li>
  13. <li><a href="#">jMeter</a></li>
  14. <li><a href="#">EJB</a></li>
  15. <li class="divider"></li>
  16. <li><a href="#">分离的链接</a></li>
  17. </ul>
  18. </li>
  19. <li><a href="#">PHP</a></li>
  20. </ul>
  23. 代码： 
    <!DOCTYPE HTML>
<html>
<head>
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" >
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
 </head>
<body>
<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="javascripts:void(0);">AAA</a>
   </div>
   <div>
      <ul class="nav navbar-nav">
         <li class="active"><a href="javascripts:void(0);">iOS</a></li>
         <li><a href="javascripts:void(0);">SVN</a></li>
         <li class="dropdown">
            <a href="javascripts:void(0);" class="dropdown-toggle" data-toggle="dropdown">
               Java
               <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="javascripts:void(0);">jmeter</a></li>
               <li><a href="javascripts:void(0);">EJB</a></li>
               <li><a href="javascripts:void(0);">Jasper Report</a></li>
               <li class="divider"></li>
               <li><a href="javascripts:void(0);">分离的链接</a></li>
               <li class="divider"></li>
               <li><a href="javascripts:void(0);">另一个分离的链接</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>
<p>带有下拉菜单的标签页</p>
<ul class="nav nav-tabs">
   <li class="active"><a href="javascripts:void(0);">Home</a></li>
   <li><a href="javascripts:void(0);">SVN</a></li>
   <li><a href="javascripts:void(0);">iOS</a></li>
   <li><a href="javascripts:void(0);">VB.Net</a></li>
   <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="javascripts:void(0);">
         Java <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
         <li><a href="javascripts:void(0);">Swing</a></li>
         <li><a href="javascripts:void(0);">jMeter</a></li>
         <li><a href="javascripts:void(0);">EJB</a></li>
         <li class="divider"></li>
         <li><a href="javascripts:void(0);">分离的链接</a></li>
      </ul>
   </li>
   <li><a href="javascripts:void(0);">PHP</a></li>
</ul>
</body>
</html>

    用法

    可以切换下拉菜单（Dropdown）插件的隐藏内容：

    　　通过 data 属性：向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单，如下所示：

    1. <div class="dropdown">
    2. <a data-toggle="dropdown" href="#">下拉菜单（Dropdown）触发器</a>
    3. <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    4. ...
    5. </ul>
    6. </div>

    　　如果您需要保持链接完整（在浏览器不启用 JavaScript 时有用），请使用data-target 属性代替 href="#"：

    1. <div class="dropdown">
    2. <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    3. 下拉菜单（Dropdown） <span class="caret"></span>
    4. </a>
    5.  
    6. <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    7. ...
    8. </ul>
    9. </div>

    　　通过 JavaScript：通过 JavaScript 调用下拉菜单切换，请使用下面的方法：

    1. $('.dropdown-toggle').dropdown()

       

      方法

      下拉菜单切换有一个简单的方法用来显示或隐藏下拉菜单。

      1. $().dropdown('toggle')

      导航条实例

      ScrollSpy插件根据滚动的位置自动更新导航条中相应的导航项。

      拖动下面区域的滚动条，使其低于导航条的位置，注意观察active类的变化。下拉菜单中的子项也会跟着变为高亮状态。

      <!DOCTYPE HTML>
<html>
<head>
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" > 
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
 </head>
<body>
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
   <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" 
         data-target=".bs-js-navbar-scrollspy">
         <span class="sr-only">切换导航</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">教程名称</a>
   </div>
   <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
      <ul class="nav navbar-nav">
         <li><a href="#ios">iOS</a></li>
         <li><a href="#svn">SVN</a></li>
         <li class="dropdown">
            <a href="#" id="navbarDrop1" class="dropdown-toggle" 
               data-toggle="dropdown">Java
               <b class="caret"></b>
            </a>
            <ul class="dropdown-menu" role="menu" 
               aria-labelledby="navbarDrop1">
               <li><a href="#jmeter" tabindex="-1">jmeter</a></li>
               <li><a href="#ejb" tabindex="-1">ejb</a></li>
               <li class="divider"></li>
               <li><a href="#spring" tabindex="-1">spring</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0" 
   style="height:200px;overflow:auto; position: relative;">
   <h4 id="ios">iOS</h4>
   <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple 
      TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。
   </p>
   <h4 id="svn">SVN</h4>
   <p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。
   </p>
   <h4 id="jmeter">jMeter</h4>
   <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。
   </p>
   <h4 id="ejb">EJB</h4>
   <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
   </p>
   <h4 id="spring">Spring</h4>
   <p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。
   </p>
   <p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。
   </p>
</div>
</body>
</html>

      调用方式

      通过data属性

      只需将data-spy="scroll"添加到被监听的页面元素上（大部分情况是添加到body上），然后将data-target=".navbar"添加到导航部分，仅此而已，顶部导航条就拥有了监听滚动的功能。你可能希望将滚动监听应用到.nav组件上。

      1. <body data-spy="scroll" data-target=".navbar">...</body>

      方法

      .scrollspy('refresh')

      当滚动监听所作用的DOM有增删页面元素的操作时，需要调用下面的refresh方法：

      1. $('[data-spy="scroll"]').each(function () {
      2. var $spy = $(this).scrollspy('refresh')
      3. });

      4. 参数

        可以通过 data 属性或 JavaScript 传递参数。对于 data 属性，其名称是将参数名附着到 data- 后面组成，例如 data-offset=""。

        名称类型默认值描述
        offset number 10 计算滚动位置时相对于顶部的偏移量（像素数）。

    2. 事件

      下表列出了滚动监听中要用到事件。

      事件描述实例
      activate.bs.scrollspy 每当一个新项目被滚动监听激活时，触发该事件。
      1. $('#myScrollspy').on('activate.bs.scrollspy', function () {
      2. // 执行一些动作...
      3. })

    4. 通过JavaScript

      通过JavaScript启动滚动监听：

      1. $('#navbar').scrollspy()

      注意！ 必须为导航条中的链接指定相应的目标id。例如，<a href="#home">home</a>必须和dom中类似<div id="home"></div>的页面元素相呼应。

posted on 2016-05-13 16:45  airycode  阅读(271)  评论(0)  编辑  收藏  举报

导航