1

一度選択した後、マウスクリックでjQuery UI 1.9 menu()のフォーカスイベントを生成するのに問題があります。メニューの要素を初めてクリックすると、次の選択ハンドラーが呼び出されます。

function selcatfunc(event,ui) {
  var td  = event.currentTarget;
  var cid = $(td).attr('data-cid');
  var nam = $(td).find("a").text();
  if (cid) {
    $("#cat-target").text(nam).attr('data-cid', cid);
    $( "#CatMenu" ).hide(); $( "#CatListOverlay" ).hide();
  } else {
    $( "#CatMenuList" ).focus(event, ui);
  }
};
$(function() {
$( "#CatMenuList" ).menu({ select: selcatfunc });
});

メニューの各<li>にはdata-cidが定義されているため、選択した要素の内部コードがわかります。人間が読めるテキストは:にあります

<div id="CatMenu" class="CatList">
<ul id="CatMenuList">
<li data-cid="30.0"><a href="javascript:void(0);">Bars, Nightclubs, Sports Bars</a></li>
<li data-cid="200.14"><a href="javascript:void(0);">Used Car</a></li>
...
</ul>
</div>

data-cidの<liない>は、サブメニューに展開されるカテゴリヘッダーです。

<li><a href="javascript:void(0);">Accessories</b></a>
  <ul>
<li data-cid="10.02"><a href="javascript:void(0);">Men's Accessories</a></li>
<li data-cid="10.04"><a href="javascript:void(0);">Teen Accessories</a></li>
<li data-cid="10.06"><a href="javascript:void(0);">Women's Accessories</a></li>
  </ul></li>

アクセサリなどのカテゴリヘッダーは選択されることを意図していません。そのため、選択ハンドラで.focus()を呼び出します。cat_targetは、何が選択されたかをユーザーに表示します。

メニューは、初めて使用するときは問題なく機能します。ただし、サブメニューでhide()またはfocus()を実行すると、ダイアログをリロードせずに、その中の何も選択できなくなります。

http://jsbeautifier.org/のpretty-printerを介して//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.jsを実行しました。すべてのjQueryマウスイベントが1277行目でハンドラーに渡されることを学び、そこにFirebugロギングステートメントを追加しました。

  d.handler && (o = d, d = o.handler, f = o.selector), d.guid || (d.guid = p.guid++), i = g.events, i || (g.events = i = {}), h = g.handle, h || (g.handle = h = function (a) {

 console.log("a ", a, " at ", a.type, " h ", h.elem, " args ", arguments);
 return typeof p != "undefined" && (!a || p.event.triggered !== a.type) ? p.event.dispatch.apply(h.elem, arguments) 

メニューの選択が成功すると、console.logステートメントは、マウスダウン、クリック、マウスアウトを記録し、最後にオブジェクトとして出力をオブジェクトします{type = "focus"、timeStamp = 1351561057050、jQuery182035863344054812873 = true、more ...}

select関数が呼び出され、textとdata-cidが期待どおりに書き込まれます。select関数は、メニューを含む部門でhide()を呼び出します。

show()を使用してメニュー分割を再表示し、他のものを選択しようとすると、クリックやマウスアウトを含むすべてのマウスイベントが発生しますが、「フォーカス」タイプのオブジェクトとしての印刷はありません。メニューを非表示にすると、マウスクリックハンドラーが壊れて、フォーカスイベントが生成されなくなったようです。

これらのフォーカスイベントは、jQueryがjQueryUIシステムを呼び出す方法です。それらがないと、UIに戻る方法はありません。

誰かがマウスハンドラーを修正する方法を提案できますか?または、フォーカスメカニズムをどのように壊したのか教えてください。または、メニューを表示するときに元に戻すにはどうすればよいですか?

4

0 に答える 0