使用qTip操作原始元素

时间:2011-11-21 19:26:48

标签: javascript jquery html qtip

我的页面上有一堆div,每个div都只有class属性。在div中有一些跨度,它们被设置为在qTip的帮助下显示工具提示。

工具提示应包含三个项目:

  • 向上:锚点,它应该向上移动OuterDiv(可能是这样的:move up/down in jquery
  • 向下:锚点,应该将OuterDiv向下移动
  • 删除:锚点,应删除调用的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="">&uarr;</a>&nbsp;&nbsp;&nbsp;';
            qTipContent = qTipContent + '<a href="javascript:void(0)" onclick="">&darr;</a>&nbsp;&nbsp;&nbsp;';
            qTipContent = qTipContent + '<a href="javascript:void(0)" onclick="">X</a>';
            $('.Position').each(function () {
                $(this).qtip({
                    content: qTipContent,
                    hide: {
                        fixed: true
                    }
                })
            });
        });

qTip内容中的onclick函数应如何显示?

1 个答案:

答案 0 :(得分:1)

我的解决方案可以在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();
                })
            }
        }
    })
});