Bootstrap Coder
bootstrap一个美丽的前端框架,努力让他更完美。
bootstrap中的dropdown组件扩展hover事件

bootstrap的下拉组件,需要点击click时,方可展示下拉列表。因此对于喜欢简单少操作的大家来说,点击一下多少带来不便,因此,引入hover监听,鼠标经过自动展示下拉框。

其实在bootstrap导航条当中dropdown组件用得特别频繁啦!

QQ截图20141126225510.jpg


如何实现这个hover事件呢,其实在dropdown组件的点击事件的基础上很好完成的。细心者可以发现,下拉框出现时,其父级会有一个open的class属性。我们只需要监听hover时间时,给父级增加或删除open类就可以了。

下面是完整的js插件代码:

// bootstrap响应式导航条
;(function($, window, undefined) {
    // outside the scope of the jQuery plugin to
    // keep track of all dropdowns
    var $allDropdowns = $();
    // if instantlyCloseOthers is true, then it will instantly
    // shut other nav items when a new one is hovered over
    $.fn.dropdownHover = function(options) {

        // the element we really care about
        // is the dropdown-toggle's parent
        $allDropdowns = $allDropdowns.add(this.parent());

        return this.each(function() {
            var $this = $(this).parent(),
                defaults = {
                    delay: 300,
                    instantlyCloseOthers: true
                },
                data = {
                    delay: $(this).data('delay'),
                    instantlyCloseOthers: $(this).data('close-others')
                },
                options = $.extend(true, {}, defaults, options, data),
                timeout;

            $this.hover(function() {
                if(options.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');

                window.clearTimeout(timeout);
                $(this).addClass('open');
            }, function() {
                timeout = window.setTimeout(function() {
                    $this.removeClass('open');
                }, options.delay);
            });
        });
    };

    $('[data-hover="dropdown"]').dropdownHover();
})(jQuery, this);

加上以上js代码后,需要给元素加上属性  

data-hover="dropdown"

完整的html元素代码:

<a href="#" class="dropdown-toggle head-usr-img" data-toggle="dropdown" data-hover="dropdown">
<< 上一篇 d3js树状图tree 实时推送技术的概念及实例 下一篇 >>
文章标签
随意 | Created At 2014 By William Clinton | Contact Me: 1619488373@qq.com | 蜀ICP备14002619号 |