আমি একটি "বুদ্বুদ" তৈরি করার চেষ্টা করছি যা onmouseoverইভেন্টটি চালিত হওয়ার পরে পপআপ করতে পারে এবং যতক্ষণ না onmouseoverঘটনাটি ফেলে দেওয়া আইটেমটির উপরে মাউস থাকে বা মাউস বুদ্বুদে স্থানান্তরিত হয় ততক্ষণ খোলা থাকবে । আমার বুদবুদে এইচটিএমএল এবং স্টাইলিংয়ের হাইপারলিঙ্কস, চিত্রগুলি ইত্যাদির সমস্ত শালীন হওয়া দরকার will
আমি মূলত কুৎসিত জাভাস্ক্রিপ্টের প্রায় 200 লাইন লিখে এটি সম্পাদন করেছি তবে আমি সত্যিই একটি jQuery প্লাগইন বা এটি কিছুটা পরিষ্কার করার জন্য অন্য কোনও উপায় খুঁজে পেতে চাই।
উত্তর:
Qtip আমি দেখেছি সেরা। এটি এমআইটি লাইসেন্সযুক্ত, সুন্দর, আপনার প্রয়োজনীয় সমস্ত কনফিগারেশন রয়েছে।
আমার প্রিয় লাইটওয়েটের বিকল্পটি টিপসি । এমআইটি লাইসেন্সধারীও। এটি বুটস্ট্র্যাপের টুলটিপ প্লাগইনকে অনুপ্রাণিত করেছে ।
এটি মাউসওভার ইভেন্টের পাশাপাশি সহজেই করা যায়। আমি এটি করেছি এবং এটি 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);
};
তারপরে আপনি একটি ফাংশন তৈরি করেন যা ডিওএম-এলিমেন্টের অফসেট পজিশনের সাথে টুলটিপটি অবস্থান করে যা মাউসওভার ইভেন্টটিকে ট্রিগার করেছিল, এটি CSS এর দ্বারা কার্যকর able
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'ইত্যাদি।
যদিও কিটিটিপ (স্বীকৃত উত্তর) ভাল, আমি এটি ব্যবহার শুরু করেছিলাম এবং এতে আমার প্রয়োজনীয় কিছু বৈশিষ্ট্যের অভাব রয়েছে।
আমি তখন প্যাসিটিপকে হোঁচট খেয়েছি - এটি খুব নমনীয় এবং ব্যবহার করা সহজ। (এবং আমার যা প্রয়োজন আমি তা করতে পারি)
ঠিক আছে, কিছু কাজ করার পরে আমি একটি "বুদবুদ" পপ আপ করতে এবং সঠিক সময়ে দূরে যেতে সক্ষম হয়েছি। প্রচুর স্টাইলিং রয়েছে যা এখনও হওয়া দরকার তবে এটি মূলত আমার ব্যবহৃত কোড is
<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>
এটি এইচটিএমএল এর একটি স্নিপেট যা এটির সাথে যায়:
<a href="" class="temp1">Mouseover this for a terribly ugly red bubble!</a>
আমি jQuery মধ্যে কোডের একটি লাইন সহ সহজেই স্মার্ট বুদ্বুদ পপআপগুলি তৈরি করতে একটি দরকারী jQuery প্লাগইন প্রোগ্রাম করেছি!
আপনি যা করতে পারেন: - যে কোনও ডিওএম উপাদানগুলির সাথে পপআপগুলি সংযুক্ত করুন! - মাউসওভার / মাউসআউট ইভেন্টগুলি স্বয়ংক্রিয়ভাবে পরিচালিত! - কাস্টম পপআপ ইভেন্ট সেট করুন! - স্মার্ট ছায়া গোছানো পপআপগুলি তৈরি করুন! (আইআই তেও!) - রানটাইমের সময় পপআপের স্টাইলের টেম্পলেটগুলি চয়ন করুন! - পপআপগুলির মধ্যে এইচটিএমএল বার্তা প্রবেশ করান! - অনেকগুলি বিকল্প সেট করুন: দূরত্ব, বেগ, বিলম্ব, রং…
পপআপের ছায়া এবং বর্ণযুক্ত টেম্পলেটগুলি ইন্টারনেট এক্সপ্লোরার 6+, ফায়ারফক্স, অপেরা 9+, সাফারি দ্বারা সম্পূর্ণরূপে সমর্থিত
আপনি http://plugins.jquery.com/project/jqBubblePopup থেকে উত্সগুলি ডাউনলোড করতে পারেন
কিউটিপটিতে jQuery 1.4.2 এর সাথে বাগ রয়েছে। আমাকে jQuery বুদ্বুদ পপ আপতে যেতে হয়েছিল http://www.vegabit.com/jquery_b بل_popup_v2/# উদাহরণ এবং এটি দুর্দান্ত কাজ করে!
আমার কাছে মনে হচ্ছে আপনি ইভেন্টের উপর দিয়ে মাউসটি চান না: আপনি jQuery হোভার () ইভেন্টটি চান।
এবং আপনি যা চাইছেন তা হ'ল "ধনী" টুলটিপ, এক্ষেত্রে আমি jQuery টুলটিপ প্রস্তাব করি । বডিহ্যান্ডলার বিকল্পের সাহায্যে আপনি স্বেচ্ছাসেবী এইচটিএমএল স্থাপন করতে পারেন।
আমি এমন একটি "বুদ্বুদ" তৈরি করার চেষ্টা করছি যা অনমাউসওভার ইভেন্টটি চালিত হওয়ার পরে পপআপ করতে পারে এবং যতক্ষণ না মাউসটি আইটেমের উপরে চলে যায় যেটা অনমাউজ ইভেন্টটি ছুঁড়ে ফেলেছে বা যদি মাউসটি বুদ্বুদে স্থানান্তরিত হয়। আমার বুদবুদে এইচটিএমএল এবং হাইপারলিঙ্কস, চিত্রগুলি সহ স্টাইলিংয়ের সমস্ত আচরণ থাকতে হবে will
এই সমস্ত প্লাগইন এই প্লাগইন দ্বারা সম্পূর্ণরূপে পরিচালিত ...
কালারটিপটি আমি এখন পর্যন্ত দেখা সবচেয়ে সুন্দর
JQuery বুদ্বুদ পপআপ প্লাগইন এর নতুন সংস্করণ 3.0 jQuery v.1.7.2 সমর্থন করে, বর্তমানে সর্বাধিক বিখ্যাত জাভাস্ক্রিপ্ট লাইব্রেরির সর্বশেষ ও স্থিতিশীল সংস্করণ।
Version.০ সংস্করণটির সর্বাধিক আকর্ষণীয় বৈশিষ্ট্যটি হ'ল আপনি jQuery এবং বুদ্বুদ পপআপ প্লাগইনটি অন্য কোনও লাইব্রেরি এবং স্ক্রিপ্ট.একলো.স, মোটোলস বা প্রোটোটাইপের মতো জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কের সাথে একসাথে ব্যবহার করতে পারেন কারণ অসম্পূর্ণতা সমস্যা রোধ করতে প্লাগইন সম্পূর্ণরূপে এনক্যাপুলেটেড;
jQuery বুদ্বুদ পপআপ পরীক্ষা করা হয়েছিল এবং প্রচুর পরিচিত এবং "অজানা" ব্রাউজারগুলিকে সমর্থন করে; সম্পূর্ণ তালিকার জন্য ডকুমেন্টেশন দেখুন।
পূর্ববর্তী সংস্করণগুলির মতো, jQuery বুদ্বুদ পপআপ প্লাগইন এমআইটি লাইসেন্সের অধীনে প্রকাশিত হতে থাকে; আপনি বাণিজ্যিক বা ব্যক্তিগত প্রকল্পগুলিতে jQuery বুদ্বুদ পপআপ ব্যবহার করতে পারবেন যতক্ষণ না কপিরাইট শিরোনাম অক্ষত থাকে।
সর্বশেষতম সংস্করণটি ডাউনলোড করুন বা http://www.maxvergelli.com/jquery-bubble-popup/ এ লাইভ ডেমো এবং টিউটোরিয়ালগুলি দেখুন
সরল পপআপ বুদ্বুদ অটোরেসাইজ করুন
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>
বুদবুদ.জেএস
$(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);
}
টিপটিপও একটি দুর্দান্ত পাঠাগার।
আপনি এর জন্য কিউটিপ ব্যবহার করতে পারেন; তবে মাউসওভার ইভেন্টে এটি চালু করার জন্য আপনাকে কিছুটা কোড করতে হবে; এবং যদি আপনি আপনার পাঠ্য ক্ষেত্রগুলিতে একটি ডিফল্ট ওয়াটারমার্ক চান, আপনাকে জলছবি প্লাগইনটি ব্যবহার করতে হবে ...
আমি বুঝতে পেরেছি যে এটি প্রচুর পুনরাবৃত্তি কোডের দিকে নিয়ে যায়; সুতরাং আমি কিউটিপের শীর্ষে একটি প্লাগইন লিখেছি যা ক্ষেত্রগুলি গঠনে তথ্যের পপআপ সংযুক্ত করা সত্যিই সহজ করে তোলে। আপনি এটি এখানে পরীক্ষা করে দেখতে পারেন: https://bitbucket.org/gautamtandon/jquery.attachinfo
আশাকরি এটা সাহায্য করবে.