在Twitter Bootstrap Scrollspy中排除ID [英] Exclude ID in Twitter Bootstrap Scrollspy

问题描述

我有一个Twitter Bootstrap网站，主菜单上有很多链接。我有Scrollspy设置来定位该菜单并且效果很好。

I have a Twitter Bootstrap site with a main menu full of links. I have Scrollspy setup to target that menu and works great.

但是，我需要使用scrollspy来排除菜单中的最后一个链接。有没有简单的选项或属性来做到这一点？每个链接都有一个ID。

However, I need scrollspy to exclude the last link in the menu. Is there any easy option or attribute to do this? Each link has an ID.

要注意，最后一个菜单项被调用，Login有一个ID，点击它会打开一个Twitter模态。然而，因为模态在代码中即使没有加载它也会影响scrollspy。

To note, the last menu item is called, "Login" has an ID and clicking it opens a Twitter Modal. However since the modal is in the code even when not loaded it's affecting the scrollspy.

所以只需要一种方法来告诉排除ID所以假设有这样的东西：

So just need a way to tell exclude an ID so something hypothetically like:

推荐答案

我建议您使用所需功能扩展ScrollSpy，例如< a href =https://stackoverflow.com/a/13460392/1407478> https://stackoverflow.com/a/13460392/1407478

I suggest you extend ScrollSpy with that desired functionality, like this https://stackoverflow.com/a/13460392/1407478

具有可排除ID的ScrollSpy扩展：

// save the original function object
var _superScrollSpy = $.fn.scrollspy;

// add a array of id's that need to be excluded
$.extend( _superScrollSpy.defaults, {
    excluded_ids : []
});

// create a new constructor
var ScrollSpy = function(element, options) {
    _superScrollSpy.Constructor.apply( this, arguments )
}

// extend prototypes and add a super function
ScrollSpy.prototype = $.extend({}, _superScrollSpy.Constructor.prototype, {
    constructor: ScrollSpy
    , _super: function() {
        var args = $.makeArray(arguments)
        // call bootstrap core
        _superScrollSpy.Constructor.prototype[args.shift()].apply(this, args)
    }
    , activate: function (target) {
        //if target is on our exclusion list, prevent the scrollspy to activate
        if ($.inArray(target, this.options.excluded_ids)>-1) {
            return
        }
        this._super('activate', target)
    }
});

// override the old initialization with the new constructor
$.fn.scrollspy = $.extend(function(option) {
    var args = $.makeArray(arguments),
    option = args.shift()

    //this runs everytime element.scrollspy() is called
    return this.each(function() {
        var $this = $(this)
        var data = $this.data('scrollspy'),
            options = $.extend({}, _superScrollSpy.defaults, $this.data(), typeof option == 'object' && option)

        if (!data) {
            $this.data('scrollspy', (data = new ScrollSpy(this, options)))
        }
        if (typeof option == 'string') {
            data[option].apply( data, args )
        }
    });
}, $.fn.scrollspy);

以 http://twitter.github.com/bootstrap/javascript.html#scrollspy ，如果您希望ScrollSpy阻止显示 #mdo ，它应该像这样初始化

For the example at http://twitter.github.com/bootstrap/javascript.html#scrollspy, and if you want the ScrollSpy to prevent showing #mdo, it should be initialized like this

$(".scrollspy-example").scrollspy({
    excluded_ids : ['#mdo']
});

您可以尝试将代码放在单独的文件中，scrollspy-addon.js，包含它和用

you could try to place the code in a separate file, scrollspy-addon.js, include it and initialize your scrollspy with

$("#your-scrollspy-id").scrollspy({
    excluded_ids : ['#login']
});

这篇关于在Twitter Bootstrap Scrollspy中排除ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！