Is there a way to write jQuery plugins correctly?

Question

I started writing a jQuery plugin and I want to be able to:

• initialize it when i call it so $('selector').sitemap(options);
• use some elements (for example, "loader", "viewPort") in functions in the plugin

Pay attention to the 1st problem : did I do it the way I wrote the initialization (init function), or is there a more correct / elegant way to do this?

Pay attention to the second problem : to use elements such as 'loader', 'viewPort', I wrote all the functions in the sitemap object. Did I do it right or is there a more correct / elegant way to do this?

(function ($) {
    $.extend($.fn, {
        sitemap: function (options) {
            //check if applied on valid DIV element
            var canvas = this;
            if (!canvas.is('div')) return;

            var viewPort = null;
            var loader = $('<p id="initLoader">Loading...</p>');

            init();
            loadMap();

            function init() {
                //create viewPort div

                setCanvas();
            }
            function setCanvas() {
                         //set height and width
            }
            function loadMap() {
                viewPort.prepend(loader);                    
                buildMap($.parseJSON('{"pages":[]}'));
            }
            function buildMap(map){
              //...
           }        
})(jQuery);

Answer 1

.

sitemap . .

Sitemap Sitemap, .

1. 2. , , , jQuery. "Sitemap" dom jquery.

OO Sitemap. Map loadMap new Map map.getHTML - .

(function($) {

    // to be called when $(selector).sitemap is called.

    function sitemap(options) {
        // store the canvas
        var canvas = this;
        if (canvas.is("div")) {
            // if its a div then create a new canvas object.
            // Ideally the object will set event handlers and should handle
            // any changes through dom events so you dont have to manually
            // call any methods on it
            canvas = new Sitemap(canvas);
        }
        // return this so you can chain .sitemap
        return this;
    }

    // Constructor function takes the div

    function Sitemap(canvas) {
        // store them as variables on the sitemap object
        this.canvas = canvas;
        this.viewport = null;

        // init & load the map.
        this.init();
    }

    // All sitemap objects have these methods defined on them
    Sitemap.prototype.init = function() {
        //create viewport div
        //set height and width
        this.loadmap();
    };

    Sitemap.prototype.loadMap = function() {
        var loader = $('<p id="initLoader">Loading...</p>');
        this.viewPort.prepend(loader);
        // create a new map object
        this.map = new Map(json);
    };

    function Map(json) {
        //...
    }

    Map.prototype.addToContainer = function(container) {
        //...   
    };


    $.extend($.fn, {
        sitemap: sitemap
    });

})(jQuery);

Answer 2

, jQuery jQuery: http://docs.jquery.com/Plugins/Authoring

, !