2011-08-19 3 views
0

적용하는 방법 : http://craigsworks.com/projects/qtip2/demos/#mousejQuery를 qTip 플러그인, '제목'속성을 분할하고 내가 여기 qTip jQuery 플러그인 사용하려고 해요 스타일

내가 데모를 기반으로 작동하는 코드를 가지고,하지만 내가 좋아하는 것 TITLE 속성에서 내용을 "폭발"시킬 수 있고 배열의 첫 번째 항목을 "머리글"로, 두 번째 항목을 "내용"으로 지정할 수 있습니다. 그냥 참조를 들어, 아래 코드는 단지 가져 오는 TITLE에 의해 완벽하게 잘 작동

<script> 
$(document).ready(function() 
{ 

    $('.tip3').qtip({ 
     content: { 
      text: function(api) { 
        var titleAttr = $(this).attr('title'); 
        var titleAttrArray = titleAttr.split(' :: '); 
        return titleAttrArray[1]; 
       }, 
      title: { 
       text: function(api) { 
        // Retrieve content from TITLE attribute of the $('.selector') element 
        // return $(this).attr('title'); 
        return titleAttrArray[0]; 
       } 
      } 
     }, 
     position: { 
     my: 'top left', 
     target: 'mouse', 
     viewport: $(window), // Keep it on-screen at all times if possible 
     adjust: { 
      x: 10, y: 10 
     } 
     }, 
     hide: { 
     fixed: true // Helps to prevent the tooltip from hiding ocassionally when tracking! 
     }, 
     style: 'ui-tooltip-youtube' 
    }); 

}); 
</script> 


<div class="box tip3" title="Some cool title here! :: Some subheader here?"> 
    <h3>Hover over this box to see mouse tracking in action</h3> 
</div> 

아니라 그것으로 아무것도 :

나는 다음과 같은 코드가

<script> 
$(document).ready(function() 
{ 
    $('.tip2').qtip({ 
     content: { 
      text: 'I really like owls!', 
      title: { 
       text: function(api) { 
        // Retrieve content from TITLE attribute of the $('.selector') element 
        return $(this).attr('title'); 
       } 
      } 
     }, 
     position: { 
     my: 'top left', 
     target: 'mouse', 
     viewport: $(window), // Keep it on-screen at all times if possible 
     adjust: { 
      x: 10, y: 10 
     } 
     }, 
     hide: { 
     fixed: true // Helps to prevent the tooltip from hiding ocassionally when tracking! 
     }, 
     style: 'ui-tooltip-youtube' 
    }); 

}); 
</script> 

모든 아이디어/통찰력을 것 환상적이다! 아직도 jQuery를 알아 내려고하는 초보자 :).

답변

1

제목 기능의 titleAttrArray에 액세스 할 수 없습니다. 범위에 포함되지 않습니다. title 속성을 두 번 처리하거나 다른 속성을 사용하십시오.

$('.tip3').qtip({ 
    content: { 
     text: function(api) { 
      return $(this).attr('title').split(' :: ')[1]; 
     }, 
     title: { 
      text: function(api) { 
       return $(this).attr('title').split(' :: ')[0]; 
       //OR 
       return $(this).attr('title_header'); 
      } 
     } 
    } 
}); 
+0

HTML 마크 업에 임의의 속성을 추가해도 괜찮습니까? "title_header"가 존재하지 않습니다. 이해합니다 ...? – Jay

+0

그것은 토론을위한 것 같습니다 : http://forum.jquery.com/topic/jquery-creating-custom-attributes-in-html – Jay

+0

개인적으로, 나는 비표준 속성을 사용하지 않기를 좋아하지만, 그것의 대체 방법. –

관련 문제