jQuery プラグイン テンプレート

呼び出し側

$(function(){
   $('#TEST').QMyBoard();
});

Script側

(function($){

  // 内部関数
  var drawBoard = function(board, settings) {
    board
      .width(settings.width)
      .height('auto')
      .css('min-height', settings.height)
    ;
  };

  // 外部から呼び出せる関数
  var methods = {
    
    // 初期化
    init: function(options) {
      
      // デフォルト値を設定
      settings = $.extend(true, {
          'width': '100%',
          'height': '100vh',
          'bgimage': './img/map.png',
        }, options);
      
      drawBoard(this, settings);
      
      this.append('<div id="QBoard"></div>');
      
      var board  = $("#QBoard");
      var img = $(new Image());
      img.attr('src', settings.bgimage);
      
      // bind('load' を使用するために、jQueryObj を使用。素の Object は .get(0) が必要。
      img.bind('load', function() {
        board.html($(img));
      });
      
    },
  };

  // 他に影響しない書き方
  $.fn.QMyBoard = function(method) {
    if (methods[method]) {
      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || ! method) {
      return methods.init.apply(this, arguments);
    } else {
      $.error('Method ' +  method + ' does not exist on jQuery.QMyBoard');
    }
  };

})(jQuery)