qTip으로 원래 요소 조작하기

나는 내 페이지에 여러 개의 div가 있으며 각각에는 클래스 속성 만 있습니다. div에는 qTip의 도움말과 함께 툴팁을 표시하도록 설정된 일부 범위가 있습니다.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 기능을 같이해야합니까?

출처

2011-11-21 sventevit

내 솔루션을 찾을 수 있습니다 jsFiddle - qTipContent 청소 (정말 지저분했다) 게다가, 유일하게 진짜 주목할만한 추가는 닻을 ids에 추가하고 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(); 
       }) 
      } 
     } 
    }) 
});

출처

2012-06-07 22:36:49 Mothy

qTip으로 원래 요소 조작하기

답변

관련 문제