我使用 beautytips 插件创建了一个 javascript 工具,该插件使用 beautytips 显示列表选项菜单,然后将操作绑定到该菜单。
我从一个简单的 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 之后它才找到“链接-”ID..(?)。这在 firefox、safari 和 chrome 中完美运行,因为我可以单击菜单切换,查看三个链接,单击链接一并让链接一发生正确的操作,依此类推。
这在 Internet Explorer 中也可以正常工作,但仅限于第一次。第二次通过(单击显示菜单,单击另一个链接),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]]);