Making jQuery plugin exhibit jQuery's on() quality
I just created a jQuery plugin http://jsbin.com/aCoboQo/2 which applies a
tooltip to the selected elements. To apply it to all elements of class
"myElement", one would simply use the following script:
$('.myElement').toolTip();
All is good until I wish to add another element. The newly added element
never had the plugin applied to it, so it will obviously not have a
tooltip. Yes, I know I can apply the tooltip to the newly added element
after adding, but I would rather not make the user need to.
How do I make my jQuery plugin exhibit jQuery's on() quality? I am okay
with either modifying the plugin or changing how I apply pluging.
Again, a live demo is at http://jsbin.com/aCoboQo/2 and the script is
duplicated below.
<!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=ISO-8859-1" />
<title>screenshot</title>
<script src="http://code.jquery.com/jquery-latest.js"
type="text/javascript"></script>
<style type="text/css">
.myElement{margin:100px;}
.toolToolActive{color:blue;}
.myTooTip {
border:1px solid #CECECE;
background:white;
padding:10px;
display:none;
color:black;
font-size:11px;-moz-border-radius:4px;
box-shadow: 3px 1px 6px #505050;
-khtml-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
}
</style>
<script type="text/javascript">
(function($){
var defaults = {
'class' : '', // Css class(es) to add to tooltip (along with
standardToolTip).
'mouseMove': true, // A flag indicating whether to move tooltip
with mouse.
'speed' : 'fast', // The speed at which to fade in the tool tip.
'delay' : 250, // Delay (in ms) before opening the popup.
'xOffset' : 20,
'yOffset' : 10
};
var methods = {
init : function (options) {
// Create settings using the defaults extended with any
options provided.
var settings = $.extend(defaults, options || {});
return this.each(function () {
var title,
timeoutID,
$t,
toolTip;
// Wrap the content of the current element in a span.
$t = $(this).wrapInner('<span />');
$t.children('span').hover(function(e) {
if(!$t.hasClass('toolToolActive')) {
title = $t.attr('title');
$t.attr('title',''); // Remove the title so that
it doesn't show on hover.
timeoutID = window.setTimeout(function () {
// Create a div to be the tooltip pop up, add
the styling as well as
// the html (from the display function) to it
and then fade the element in
// using the speed specified in the settings.
toolTip = $('<div />')
.addClass('standardToolTip ' + settings['class'])
.html(title)
.css('top', (e.pageY - settings.yOffset) + 'px')
.css('left', (e.pageX + settings.xOffset) + 'px')
.css('position', 'absolute')
.appendTo('body')
.fadeIn(settings.speed);
$t.addClass('toolToolActive');
}, settings.delay);
}
},
function () {
window.clearTimeout(timeoutID);
$t.attr('title', title);
if ($t.hasClass('toolToolActive')) {
toolTip.remove();
$t.removeClass('toolToolActive');
}
});
$t.mousemove(function (e) {
if (settings.mouseMove &&
$t.hasClass('toolToolActive')) {
toolTip.css('top', (e.pageY - settings.yOffset) +
'px')
.css('left', (e.pageX + settings.xOffset) + 'px');
}
});
});
},
destroy : function () {
return this.each(function () {
var $e = $(this);
$e.html($e.children('span').html());
});
}
};
$.fn.toolTip = function(method) {
if (methods[method]) {
return methods[method].apply(this,
Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || ! method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on
jQuery.toolTip');
}
};
}(jQuery));
$(function(){
$('.myElement').toolTip({
'class':'myTooTip'
});
$('.add').click(function(){$('#myDiv').append('<p
class="myElement" data-id="4" title="Popup for New
Doe">New Doe</p>');});
});
</script>
</head>
<body>
<div id="myDiv">
<p class="myElement" data-id="1" title="Popup for John Doe">John
Doe</p>
<p class="myElement" data-id="2" title="Popup for Jane Doe">Jane
Doe</p>
<p class="myElement" data-id="3" title="Popup for Baby Doe">Baby
Doe</p>
</div>
<p class="add">Add</p>
</body>
</html>
No comments:
Post a Comment