jqDockメニューのアクティブ状態がマウスオーバー後に再開されない

jqueryを使用してドックメニューを構築するためにjqDockプラグインを使用しています。 http://www.wizzud.com/jqDock/jqDockメニューのアクティブ状態がマウスオーバー後に再開されない

"アクティブ"メニュー項目のインデックスを渡す1つのオプションがあります。アクティブな状態はページの読み込みに存在しますが、メニューを再度マウスオーバーすると機能しません。

"アクティブ"状態のレジューム機能で動作するサンプルコードを作成するための提案。

<html> 
<head> 
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script> 
<script type='text/javascript' src='jquery.jqDock.min.js'></script> 
<script> 
jQuery(document).ready(function($){ 
    // set up the options to be used for jqDock... 
    var dockOptions = 
     { align: 'top' // horizontal menu, with expansion DOWN from a fixed TOP edge 
    , size: 60 //increase 'at rest' size to 60px 
    , labels: false //add labels 
    , active: $('#menu a.active').index() //set the initially active item 
    , onReady: function(){ 
     $(this).removeClass('hideThis'); //need to show the dock myself 
     //return false; //leaves the dock asleep and requiring a 'nudge'! 
    } 
    } 
    //and get $('#menu')... 
, Menu = $('#menu'); 

    //replace my default click handler with a 'active' toggler... 
    Menu.children().unbind('click').click(function(){ 
    //Note: I've set it so that you can only nudge the 'active' item... 
    if($(this).filter('.active').removeClass('active').length){ 
    Menu.jqDock('nudge'); //wake or thaw the dock 
    }else if(!$('.active', Menu).length){ 
    Menu.trigger('dockfreeze'); //freeze the dock 
    $(this).addClass('active'); 
    } 
    this.blur(); 
    return false; 
}).end() 
// ...and apply jqDock... 
.jqdock(dockOptions); 
}); 
</script> 
<style type="text\css"></style> 
</head> 
<body> 
<div id='page'> 
    <div id='menu' class='hideThis'> 
    <a href='#'><img src='Addressbook.png' title='Downloads' alt='' /></a> 
    <a href='#'><img src='DVD-Player.png' title='Websites' alt='' /></a> 
    <a href='#' class='active'><img src='eMail.png' title='Users' alt='' /></a> 
    <a href='#'><img src='Instant_Messaging.png' title='Security' alt='' /></a> 
    <a href='#'><img src='Safari.png' title='System' alt='' /></a> 
    <a href='#'><img src='Terminal.png' title='System' alt='' /></a> 
    </div> 
</body> 
</html>

「jqDock」は、一度しか初期化されていないことがわかりました。再び別のパラメータで再初期化することはできません&再度。

まだ運:(http://www.wizzud.com/jqdock/faqs/で

出典

2012-01-25 Lokesh Yadav

、数は27回の試行の「アクティブ」の項目を維持することの難しさを説明する。また、バージョン1.6 +が可能回避策のための手段を提供することを言いますが、その実装は、ビルダーにダウンしています。

あなたは... a.active項目でコマンド「を展開する」？例えばjqdockを実行div.jqDockにmouseleaveを、結合しようとすることができ

options.onReady = function(){ 
    $('#menu').mouseleave(function(){ 
     $(this).find('a.active img').jqdock('expand').end().jqdock('nudge'); 
    }); 
}

注意：追加のナッジは、あなたがしたいDockを「眠っている」状態にしておいてください。

個人的には、上で参照したFAQに記載されている理由で、「アクティブ」アイテムを「拡張」されたスタイルで（引用の例の緑色の枠線のように）区別することを検討します。ドキュメントで警告されているように、 'アクティブ'オプションを使用すると、厄介なジャンプ効果が発生します（！）。

出典

2012-04-01 13:10:52 Wizzud

jqDockメニューのアクティブ状態がマウスオーバー後に再開されない

答えて

関連する問題