日期:2014-05-16  浏览次数:20274 次

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

本篇文章讨论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="myDro