2

goog.ui.toolbar を使用して、サイトの上部に水平方向のナビゲーション メニューを作成しています (これが私の問題かもしれません。間違った UI コンポーネントを使用しているのでしょうか?)。YUI の menubar のように機能するようにしたいので、ツールバーの項目にカーソルを合わせるとドロップダウン メニューが表示され、そのメニューからマウスを離すと消えます (goog サブメニューでは、ドキュメントの他の場所をクリックする必要があります)閉じます）。

私は一生、これを行う方法を理解できません。私は goog.ui.toolbar を自分のクラスにサブクラス化し、何日もやりたいことをやらせようと試みましたが、どこにも行きませんでした。私が学んだことの 1 つは、私が興味を持っている自動非表示の動作が goog.ui.submenu の setHighlighted 関数によって提供されることです。これは、goog.ui.menu の基本クラスである goog.ui.control の setHighlighted 関数をオーバーライドします。 、私の好きな方法を隠しません。goog.ui.menu をオーバーライドしたいのですが、これはデコレータ ファクトリによって生成されたものであり、コードベースの半分をサブクラス化する必要はありません。

これを行う方法を理解できた人はいますか？

どうもありがとう！

4

1 に答える 1

1

This needs a bit of work, but it seems to be very close to what you want.

Psuedo Code

  • Override mouseover event of each menu button inside the toolbar
  • Whenever mouseover, open the menu
  • Override mouseout event of each menu button in the toolbar
  • Whenever mouseout, wait a half second. Check if any of children (menu items) are highlighted. If they are, wait another half second. If no children menu items are highlighted, then close the menu.

Code (probably needs small tweaking but it's close)

//...
var m1 = new goog.ui.Menu();
//... create menu items ...

var b1 = new goog.ui.MenuButton('Add Jars', m1);
b1.handleMouseOver = function(e){
    b1.setOpen(true);
};
b1.handleMouseOut = function(e){
    setTimeout(function(){example.toolbar.hideMenu(b1,m1);}, 500);
};


example.toolbar.hideMenu = function(b1, m1){
    var count = m1.getChildCount();
    var shouldClose = true;
    for(var i=0; i<count; i++){
        if(b1.isHighlighted()){
            shouldClose = false;            
        }

        if(m1.getChildAt(i).isHighlighted()){
            shouldClose = false;
        } else {
        }
    }
    if(shouldClose){
        b1.setOpen(false);
    } else {
        setTimeout(function(){example.toolbar.hideMenu(b1,m1);}, 500);
    }
};
于 2011-10-28T15:01:48.330 に答える