!!!jQuery プラグインの作成 [jQuery][JavaScript] !!骨格 *プラグインを匿名関数でラップし、すぐその関数を実行することで、$ でjQueryオブジェクトを参照できる (1) *jQuery.fn オブジェクトをメソッド名で拡張しjQueryメソッドを作成する (2) *jQuery オブジェクトは複数の結果に対応する必要があるので、each() 処理を行う (3) ;(function($){ // (1) $.fn.lightable = function(options) { // (2) var options = $.extend({ // デフォルトのオプション },options); return this.each(function(){ // (3) // 処理本体 }); }; })(jQuery); !!作成例 *http://typea.info/blg/glob/2011/08/jquery-ie.html ;(function($){ $.fn.lightable = function(options) { var cfg = $.extend({ height:"100%", },options); var table, headerTable; var wrapper, headWrapper, bodyWrapper; /** * 処理本体 */ return this.each(function(){ table = $(this); table.attr({cellspacing:"0", border:"0", cellpadding:"0" }); headerTable = $(document.createElement("table")); headerTable.attr({cellspacing:"0", border:"0", cellpadding:"0" }); headerTable.prepend($("thead", table).addClass("ui-widget-header").clone()); $('thead tr',headerTable).append(""); // for scrollbar // 固定レイアウトアルゴリズムを利用するように属性を設定(table-layout=fixed かつ widthプロパティが指定される必要がある) var tattr = {"table-layout":"fixed", "width":"100%"}; table.css(tattr); headerTable.css(tattr); if (cfg.cols) { var cg = new Array(); $(cfg.cols).each(function(){ cg.push(""); }); table.prepend(cg.join("")); // for scrollbar cg.push(""); headerTable.prepend(cg.join("")); } // 構造を作成 table.wrapAll("
" + "
"); wrapper = table.closest(".lightable-wrapper"); wrapper.prepend("
"); headWrapper = $(".lighttable-head-wrapper", wrapper); bodyWrapper = table.closest(".lightable-body-wrapper"); headWrapper.prepend(headerTable); $("thead" ,table).hide(); bodyWrapper.scroll(function(){ headWrapper.scrollLeft(this.scrollLeft); }); }); }; })(jQuery);