ビューティーチップを使用してリストオプションのメニューを表示し、アクションをバインドするビューティチッププラグインを使用して、javascript ツールを作成しました。
メニュー項目を定義する単純な div から始めています
<div id="menu-div">
<a href="javascript:;" id="link-one">text link one</a><br />
<a href="javascript:;" id="link-two">text link two</a><br />
<a href="javascript:;" id="link-three">text link three</a><br />
</div>
次に、次のコードを使用してビューティー ヒントをインスタンス化します。
$("#menu-toggle").bt({
contentSelector: "$('#menu-div').html()",
preShow: function(box) {
$("a[id^=link-]").click(function() {
//do something
});
});
「preShow」関数を追加したのは、何らかの理由で、div が有効になるまで「link-」ID が見つからなかったからです.. (?)。これは、Firefox、Safari、および Chrome で完全に機能し、メニューの切り替えをクリックして、3 つのリンクを表示し、リンク 1 をクリックして、リンク 1 の正しいアクションを発生させることができました。
これは Internet Explorer でも問題なく機能しますが、初回のみです。2 回目 (クリックしてメニューを表示し、別のリンクをクリック) では、Internet Explorer は同じ ID を見つけることができないようです。
メニューを閉じた後、関数のバインドを解除する必要がありますか?
ビューティー ヒントが preShow 関数を処理する方法は次のとおりです。
// trigger preShow function
// function receives the box element (the balloon wrapper div) as an argument
opts.preShow.apply(this, [$box[0]]);