누군가가 이미지 위에 마우스를 올려 놓는 위치의 왼쪽 하단에 툴팁을 표시하는 qTip jquery 플러그인을 설정하고 사용하는 방법에 대한 간단한 예제를 보여 주면 감사하겠습니다.jQuery를 사용하는 방법 qTip - 간단한 예제 please
사이트의 데모/예를 따라 시도해 보았습니다 :>qTip하지만 제대로 작동하지 않는 것 같습니다.
문서에 HTML 구조를 포함해야하는지 잘 모르겠습니까? 그렇다면 어디에서 배치해야합니까?
이 플러그인에는 CSS 파일이 필요합니까?
어쨌든 누군가가 qtip 사용에 대한 설명을 할 수 있다면 정말 감사 할 것입니다. 또한 qTip 데모 페이지로 리디렉션되지 않으면 고맙겠습니다.
감사합니다.
ASP.NET에서 저는 jQuery-1.4.2.min.js와 jquery.qtip-1.0.js를 포함 시켰습니다.
CSS가 없으므로 작동해야합니다.
$(document).ready(function() {
$("#<%= txtUsername.ClientID %>").qtip({
content: 'Your registered username',
style:
{
name: 'blue',
tip: 'leftMiddle'
},
position:
{
corner:
{
target: 'rightMiddle',
tooltip: 'leftMiddle'
}
}
});
}
저는이 문제가 새로운 qTip 버전과 jQuery 사이의 비 호환성으로 인해 발생한다고 생각합니다.
qTip을 사용하여 지난 1 시간 동안 테스트 코드를 사용하여 코드가 작동하지 않는 이유와 forums을보고 나서 비슷한 문제를 발견 할 수 있는지 알아 보았습니다. 스레드가 완벽하게 작동하지만 최신 버전의 jQuery로 교체하면 오류가 발생합니다.
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.qtip-1.0.0-rc3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.fn.qtip.styles.tooltipDefault = {
background : '#132531',
color : '#FFFFFF',
textAlign : 'left',
border : {
width : 2,
radius : 4,
color : '#C1CFDD'
},
width : 220
}
// we are going to run through each element with the classRating class
$('.classRating').each(function() {
var rating = $(this).attr('rating');
// the element has no rating tag or the rating tag is empty
if (rating == undefined || rating == '') {
rating = 'I have not yet been rated.';
}
else {
rating = 'The rating for this is ' + rating + '%';
}
// create the tooltip for the current element
$(this).qtip({
content : rating,
position : {
target : 'mouse'
},
style : 'tooltipDefault'
});
});
});
</script>
</head>
<body>
<div id="SomeID1" class="classRating" rating="73">I have a rating</div>
<div id="SomeID2" class="classRating" rating="66">I have a rating</div>
<div id="SomeID3" class="classRating" rating="">I have a rating but it is empty</div>
<div id="SomeID4" class="classRating">I dont have a rating</div>
</body>
</html>
jQuery 1.3.2 from the Google Code website이 예제는 이제 완벽하게 작동합니다. 나는 다른 문제가 있는지를보기 위해이 코드를 나의 요구에 맞추기 시작할 것입니다. 그러나 여전히이 문제를 겪고있는 누군가를 위해 나는이 게시물이 유용하기를 바랍니다.
편집 :이 버전의 호환성 문제처럼 같습니다. 설명서 웹 사이트의이 간단한 코드는 이제 동일한 버전에서 완벽하게 작동합니다. 희망이 당신을 위해 도움이됩니다!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<a href="#" title="Hello World" class="example">Test</a>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.qtip-1.0.0-rc3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// By suppling no content attribute, the library uses each elements title attribute by default
$('a[href][title]').qtip({
content: {
text: false // Use each elements title attribute
},
style: 'cream' // Give it some style
});
// NOTE: You can even omit all options and simply replace the regular title tooltips like so:
// $('#content a[href]').qtip();
});
</script>
</body>
</html>
편집 2 : 당신이 다음 중 하나를 다운로드 할 수 있습니다 jQuery를 최신 버전으로 qTip을 사용하려는 그러나 경우에, 그것을 위해 기다릴만한 가치가 될 수 있도록 작품 qTip의 새 버전이 qTip에 대해서는 nightly builds입니다. 위의 예제를 사용하여 최신 야간 빌드와 최신 jQuery (1.4.2)의 두 스크립트를 바꿨다.
안녕하세요 EnderMB - 자세한 예제를 제공해 주셔서 감사합니다. 그것을 확인합니다. 솔직히 말하면, 나는 그것을 사용하지 못해서 사용하지 못했습니다. 분명히 당신의 모범을 보게 될 것입니다. 감사. – tonyf
@tonsils 문제 없습니다. 제 애플리케이션에서 qTip을 사용하려고 할 때와 똑같은 일을 겪었습니다. 운좋게도 더 많은 아이디어를 찾을 때 게시물을 찾았습니다. 포럼이 이것으로 진행할 것이라면 예제 전체에 대한 모든 문제를 해결해야합니다. 희망 당신은 그것을 유용하게 찾을 수 있습니다! –
이것은 매우 도움이되었습니다. 고맙습니다. 가능한 경우 귀하의 답변을 수락 할 것입니다. @tonsils 나는 그것이 당신을 위해 작동한다면 대답을 받아 들일 것을 제안한다. – tucson
여기의 qTip 포럼의 지침도 따르십시오 : http://craigsworks.com/projects/forums/thread-solved-qtip-1-0-0rc3-does-not-work-with-latest-jquery-release. qTip 플러그인에서 한 줄의 코드를 수정하면 ('min'버전에서 코드를 찾기가 어려움) jQuery와의 호환성이 복원됩니다.기본적으로
변경 :
if(typeof $(this).data('qtip') == 'object')
사람 :
if(typeof $(this).data('qtip') === 'object' && $(this).data('qtip'))
; 나를 위해 일했다.
덕분에 도움이되었습니다! – Andy
맞아요. 저는 여러분이 HTML에 qTip을 첨부하는 방법을 보여주는 무언가를 알고 있다고 생각합니다. 예제는 훌륭하지 않습니다.
아래 예제는 qTip 이미지를 보여 주며 이미지의 가운데와 오른쪽을 멋진 두 가지 색의 녹색으로 표시합니다. 이 나는 JQuery와 1.4.2를 사용하고 있습니다와 함께 주목해야 할 점에
<html>
<head>
<script src="/js/jquery-compressed-1.4.2.js" type="text/javascript"></script>
<script src="/js/jquery.qtip-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
// Create the tooltips only on document load
$(document).ready(function() {
// Match all link elements with href attributes within the content div
$('#claimform a[rel=tip]').qtip({
content: { text: true
},
style: {
width: 250,
tip: 'leftMiddle',
color: 'white',
background:'#66CC33',
name: 'green'
},
position: {
corner: { target: 'rightMiddle',
tooltip: 'leftMiddle'
},
adjust: { x: 20, y: 0 }
}
});
});
</script>
<div id="claimform">
<a href="#" rel="tip" title="Your customer ID as shown on the top right hand side of your papaer bill that you should have received through the post"><img src="/images/css/tip.gif" alt="tip" class="tip" /></a>
</div>
</body>
</html>
, 이것은 당신이 빌드 번호 25
http://bazaar.launchpad.net/~craig.craigsworks/qtip/1.0/files/25
를 사용할 필요가 qTip의 압축 된 버전의 전형적인 다운로드 작동하지 않습니다감사합니다.이게 완벽합니다. 기본 예제도 고민하고있었습니다. – Acidon
qTip 사이트에서 언급 된 HTML 구조는 플러그인을 사용할 때 생성되는 html의 예입니다. 코드를 작동 시키려면 페이지에 추가해야하는 코드의 일부가 아닙니다.
이 플러그인을 작동시키려는 시도를 한 후에이 페이지로와 봤습니다. 당신이 생각하는 것처럼 문서가 잘 쓰여 있지 않다고 말할 수 있습니다. 그렇지 않으면이 질문을 쓸 필요가 없습니다. –
EnderMB에 꼭 동의하십시오. 하나에게 명백한 것이 반드시 모든 것을위한 것은 아닙니다. qtip 사이트의 문서가 분명하지 않습니다. 쉽게 접근 할 수있는 완전한 코드가있는 간단한 예는 없습니다. – tucson
이 둥근 모서리 샘플을 따르려고한다면, 그것을 작동시키는 것은 불가능합니다. http://craigsworks.com/projects/qtip2/tutorials/styling/#corners –