onmouseoverOlay tetiklendiğinde açılan ve fare onmouseoverolayı fırlatan öğenin üzerinde olduğu sürece VEYA fare balonun içine hareket ettirilirse açık kalacak bir "balon" oluşturmaya çalışıyorum . Balonumun köprüler, resimler vb. Dahil olmak üzere tüm HTML ve stil biçimlerine sahip olması gerekecek.
Bunu temelde yaklaşık 200 satır çirkin JavaScript yazarak başardım ama gerçekten bir jQuery eklentisi veya bunu biraz temizlemek için başka bir yol bulmak istiyorum.
Yanıtlar:
Qtip, gördüğüm en iyisi. MIT lisanslıdır, güzeldir ve ihtiyacınız olan tüm konfigürasyona sahiptir.
En sevdiğim hafif seçenek sarhoş . Ayrıca MIT lisanslıdır. Bootstrap'in araç ipucu eklentisine ilham verdi .
Bu, fareyle üzerine gelme olayıyla da kolayca yapılabilir. Ben yaptım ve hiç 200 satır sürmüyor. Etkinliği tetikleyerek başlayın, ardından ipucunu oluşturacak bir işlev kullanın.
$('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);
};Ardından, ipucunu fareyle üzerine gelme olayını tetikleyen DOM öğesinin ofset konumu ile konumlandıran bir işlev oluşturursunuz, bu css ile yapılabilir.
function positionTooltip(event){
var tPosX = event.pageX - 10;
var tPosY = event.pageY - 100;
$('div.tooltip').css({'position': 'absolute', 'top': tPosY, 'left': tPosX});
};'top': tPosY + 'px've bunun gibi.
QTip (kabul edilen cevap) iyi olmasına rağmen, kullanmaya başladım ve ihtiyacım olan bazı özelliklerden yoksundu.
Daha sonra PoshyTip'e rastladım - çok esnek ve kullanımı gerçekten çok kolay. (Ve ihtiyacım olanı yapabilirdim)
Tamam, biraz çalıştıktan sonra bir "balon" alıp doğru zamanda gidebilirim. Hala olması gereken çok sayıda stil var ama bu temelde kullandığım kod.
<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>İşte onunla birlikte gelen bir html pasajı:
<a href="" class="temp1">Mouseover this for a terribly ugly red bubble!</a>JQuery'de yalnızca bir kod satırı ile kolayca akıllı balon pop-up'lar oluşturmak için kullanışlı bir jQuery Eklentisi programladım!
Ne yapabilirsiniz: - herhangi bir DOM öğesine açılır pencere ekleyin! - mouseover / mouseout olayları otomatik olarak yönetilir! - özel açılır pencere etkinlikleri ayarlayın! - akıllı gölgeli pop-up'lar oluşturun! (IE'de de!) - çalışma zamanında açılır pencerenin stil şablonlarını seçin! - açılır pencerelerin içine HTML mesajları ekleyin! - birçok seçeneği şu şekilde ayarlayın: mesafeler, hız, gecikmeler, renkler ...
Popup'ın gölgeleri ve renklendirilmiş şablonları tamamen Internet Explorer 6+, Firefox, Opera 9+, Safari tarafından desteklenmektedir
Kaynakları http://plugins.jquery.com/project/jqBubblePopup adresinden indirebilirsiniz.
QTip'in jQuery 1.4.2 ile hatası var. Http://www.vegabit.com/jquery_bubble_popup_v2/#examples jQuery Bubble Pop up'a geçmek zorunda kaldım ve harika çalışıyor!
Bana göre fareyi olayların üzerinde istemiyorsunuz: jQuery hover () olayını istiyorsunuz.
Ve istediğiniz gibi görünen şey "zengin" bir araç ipucu, bu durumda jQuery araç ipucunu öneririm . BodyHandler seçeneğiyle isteğe bağlı HTML yerleştirebilirsiniz.
Fare üzerinde fare olayı tetiklendiğinde açılan bir "balon" oluşturmaya çalışıyorum ve fare, fareyle üzerine gelme olayını atan öğenin üzerinde olduğu sürece veya fare balonun içine hareket ettirildiğinde açık kalacaktır. Balonumun köprüler, resimler vb. Dahil olmak üzere tüm html ve stil biçimlerine sahip olması gerekir.
Bu eklenti tarafından tamamen yönetilen tüm bu olaylar ...
JQuery Bubble Popup eklentisinin yeni sürümü 3.0, şu anda en ünlü javascript kitaplığının en son ve kararlı sürümü olan jQuery v.1.7.2'yi desteklemektedir.
3.0 sürümünün en ilginç özelliği, jQuery & Bubble Popup eklentisini Script.aculo.us, Mootols veya Prototype gibi diğer kitaplıklar ve javascript çerçeveleriyle birlikte kullanabilmenizdir çünkü eklenti, uyumsuzluk sorunlarını önlemek için tamamen kapsüllenmiştir;
jQuery Bubble Popup test edilmiştir ve birçok bilinen ve "bilinmeyen" tarayıcıyı destekler; tam liste için belgelere bakın.
Önceki sürümler gibi, jQuery Bubble Popup eklentisi MIT lisansı altında yayınlanmaya devam ediyor; Ticari veya kişisel projelerde telif hakkı başlığı olduğu gibi bırakıldığı sürece jQuery Bubble Popup'ı kullanmakta özgürsünüz.
en son sürümü indirin veya http://www.maxvergelli.com/jquery-bubble-popup/ adresinden canlı demoları ve öğreticileri ziyaret edin
Basit Popup Baloncuğunu otomatik olarak yeniden boyutlandırın
index.html
<!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;
});
});
});bubble.css
/* 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);
}Bunun için qTip'i kullanabilirsiniz; Ancak fareyle üzerine gelme olayında başlatmak için biraz kodlamanız gerekir; Ve metin alanlarınızda varsayılan bir filigran istiyorsanız, filigran eklentisini kullanmanız gerekir ...
Bunun birçok tekrarlayan koda yol açtığını fark ettim; Bu yüzden, qTip'in üstüne, form alanlarına bilgilendirici açılır pencere eklemeyi gerçekten kolaylaştıran bir eklenti yazdım. Buradan kontrol edebilirsiniz: https://bitbucket.org/gautamtandon/jquery.attachinfo
Bu yardımcı olur umarım.