At the moment I’m trying to figure out how use default and custom settings in jQuery plugins. I want to be able to apply the plugin’s default settings to elements using a universal class, but additionally customise some of those elements by selecting their ID’s instead. Example: http://jsfiddle.net/srkPT/2/
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.box {width:200px; height:200px; padding:50px; margin:40px; border:1px solid; float:left;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
</head>
<body>
<div class="box">Box 1 - </div>
<div id="one" class="box">Box 2 - </div>
<div id="two" class="box">Box 3 - </div>
<div class="box">Box 4 - </div>
<script type="text/javascript">
(function($) {
$.fn.myPlugin = function(params) {
var defaults = {
background: '#ddd',
content: 'foo'
};
var params = $.extend(defaults, params);
return this.each(function() {
$(this).css('background-color', params.background)
.append(params.content + ' ');
}); //RETURN this EACH
}; //fn myPlugin
})(jQuery);
$(function(){
$('.box').myPlugin();
$('#one').myPlugin({content:'bar'});
$('#two').myPlugin({background:'yellow'});
});//document READY
</script>
</body>
</html>
What happens when this runs is that it appends 2 lots of content to #one and #two, and I can understand why; the plugin triggers on all elements with .box (including #one and #two), and then it runs a second time on divs #one and #two, appending the new content on top.
Without changing or running filters on selectors, or adding extra classes to the html, is there any practical way to get around this, so it doesn’t apply the plugin twice to the same element? Thanks in advance.
Update
Got this working thanks to a suggestion by czarchaic. Example: http://jsfiddle.net/srkPT/3/
However, it is dependant on the plugin being applied in a specific order. For now, I’m pretty happy, though if anyone can think of a way to get the desired effect regardless of which order it’s applied, I’d be most grateful. Thanks to everyone for their help.
You could set a data attribute and test for it.