jQuery plugin base frame
I'm new to using jQuery. I tried to build a plugin, but it didn't work. Why?
Here is what I have:
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
(function($){
$.alert = function(sett开发者_Go百科ings){
var config = {
// settings
'text': "old text",
'smily': ":(",
// ...
};
if ( settings ){$.extend(config, settings);}
// variables
var i = 0;
// script
alert(config.text + " " + config.smily);
};
</script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$.alert(text: "new text", smily: ";)");
});
</script>
</body>
Assign the $.extend return value (similar question)
if (settings) { config = $.extend( {}, config, settings ); }
And call it like this:
$(document).ready(function() {
$.alert( { text: "new text", smily: ";)" } );
});
Also remove the coma from the last default value 'smily': ":(",
Click here for a working demo.
Short demo:
(function($){
$.fn.pluginas = function(options) {
var defaults = {
width: 300,
param: "Par",
param2: "Par2",
};
var options = $.extend(defaults, options);
return this.each(function() {
});
};
})(jQuery);
This how should be:
(function($){
$.alert = function(settings){
var config = {
// settings
text: "old text",
smily: ":(",
// ...
};
if ( settings ){$.extend(config, settings);}
// variables
var i = 0;
// script
alert(config.text + " " + config.smily);
}
})(jQuery);
I don't know what you intend to do with it, but your plugin seems to work. You're just not calling it right : instead of $.alert(text: "new text", smily: ";)"); try $.alert({text: "new text", smily: ""});
When developing plugins, it's a good thing to keep some standards (such standards can be seen on http://docs.jquery.com/Plugins/Authoring).
After writing a few plugins, I decided to follow a standard and developed a plugin template that should be the base of all my future plugins :
/**
* PLUGIN NAME :
* VERSION :
* AUTHOR : yourname ( yourname [at] domain [dot] com)
* DESC :
* USAGE :
**/
(function($,window,undefined){
$.fn.pluginName = function(o){
// some globals
var options = $.extend({},$.fn.pluginName.defaults,o);
// constructor
function pluginName(el,o){
var api = this,
$el = $(el);
//internal api
function _initialise(options){
}
function _destroy(){
}
// external api
$.extend(api,{
initialise : function(){
_initialise.apply(api,arguments);
return api;
},
destroy : function(){
_destroy.apply(api,arguments);
return api;
},
reinitialise : function(){
return
api
.destroy()
.initialise.apply(api,arguments);
},
});
// initialise
_initialise(o);
}
return $(this).each(function(){
var that = $(this),
api = that.data('pluginNameApi');
if(api instanceof pluginName)
api.reinitialise(options);
else
that.data('pluginNameApi',new pluginName(that.get(0),options));
});
}
$.fn.pluginName.defaults = {
}
$.fn.pluginName.version = 1.0;
})(jQuery,window);
加载中,请稍侯......
精彩评论