Bootstrap JS插件使用实例(3)-下拉菜单

本篇文章讨论Bootstrap的js下拉菜单插件(bootstrap-dropdown.js)

先看个简单示例，可直接粘贴运行：

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉菜单示例</title>
<link href="http://www.see-source.com/bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-dropdown.js"></script>
</head>
<body>
  <div class="dropdown">
    <a data-toggle="dropdown" href="#">java开源项目</a>
    <ul class="dropdown-menu">
      <li><a href="#">struts1</a></li>
      <li><a href="#">struts2</a></li>
      <li><a href="#">spring</a></li>
    </ul>
  </div>
</body>
</html>

需要注意：

Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 doctype。因此这一文档类型必须出现在项目的每个页面的开始部分：

<!DOCTYPE html> 
<html lang="en"> 
 ... 
</html>

下面来对上面的代码进行解析下：

bootstrap.css Bootstrap 样式库，这是必不可少的。

jquery.js 引入jquery，Bootstrap插件是jquery插件，依赖于jquery。

bootstrap-dropdown.js 下拉菜单插件

<div class="dropdown">
    <a href="#">java开源项目</a>
    <ul class="dropdown-menu">
      <li><a href="#">struts1</a></li>
      <li><a href="#">struts2</a></li>
      <li><a href="#">sping</a></li>
    </ul>
  </div>

上面的代码就创建了一个下拉菜单。其中包括一个激活元件"java开源项目"，以及N个下拉菜单列表项(如：struts1、struts2、spring等)。上面的代码只是定义了下拉菜单的样式，要想使其真正成为下拉菜单有俩种方法：data属性或者js调用。如下：

1.data属性触发

只需要在激活元件上设置 data-toggle="dropdown"，如下：

<div class="dropdown">
    <a data-toggle="dropdown" href="#" id="myDropdown">java开源项目</a>
    <ul class="dropdown-menu">
      <li><a href="#">struts1</a></li>
      <li><a href="#">struts2</a></li>
      <li><a href="#">sping</a></li>
    </ul>
  </div>

2.js调用

通过js触发下拉菜单

$().dropdown()

其中$()是jquery选择器，示例如下：

<div class="dropdown">
    <a href="#" id="myDropdown">java开源项目</a>
    <ul class="dropdown-menu">
      <li><a href="#">struts1</a></li>
      <li><a href="#">struts2</a></li>
      <li><a href="#">sping</a></li>
    </ul>
  </div>

在触发元件"java开源项目"上设置id="myDropdown"(当然也可以设置其他属性，如：class属性)

$('#myDropdown').dropdown()

通过上面设置的id触发

创建简单的导航栏

下面利用bootstrap提供的样式创建个简单的导航栏：

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航栏示例</title>
<link href="http://www.see-source.com/bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-dropdown.js"></script>
</head>
<body>
  <ul class="nav nav-pills">         
     <li class="dropdown">
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">下拉 <b class="caret"></b></a>
         <ul id="menu1" class="dropdown-menu">
		    <li><a href="#">动作</a></li>
            <li><a href="#">另一个动作</a></li>
            <li><a href="#">其他</a></li>
            <li class="divider"></li>
            <li><a href="#">另一个链接</a></li>
         </ul>
     </li>
     <li class="dropdown">
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">下拉 <b class="caret"></b></a>
         <ul id="menu2" class="dropdown-menu">
		    <li><a href="#">动作</a></li>
            <li><a href="#">另一个动作</a></li>
            <li><a href="#">其他</a></li>
            <li class="divider"></li>
            <li><a href="#">另一个链接</a></li>
         </ul>
     </li>
     <li class="dropdown">
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">下拉 <b class="caret"></b></a>
         <ul id="menu3" class="dropdown-menu">
		<li><a href="#">动作</a></li>
           <li><a href="#">另一个动作</a></li>
           <li><a href="#">其他</a></li>
           <li class="divider"></li>
           <li><a href="#">另一个链接</a></li>
         </ul>
     </li>
  </ul>
</body>
</html>

上面代码可直接粘贴运行。

+友情链接