当前位置:主页 > 网页特效 > 菜单导航 >

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

发布时间:2018/08/03 来源:互联网 浏览: 关键词:jquery 菜单导航 bootstrap 下拉菜单 
实现Bootstrap下拉列表框鼠标滑过时打开的jQuery插件 实现Bootstrap下拉列表框鼠标滑过时打开的jQuery插件
阿里云

简要教程

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

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

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

使用方法

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

<linkrel="stylesheet"href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<scriptsrc="js/1.11.3/jquery.min.js"></script>
<scriptsrc="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<scriptsrc="dist/jquery.bootstrap-dropdown-hover.min.js"></script>        

HTML结构

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

<!-- Single button -->
<divclass="btn-group">
  <buttontype="button"class="btn btn-default dropdown-toggle"
     data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">
    Action <spanclass="caret"></span>
  </button>
  <ulclass="dropdown-menu">
    <li><ahref="#">Action</a></li>
    <li><ahref="#">Another action</a></li>
    <li><ahref="#">Something else here</a></li>
    <lirole="separator"class="divider"></li>
    <li><ahref="#">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下拉列表框的行为。

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top