我的页面上有一堆div,每个div只有class属性。div中有一些span,它们被设置为在qTip的帮助下显示工具提示。
工具提示应该包含三个项目:
- Up:锚,它应该向上移动OuterDiv(可能像这样:在jquery中向上/向下移动)
- Down:锚,它应该向下移动OuterDiv
- Delete: anchor,它应该删除调用的OuterDiv
我的代码:
<body>
<div class="OuterDiv">
<div class="InnerDiv">
<span class="Position">Position 1</span>
</div>
</div>
<div class="OuterDiv">
<div class="InnerDiv">
<span class="Position">Position 2</span>
</div>
</div>
</body>
和脚本:
$(document).ready(function () {
var qTipContent = '<a href="javascript:void(0)" onclick="">↑</a> ';
qTipContent = qTipContent + '<a href="javascript:void(0)" onclick="">↓</a> ';
qTipContent = qTipContent + '<a href="javascript:void(0)" onclick="">X</a>';
$('.Position').each(function () {
$(this).qtip({
content: qTipContent,
hide: {
fixed: true
}
})
});
});
qTip内容中的onclick
函数应该是什么样子?
我的解决方案可以在这个jsFiddle中找到-除了清理qTipContent(只是真的很乱),唯一真正值得注意的添加是为锚添加id,并使用qTip api在添加qTip窗口时为每个锚添加单击事件绑定。
$('.Position').each(function(idx, elem) {
$(this).qtip({
content: qTipContent,
show: {
when: {
event: 'click'
}
},
hide: {
fixed: true,
when: {
event: "unfocus"
}
},
api: {
onRender: function() {
var $qtip = $(this.elements.content);
var odiv = $(elem).closest(".OuterDiv");
$("#up_arrow", $qtip).click(function() {
odiv.insertBefore(odiv.prev());
})
$("#down_arrow", $qtip).click(function() {
odiv.insertAfter(odiv.next());
})
$("#delete", $qtip).click(function() {
odiv.remove();
})
}
}
})
});