Reputation: 119
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.
Upvotes: 1
Views: 1950
Reputation: 171669
Several choices:
1) Add additional classes to elements then call plugin based on class
$('.box.yellow').myPlugin({background:'yellow'});
2) Add data-
attributes to markup and check within plugin if they exist and modify html accordingly within plugin
<div class="box" data-bgColor="yellow">Box 1 - </div>
then in plugin:
if( $(this).data('bgColor')){
$(this).doSomething();
}
Approach will partially depend on overall complexity of plugin or how often you need to use it
Upvotes: 0
Reputation: 6318
You could set a data attribute and test for it.
$.fn.myPlugin=function(){
return this.each( function(){
if ( $( this ).data( 'test' ) ){
return false;
}
$( this ).data( 'test', true );
// plugin code
});
};
Upvotes: 4