实现Bootstrap下拉列表框鼠标滑过时打开的jQuery插件

当前位置:主页 > jQuery库 > 菜单和导航 > 实现Bootstrap下拉列表框鼠标滑过时打开的jQuery插件
实现Bootstrap下拉列表框鼠标滑过时打开的jQuery插件
分享:

    插件介绍

    bootstrap-dropdown-hover是一款简单实用的可以实现Bootstrap下拉列表框鼠标滑过时打开的jQuery插件。原生的Bootstrap下拉列表框只有在鼠标点击时才能打开。该插件对其进行了改进,使它能够在鼠标滑过时打开。

    浏览器兼容性

    浏览器兼容性
    时间:2015-07-10
    阅读:
简要教程

bootstrap-dropdown-hover是一款简单实用的可以实现Bootstrap下拉列表框鼠标滑过时打开的jQuery插件。原生的Bootstrap下拉列表框只有在鼠标点击时才能打开。该插件对其进行了改进,使它能够在鼠标滑过时打开。

实现这种效果的方式有很多种,但是或多或少会有一些问题存在。最简单方法是操纵CSS类,即不在其父元素上使用.open class,但是这样做在下拉菜单显示的时候就没有了响应。

这个插件通过原生的Bootstrap javascript API来完成下拉菜单在鼠标滑过时的打开操作。没有任何副作用,可以完美的兼容移动手机的Touch事件。

使用方法

首先需要引入jQuery和Bootstrap依赖文件以及jquery.bootstrap-dropdown-hover.min.js文件。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="js/1.11.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="dist/jquery.bootstrap-dropdown-hover.min.js"></script>                
              
HTML结构

HTML结构可以使用任何标准的Bootstrap下拉列表框的结构。下面是一个标准的单按钮下拉菜单的结构:

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" 
     data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
              
初始化插件

可以通过下面的几种方法来初始化该bootstrap插件:

方法一:

$.fn.bootstrapDropdownHover({
  // 配置参数
});                
              

方法二:

$('[data-toggle="dropdown"]').bootstrapDropdownHover({
  // 配置参数
});                
              

如果是一个navbar,可通过下面的方式来初始化:

$('.navbar [data-toggle="dropdown"]').bootstrapDropdownHover({
  // 配置参数
});                
              

配置参数

在调用bootstrapDropdownHover()方法的时候,你可以传入一些可用的配置参数:

  • clickBehavior:可选值有:'sticky'|'default'|'disable'。默认值为:sticky
    • sticky:在打开下拉列表框后,当鼠标离开下拉列表区域时它不会主动关闭,而是要通过鼠标点击才能关闭。
    • default:表示下拉列表既可以通过鼠标滑过打开关闭,也可以通过鼠标点击来打开关闭。
    • disable:只有在鼠标滑过时可以打开关闭下拉菜单,点击不起作用。
  • hideTimeout:类型:integer,默认值:200,单位毫秒。在鼠标离开下拉菜单之后多长时间它才会隐藏。

方法

你可以通过调用下面的方法来改变插件的行为。要在任何下拉列表框实例对象上调用方法,使用下面的语法:

$(selector).bootstrapDropdownHover(methodName, parameter);                
              

下面是可用的方法:

  • setClickBehavior(value):改变clickBehavior参数的值。
  • setHideTimeout(value):改变hideTimeout参数的值。

你还可以通过调用destroy()方法来恢复原生Bootstrap下拉列表框的行为。