12,673
回編集
差分
ナビゲーションに移動
検索に移動
ページの作成:「==jQuery プラグインの作成== [jQuery][JavaScript] ===骨格=== *プラグインを匿名関数でラップし、すぐその関数を実行することで、$…」
==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("<th></th>"); // 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("<col");
if ("width" in this) {
cg.push(" width='");
cg.push(this.width);
cg.push("'");
}
cg.push("/>");
});
table.prepend(cg.join(""));
// for scrollbar
cg.push("<col width='18px'/>");
headerTable.prepend(cg.join(""));
}
// 構造を作成
table.wrapAll("<div class='lightable-wrapper' style='width:100%;'>"
+ "<div class='lightable-body-wrapper' style='overflow:auto;width:100%;"
+ "height:" + cfg.height + ";'></div></div>");
wrapper = table.closest(".lightable-wrapper");
wrapper.prepend("<div class='lighttable-head-wrapper' style='overflow:hidden;width:100%;height:100%;'></div>");
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);
[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("<th></th>"); // 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("<col");
if ("width" in this) {
cg.push(" width='");
cg.push(this.width);
cg.push("'");
}
cg.push("/>");
});
table.prepend(cg.join(""));
// for scrollbar
cg.push("<col width='18px'/>");
headerTable.prepend(cg.join(""));
}
// 構造を作成
table.wrapAll("<div class='lightable-wrapper' style='width:100%;'>"
+ "<div class='lightable-body-wrapper' style='overflow:auto;width:100%;"
+ "height:" + cfg.height + ";'></div></div>");
wrapper = table.closest(".lightable-wrapper");
wrapper.prepend("<div class='lighttable-head-wrapper' style='overflow:hidden;width:100%;height:100%;'></div>");
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);
© 2006 矢木浩人
