争怎路由网:是一个主要分享无线路由器安装设置经验的网站,汇总WiFi常见问题的解决方法。

Bootstrap框架下下拉菜单的完成(代码示例)

时间:2024/5/23作者:未知来源:争怎路由网人气:

isActive && e.which == 27) { //如果按下向下箭头,则给触发元素加上焦点 if (e.which == 27) $parent.find(toggle).trigger('focus') //触发单击事件 return $this.trigger('click') } //返回可以利用箭头选择的下拉菜单项 //必须是可见的a链接,并且不包括分隔符 var desc = ' li:not(.disabled):visible a' var $items = $parent.find('.dropdown-menu' + desc) //如果没有,则不做处理 if (!$items.length) return //找出当前处理焦点状态的第一个下拉菜单项的索引 var index = $items.index(e.target) //按向上箭头,index-1 if (e.which == 38 && index > 0) index-- //按向下箭头,index+1 if (e.which == 40 && index < $items.length - 1) index++ //当index为-1时,置为0 if (!~index) index = 0 //给所选择的菜单项设置焦点 $items.eq(index).trigger('focus') }

【4】jQuery插件定义

function Plugin(option) {
    //根据选择器,遍历所有符合规则的元素
    return this.each(function () {
      var $this = $(this)
      //获取自定义属性bs.dropdown的值
      var data  = $this.data('bs.dropdown')
      //如果值不存在,则将Dropdown实例设置为bs.dropdown值
      if (!data) $this.data('bs.dropdown', (data = new Dropdown(this)))
      //如果option传递了string,则表示要执行某个方法  
      if (typeof option == 'string') data[option].call($this)
    })
  }
  var old = $.fn.dropdown
  //保留其他库的$.fn.modal代码(如果定义的话),以便在noConflict之后可以继续使用该老代码
  $.fn.dropdown             = Plugin
  //重设插件构造器,可以通过该属性获取插件的真实类函数
  $.fn.dropdown.Constructor = Dropdown

【5】防冲突处理

$.fn.dropdown.noConflict = function () {
    //恢复以前的旧代码
    $.fn.dropdown = old
    //将$.fn.dropdown.noConflict()设置为Bootstrap的Dropdown插件
    return this
  }

【6】绑定触发事件

$(document)
    //为声明式的HTML绑定单击事件,在单击以后先关闭所有的下拉菜单
    .on('click.bs.dropdown.data-api', clearMenus)
    //如果内部有form元素,则阻止冒泡,不做其他处理
    .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
    //绑定单击事件,执行toggle()方法
    .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
    //绑定键盘keydown事件,执行keydown()方法
    .on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
    //为dropdown-menu绑定键盘keydown事件,执行keydown()方法
    .on('keydown.bs.dropdown.data-api', '.dropdown-menu', Dropdown.prototype.keydown)

以上就是Bootstrap框架下下拉菜单的实现(代码示例)的详细内容,更多请关注php中文网其它相关文章!


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



关键词:Bootstrap框架下下拉菜单的完成(代码示例)




Copyright © 2012-2018 争怎路由网(http://www.zhengzen.com) .All Rights Reserved 网站地图 友情链接

免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版