用qTip操纵原始元素

问题描述：

我在页面上有一堆div，每个div只有class属性。在div中有一些跨度，它们被设置为在qTip的帮助下显示一个工具提示。用qTip操纵原始元素

的提示应该包含三个项目：

最多：锚，这应该移动OuterDiv了（大概是这样的：move up/down in jquery）
下：锚，它应该向下
删除：锚，这应该删除调用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功能是什么样子？

答

我的解决方案可以在这里找到jsFiddle - 除了清理qTipContent（真的很混乱）之外，唯一真正值得注意的补充是将锚点添加到锚点，并使用qTip api将绑定添加到click事件中添加每个锚作为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(); 
       }) 
      } 
     } 
    }) 
});

用qTip操纵原始元素

相关推荐