jQuery 팝업 버블/툴팁
는 ''가 할 때 수 을 합니다.onmouseover 한 .onmouseover이벤트 OR(이벤트 OR)은 마우스를 버블 안으로 이동시킨 경우입니다.나의 버블은 하이퍼링크, 이미지 등을 포함한 모든 방식의 HTML과 스타일링이 필요가 있습니다.
저는 기본적으로 약 200줄의 추한 자바스크립트를 작성하여 이를 달성했지만 jQuery 플러그인이나 이것을 조금 정리할 다른 방법을 찾고 싶습니다.
Qtip은 제가 본 것 중에 최고입니다.MIT 허가를 받았고, 아름답고, 필요한 모든 구성을 갖추고 있습니다.
제가 가장 좋아하는 가벼운 옵션은 취기입니다.MIT 허가도 받았습니다.부트스트랩의 툴팁 플러그인에 영감을 주었습니다.
마우스 오버 이벤트를 통해서도 쉽게 할 수 있습니다.해봤는데 200줄도 안 걸려요.이벤트 트리거부터 시작하여 툴팁을 생성하는 기능을 사용합니다.
$('span.clickme').mouseover(function(event) {
createTooltip(event);
}).mouseout(function(){
// create a hidefunction on the callback if you want
//hideTooltip();
});
function createTooltip(event){
$('<div class="tooltip">test</div>').appendTo('body');
positionTooltip(event);
};
그런 다음 마우스 오버 이벤트를 트리거한 DOM-element의 오프셋 위치로 툴팁을 위치시키는 함수를 생성합니다. 이는 CSS로 수행할 수 있습니다.
function positionTooltip(event){
var tPosX = event.pageX - 10;
var tPosY = event.pageY - 100;
$('div.tooltip').css({'position': 'absolute', 'top': tPosY, 'left': tPosX});
};
qTip(수용된 답변)은 좋지만, 사용하기 시작했고, 필요한 기능이 부족했습니다.
그 때 우연히 PoshyTip을 발견했습니다. 매우 유연하고 사용하기 쉽습니다. (그리고 필요한 것을 할 수 있었습니다.)
좋아요, 일을 좀 하고 나면 적당한 시간에 갑자기 '거품'이 튀어나가고 없어지죠.아직은 해야 할 스타일링이 많은데 기본적으로 제가 사용한 코드입니다.
<script type="text/javascript">
//--indicates the mouse is currently over a div
var onDiv = false;
//--indicates the mouse is currently over a link
var onLink = false;
//--indicates that the bubble currently exists
var bubbleExists = false;
//--this is the ID of the timeout that will close the window if the user mouseouts the link
var timeoutID;
function addBubbleMouseovers(mouseoverClass) {
$("."+mouseoverClass).mouseover(function(event) {
if (onDiv || onLink) {
return false;
}
onLink = true;
showBubble.call(this, event);
});
$("." + mouseoverClass).mouseout(function() {
onLink = false;
timeoutID = setTimeout(hideBubble, 150);
});
}
function hideBubble() {
clearTimeout(timeoutID);
//--if the mouse isn't on the div then hide the bubble
if (bubbleExists && !onDiv) {
$("#bubbleID").remove();
bubbleExists = false;
}
}
function showBubble(event) {
if (bubbleExists) {
hideBubble();
}
var tPosX = event.pageX + 15;
var tPosY = event.pageY - 60;
$('<div ID="bubbleID" style="top:' + tPosY + '; left:' + tPosX + '; position: absolute; display: inline; border: 2px; width: 200px; height: 150px; background-color: Red;">TESTING!!!!!!!!!!!!</div>').mouseover(keepBubbleOpen).mouseout(letBubbleClose).appendTo('body');
bubbleExists = true;
}
function keepBubbleOpen() {
onDiv = true;
}
function letBubbleClose() {
onDiv = false;
hideBubble();
}
//--TESTING!!!!!
$("document").ready(function() {
addBubbleMouseovers("temp1");
});
</script>
다음은 html과 함께 제공되는 html의 일부분입니다.
<a href="" class="temp1">Mouseover this for a terribly ugly red bubble!</a>
저는 유용한 jQuery 플러그인을 프로그래밍하여 jQuery의 코드 라인만으로 쉽게 스마트 버블 팝업을 만들 수 있습니다!
할 수 있는 일: - 모든 DOM 요소에 팝업 첨부! - 마우스 오버/마우스 아웃 이벤트가 자동으로 관리됩니다! - 사용자 지정 팝업 이벤트 설정! - 스마트 쉐도우 팝업 만들기! (IE too!) - 실행 시 팝업 스타일 템플릿 선택! - 팝업에 HTML 메시지 삽입! - 다양한 옵션 설정: 거리, 속도, 지연, 색상...
팝업의 그림자와 색상이 지정된 템플릿은 Internet Explorer 6+, Firefox, Opera 9+, Safari에서 완벽하게 지원됩니다.
http://plugins.jquery.com/project/jqBubblePopup 에서 소스를 다운로드할 수 있습니다.
QTip은 jQuery 1.4.2에 버그가 있습니다.jQuery Bubble 팝업 http://www.vegabit.com/jquery_bubble_popup_v2/ # examples로 바꿔야 했는데 잘 되네요!
마우스가 이벤트를 덮어쓰기를 원하지 않는 것처럼 들립니다. jQuery hover() 이벤트를 원하는 것입니다.
그리고 당신이 원하는 것은 "풍부한" 툴팁입니다. 이 경우 저는 jQuery 툴팁을 제안합니다.bodyHandler 옵션을 사용하면 임의 HTML을 입력할 수 있습니다.
온마우스 오버 이벤트가 발생하면 팝업이 뜨고 온마우스 오버 이벤트를 던진 아이템 위에 마우스가 있는 한 또는 마우스가 버블 안으로 이동하면 열려 있는 상태를 유지하는 "버블"을 만들려고 합니다.나의 버블은 하이퍼링크, 이미지 등 모든 방식의 html과 스타일링이 필요합니다.
이 플러그인이 완전히 관리하는 모든 이벤트...
http://plugins.jquery.com/project/jqBubblePopup
컬러팁은 제가 본 것 중에 가장 아름답습니다.
jQuery Bubble 팝업 플러그인의 새로운 버전 3.0은 현재 가장 유명한 자바스크립트 라이브러리의 최신 버전인 jQuery v.1.7.2를 지원합니다.
3.0 버전의 가장 흥미로운 특징은 jQuery & Bubble Popplugin을 다른 라이브러리와 함께 사용할 수 있다는 것입니다. Script.aculo.us , Mootols 또는 Prototype과 같은 자바스크립트 프레임워크와 함께 사용할 수 있다는 것입니다.
jQuery Bubble 팝업이 테스트되었으며 알려진 브라우저와 "알 수 없는" 브라우저를 많이 지원합니다. 전체 목록은 설명서를 참조하십시오.
이전 버전과 마찬가지로, jQuery Bubble Popplugin은 MIT 라이선스로 계속 출시되고 있습니다. 저작권 헤더를 그대로 둔다면 상업적 또는 개인적인 프로젝트에서 jQuery Bubble Popplug을 자유롭게 사용할 수 있습니다.
최신 버전을 다운로드하거나 http://www.maxvergelli.com/jquery-bubble-popup/ 에서 라이브 데모 및 튜토리얼을 방문하십시오.
단순 팝업 버블 자동 크기 조정
색인을 보다
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="bubble.css" type="text/css" rel="stylesheet" />
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="bubble.js"></script>
</head>
<body>
<br/><br/>
<div class="bubbleInfo">
<div class="bubble" title="Text 1">Set cursor</div>
</div>
<br/><br/><br/><br/>
<div class="bubbleInfo">
<div class="bubble" title="Text 2">Set cursor</div>
</div>
</body>
</html>
bubble.js
$(function () {
var i = 0;
var z=1;
do{
title = $('.bubble:eq('+i+')').attr('title');
if(!title){
z=0;
} else {
$('.bubble:eq('+i+')').after('<table style="opacity: 0; top: -50px; left: -33px; display: none;" id="dpop" class="popup"><tbody><tr><td id="topleft" class="corner"></td><td class="top"></td><td id="topright" class="corner"></td></tr><tr><td class="left"></td><td>'+title+'</td><td class="right"></td></tr><tr><td class="corner" id="bottomleft"></td><td class="bottom"><img src="bubble/bubble-tail.png" height="25px" width="30px" /></td><td id="bottomright" class="corner"></td></tr></tbody></table>');
$('.bubble:eq('+i+')').removeAttr('title');
}
i++;
}while(z>0)
$('.bubbleInfo').each(function () {
var distance = 10;
var time = 250;
var hideDelay = 500;
var hideDelayTimer = null;
var beingShown = false;
var shown = false;
var trigger = $('.bubble', this);
var info = $('.popup', this).css('opacity', 0);
$([trigger.get(0), info.get(0)]).mouseover(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
if (beingShown || shown) {
// don't trigger the animation again
return;
} else {
// reset position of info box
beingShown = true;
info.css({
top: -40,
left: 10,
display: 'block'
}).animate({
top: '-=' + distance + 'px',
opacity: 1
}, time, 'swing', function() {
beingShown = false;
shown = true;
});
}
return false;
}).mouseout(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
info.animate({
top: '-=' + distance + 'px',
opacity: 0
}, time, 'swing', function () {
shown = false;
info.css('display', 'none');
});
}, hideDelay);
return false;
});
});
});
거품을 내다
/* Booble */
.bubbleInfo {
position: relative;
width: 500px;
}
.bubble {
}
.popup {
position: absolute;
display: none;
z-index: 50;
border-collapse: collapse;
font-size: .8em;
}
.popup td.corner {
height: 13px;
width: 15px;
}
.popup td#topleft {
background-image: url(bubble/bubble-1.png);
}
.popup td.top {
background-image: url(bubble/bubble-2.png);
}
.popup td#topright {
background-image: url(bubble/bubble-3.png);
}
.popup td.left {
background-image: url(bubble/bubble-4.png);
}
.popup td.right {
background-image: url(bubble/bubble-5.png);
}
.popup td#bottomleft {
background-image: url(bubble/bubble-6.png);
}
.popup td.bottom {
background-image: url(bubble/bubble-7.png);
text-align: center;
}
.popup td.bottom img {
display: block;
margin: 0 auto;
}
.popup td#bottomright {
background-image: url(bubble/bubble-8.png);
}
팁은 좋은 도서관이기도 합니다.
이 경우 qTip을 사용할 수 있습니다. 그러나 마우스오버 이벤트에서 실행하려면 코드를 조금 작성해야 합니다. 텍스트 필드에 기본 워터마크를 사용하려면 워터마크 플러그인을 사용해야 합니다.
저는 이것이 반복되는 코드로 이어진다는 것을 깨달았습니다. 그래서 저는 qTip 위에 정보 팝업을 폼 필드에 쉽게 첨부할 수 있는 플러그인을 작성했습니다.여기에서 확인하실 수 있습니다: https://bitbucket.org/gautamtandon/jquery.attachinfo
도움이 되길 바랍니다.
언급URL : https://stackoverflow.com/questions/625920/jquery-popup-bubble-tooltip
'programing' 카테고리의 다른 글
| 삽입 전 MariaDB 트리거가 작동하지 않습니다. (0) | 2023.10.12 |
|---|---|
| window.location.pathname에 헤더 추가 (0) | 2023.10.12 |
| jQuery에서 ajax 요청 일괄을 하려면 어떻게 해야 합니까? (0) | 2023.10.12 |
| git에서 gitignore 명령을 사용하는 방법 (0) | 2023.10.12 |
| 비동기:false를 $.getJ로 설정할 수 있습니까?SON call (0) | 2023.10.12 |