实现Bootstrap下拉列表框鼠标滑过时打开的jQuery插件
您当前位置： &
[ 所属分类
| 时间 2015 |
作者 红领巾 ]
bootstrap-dropdown-hover是一款简单实用的可以实现Bootstrap下拉列表框鼠标滑过时打开的jQuery插件。原生的Bootstrap下拉列表框只有在鼠标点击时才能打开。该插件对其进行了改进，使它能够在鼠标滑过时打开。
实现这种效果的方式有很多种，但是或多或少会有一些问题存在。最简单方法是操纵CSS类，即不在其父元素上使用.openclass，但是这样做在下拉菜单显示的时候就没有了响应。 这个插件通过原生的Bootstrap
API来完成下拉菜单在鼠标滑过时的打开操作。没有任何副作用，可以完美的兼容移动手机的Touch事件。
首先需要引入jQuery和Bootstrap依赖文件以及jquery.bootstrap-dropdown-hover.min.js文件。
&link rel="stylesheet" href="///bootstrap/3.3.5/css/bootstrap.min.css"&
&script src="js/1.11.3/jquery.min.js"&&/script&
&script src="///bootstrap/3.3.5/js/bootstrap.min.js"&&/script&
&script src="dist/jquery.bootstrap-dropdown-hover.min.js"&&/script&
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&
&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&
初始化插件
可以通过下面的几种方法来初始化该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下拉列表框的行为。
本文版权属于jQuery之家，转载请注明出处： /jQuery/Menu-Navigation/.html
本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
既然降生到这世上，我就要好好看看它，找到属于自己的世界第一。
手机客户端
，专注代码审计及安全周边编程，转载请注明出处：http://www.codesec.net
转载文章如有侵权，请邮件 admin[at]codesec.net当前访客身份：游客 [
这个人很懒，啥也没写
：写得棒棒哒！博主，我们做了一个帮助博主推广博客...
：引用来自“gzp1124”的评论 nnnnnn nnnnnmmmmmm...
：uuuuuuui
今日访问：34
昨日访问：37
本周访问：171
本月访问：239
所有访问：2848
Html5添加实现Bootstrap下拉列表框鼠标滑过时打开的插件教程
发表于3个月前( 18:09)&&
阅读（141）&|&评论（）
0人收藏此文章,
一、使用方法&link rel="stylesheet" href="///bootstrap/3.3.5/css/bootstrap.min.css"&&script src="js/1.11.3/jquery.min.js"&&/script&&script src="///bootstrap/3.3.5/js/bootstrap.min.js"&&/script&&script src="dist/jquery.bootstrap-dropdown-hover.min.js"&&/script&&&&& &二、Html结构&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&三、初始化插件方法一：$.fn.bootstrapDropdownHover({// 配置参数});&&&&&&&&&&&&&& &方法二：$('[data-toggle="dropdown"]').bootstrapDropdownHover({});&&&&&&&&&&&&&& &如果是一个navbar，可通过下面的方式来初始化：$('.navbar [data-toggle="dropdown"]').bootstrapDropdownHover({});四、方法$(selector).bootstrapDropdownHover(methodName, parameter);&&&& &KeyMob,专注于移动端广告平台。KeyMob手机端广告平台是国内领先的移动端广告平台,我们致力于为广告主打造一个多方共赢的手机移动广告平台。
更多开发者职位上
1)">1)">1" ng-class="{current:{{currentPage==page}}}" ng-repeat="page in pages"><li class='page' ng-if="(endIndex<li class='page next' ng-if="(currentPage
相关文章阅读感谢本文作者
昵称：阿迪王
加入时间： 0:00:00
这家伙很懒，虾米都没写
以下内容也很赞哦bootstrap下拉菜单dropdown menu能否做成一级菜单也带链接？
bootstrap的下拉菜单中，第一级的菜单点击后，会弹出第二级的菜单，我想这是为了考虑手机才会这么做的吧，因为手机上没有鼠标划过这个动作，只有点击动作。但是很多网站是需要一级菜单带链接的，这个需要怎么做呢，同时又能考虑到手机。谢谢。
按投票排序
解决了吗？我也有这样的需求
已有帐号？
无法登录？
社交帐号登录How to work with the Bootstrap DropDown in AngularJS
- Evangelism -
How to work with the Bootstrap DropDown in AngularJS
In this post we will learn how to work with the Bootstrap dropdown in an AngularJS APP. In a step by step by approach, we&ll cover how to:
1.Bind a dropdown
2.Select an item in the drop down an
3.Bind a dropdown with the Web API
Bootstrap dropdown
A simple bootstrap dropdown button can be created as shown in the listing below:
&div class=&dropdown&&
&&&&&&& &button class=&btn btn-default dropdown-toggle& type=&button& id=&dropdownMenu1& data-toggle=&dropdown& aria-haspopup=&true& aria-expanded=&true&&
&&&&&&&&&&& Subject
&&&&&&&&&&& &span class=&caret&&span&
&&&&&&& button&
&&&&&&& &ul class=&dropdown-menu& aria-labelledby=&dropdownMenu1&&
&&&&&&&&&&& &li&&a href=&#&&Physicsa&li&
&&&&&&&&&&& &li&&a href=&#&&Matha&li&
&&&&&&&&&&& &li&&a href=&#&&Chemistrya&li&
&&&&&&&&&&& &li&&a href=&#&&Hindia&li&
&&&&&&& ul&
In the dropdown we&ve created above, we will be navigated to another view or page on selecting an item and all the items are hard coded in the dropdown.
Bootstrap dropdown with AngularJS controller data
Now let us assume that we need to create a bootstrap dropdown in the AngularJS application. To create that, first we need to make sure that the reference of bootstrap CSS is added in the project, as shown in the listing below:
&& &link href=&../Content/bootstrap.css& rel=&stylesheet& /&
&&& &script src=&../Scripts/angular.js&&script&
&&& &script src=&../Scripts/angular-route.js&&script&
&&& &script src=&home.js&&script&
Next let us create AngularJS controller. In the controller there is an array called subjects which will be bound to the bootstrap dropdown. The controller can be created as shown in the listing below:
MyApp.controller(&#39;SubjectDropDownController&#39;, function ($scope) {
&&& $scope.subjects = [&#39;Math&#39;, &#39;Physics&#39;, &#39;Chemistry&#39;, &#39;Hindi&#39;, &#39;English&#39;];
We can bind the subjects array to create a dropdown as shown in the listing below:
&div ng-controller=&SubjectDropDownController&&
&&& &div class=&dropdown&&
&&&&&&& &button class=&btn btn-default dropdown-toggle& type=&button& id=&dropdownMenu1& data-toggle=&dropdown& aria-haspopup=&true& aria-expanded=&true&&
&&&&&&&&&&& Subject
&&&&&&&&&&& &span class=&caret&&span&
&&&&&&& button&
&&&&&&& &ul class=&dropdown-menu& aria-labelledby=&dropdownMenu1&&
&&&&&&&&&&& &li ng-repeat=&a in subjects&&&a href=&#&&{{a}}a&li&
&&&&&&& ul&
Here we&re doing the following tasks to bind the array from the AngularJS controller in the bootstrap dropdown:
1.Setting the ng-controller value to the SubjectDropDownController
2.Using the ng-repeat directive on li element to repeat the elements from the array
In the above dropdown, all the items are links which we will navigate to by clicking them. To invoke a controller function on the dropdown item click, we need to use the ng-click directive as shown in the listing below:
&div ng-controller=&SubjectDropDownController&&
&&& &div class=&dropdown&&
&&&&&&& &button class=&btn btn-default dropdown-toggle& type=&button& id=&dropdownMenu1& data-toggle=&dropdown& aria-haspopup=&true& aria-expanded=&true&&
&&&&&&&&&&& Subject
&&&&&&&&&&& &span class=&caret&&span&
&&&&&&& button&
&&&&&&& &ul class=&dropdown-menu& aria-labelledby=&dropdownMenu1&&
&&&&&&&&&&& &li ng-repeat=&a in subjects&&&a ng-click=&dropboxitemselected()&&{{a}}a&li&
&&&&&&& ul&
In the controller we need to create a function as shown in the listing below:
MyApp.controller(&#39;SubjectDropDownController&#39;, function ($scope) {
&&& $scope.subjects = [&#39;Math&#39;, &#39;Physics&#39;, &#39;Chemistry&#39;, &#39;Hindi&#39;, &#39;English&#39;];
&&& $scope.dropboxitemselected = function () {
&&&&&&& alert(&drop box item selected&);
Selecting an Item in the Dropdown
One common requirement in the dropdown would be to select an item. There might be other ways of doing it, but I prefer to do it in a simple way as discussed in the following steps:
1.Create a variable on the $scope in the controller. Let us say the variable name is selecteditem
2.On the ng-click directive, call a function and pass the item in the function
3.Assign the item which is passed as parameter in the function to the selecteditem variable
4.Data bind the dropdown display item to the selecteditem variable
The controller can be modified as shown in the listing below:
MyApp.controller(&#39;SubjectDropDownController&#39;, function ($scope) {
&&& $scope.subjects = [&#39;Math&#39;, &#39;Physics&#39;, &#39;Chemistry&#39;, &#39;Hindi&#39;, &#39;English&#39;];
&&& $scope.selectedI
&&& $scope.dropboxitemselected = function (item) {
&&&&&&& $scope.selectedItem =
&&&&&&& alert($scope.selectedItem);
And the drop down can be modified to bind the selected item as shown in the listing below:
&div ng-controller=&SubjectDropDownController&&
&&& &div class=&dropdown&&
&&&&&&& &button class=&btn btn-default dropdown-toggle& type=&button& id=&dropdownMenu1& data-toggle=&dropdown& aria-haspopup=&true& aria-expanded=&true&&
&&&&&&&&&&& {{selectedItem}}
&&&&&&&&&&& &span class=&caret&&span&
&&&&&&& button&
&&&&&&& &ul class=&dropdown-menu& aria-labelledby=&dropdownMenu1&&
&&&&&&&&&&& &li ng-repeat=&a in subjects&&&a ng-click=&dropboxitemselected(a)&&{{a}}a&li&
&&&&&&& ul&
Getting data from the web API
In real time applications, we may have to bring data from the database and bind to the UI. There are various ways to expose data from the database. One of the most popular approach is writing the Web API.& If required, you may want to read
Now let&s say we have created the Web API, and in the AngularJS application we need to create a service to work with the Web API. This can be created as shown in the listing below:
MyApp.factory(&#39;TeacherService&#39;, [&#39;$http&#39;, function ($http) {
&&& var urlBase = &#39;http://localhost:25221/api&#39;;
&&& var TeacherService = {};
&&& TeacherService.getSubjects = function () {
&&&&&&& return $http.get(urlBase + &#39;/Subjects&#39;);
Next, in the controller we need to use the AngularJS service to fetch the data from the Web API. &We passed TeacherService as the dependency and then called getSubjects() function of the service to fetch the data from the Web API.
MyApp.controller(&#39;SubjectDropDownController&#39;, function ($scope, TeacherService) {
&&& //$scope.subjects = [&#39;Math&#39;, &#39;Physics&#39;, &#39;Chemistry&#39;, &#39;Hindi&#39;, &#39;English&#39;];
&&& $scope.
&&& $scope.selectedI
&&& $scope.dropboxitemselected = function (item) {
&&&&&&& $scope.selectedItem =
&&&&&&& alert($scope.selectedItem);
&&& getSubjects();
&&& function getSubjects() {
&&&&&&& TeacherService.getSubjects()
&&&&&&&&&&& .success(function (subjects) {
&&&&&&&&&&&&&&& $scope.subjects =
&&&&&&&&&&&&&&& console.log($scope.subjects);
&&&&&&&&&&& })
&&&&&&&&&&& .error(function (error) {
&&&&&&&&&&&&&&& $scope.status = &#39;Unable to load subject data: &#39; + error.
&&&&&&&&&&& });
In this way, we can easily fetch data from the database and bind it to the bootstrap dropdown in an AngularJS application. I hope you found this post useful. Thanks for reading!
Tags / , ,
dafuq went wrong with the indentation ? :o
If you&re a SharePoint user, then OneDrive for Business is the cloud storage service for you. It's not to be confused with OneDrive, its sister ...
What is the IGOverlayView?
The&IGOverlayView&is a powerful and extremely flexible control for displaying any type of view that will ove...