0

メインメニューにリンクがいっぱいある Twitter Bootstrap サイトがあります。そのメニューをターゲットにするScrollspyのセットアップがあり、うまく機能します。

ただし、メニューの最後のリンクを除外するには scrollspy が必要です。これを行うための簡単なオプションまたは属性はありますか? 各リンクには ID があります。

最後のメニュー項目が呼び出され、「ログイン」には ID があり、それをクリックすると Twitter モーダルが開きます。ただし、モーダルはロードされていなくてもコード内にあるため、スクロールスパイに影響を与えています。

したがって、IDを除外するように指示する方法が必要なだけなので、仮説的には次のようになります。

4

2 に答える 2

1

このhttps://stackoverflow.com/a/13460392/1407478のように、必要な機能でScrollSpyを拡張することをお勧めします

除外可能な 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ように初期化する必要があります。

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

コードを別のファイル scrollspy-addon.js に配置し、それを含めて、scrollspy を初期化することができます

$("#your-scrollspy-id").scrollspy({
    excluded_ids : ['#login']
});
于 2012-12-09T15:40:21.520 に答える
1

あなたの状況に対する「簡単な」修正は知りません。ただし、「アクティブ化」イベントを使用して ID を確認し、それに基づいて行動することができます。

$('#myscrollspyID li').on('activate',  function(){
     var id = $(this).find("a").attr("href");
     if (id === "#yourlastID"){
          //do something, i.e. remove all active classes from your scrollspy object, so  none are shown as active
     }
}

PS: これはかなり大まかなコードですが、自分で使用しているコードをいくつか変更しました。アクティブ イベントを使用してアクティブ アイテムの ID を確認し、ナビゲーター バーの背景色をアクティブ アイテムに対応する色に変更します :-)

于 2012-12-08T23:29:12.910 に答える