jQuery plugin base frame_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-03 07:54 出处：网络

I\'m new to using jQuery. I tried to build a plugin, but it didn\'t work. Why? Here is what I have: <head>

相关专题：jquery

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);