googleで
カスタム検索
プロフィール

けろ&ひな

Author:けろ&ひな
大阪在住。
親ばか。
最近、転職したよ。でも、やってることは一緒なんだけどね。;-P

最近の記事
カテゴリー
月別アーカイブ
最近のコメント
最近のトラックバック
スポンサード リンク

スポンサーサイト--------(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[jQuery]pluginの作り方について 其の12011-08-26(Fri)

どうにも、jQueryのプラグインの書き方が分かっていない管理人です。

過去にアップしてみたスクリプトも汚くて公開したくないくらいですが、恥をかくほど努力せねばと思うので晒し首にしてあります。

ということで、いまさら!改めて本家サイトの「Plugins/Authoring」を勝手訳、google翻訳、エキサイト翻訳、嘘訳駆使して勉強します。
(嘘訳が酷過ぎるという場合には、コメントにて言ってください!)

というわけで、その1。

本家サイトでは以下の内容になってます。
  1. Getting Started
  2. Context
  3. The Basics
  4. Maintaining Chanabillity
  5. Defaults and Options
  6. Namespacing
    1. Plugin Methods
    2. Events
    3. Data
  7. Summary and Best Practices


その1では、1~3をやります。
では。


1.Getting Started
jQueryのプラグインを作成するために
まずは
jQuery.fn
オブジェクトに対して新しいfunctionプロパティを追加しましょう。
("myPlugin"には、あなたの好きな名前をどうぞ)
jQuery.fn.myPlugin = function() {
// DO your awesome plugin stuff here
};

が、ちょーっと待った。jQueryで良くつかわれる$記号が見当たらないですよね?
このままでは、$記号をプラグイン内で使用できません。
まずは、あなたのプラグインが$記号を使用する可能性のある
他のライブラリとの衝突を避けるためにも、$記号の上書きができないように関数クロージャとしてjQueryオブジェクトを渡してやるとよいでしょう。
(function($) {
$.fn.myPlugin = function() {
// Do your awesome plugin stuff here
};
})(jQuery);

これで、プラグイン内で安心して$記号を使用できるようになります。

2.Context
「This」キーワードについて。
プラグイン内で「this」を使用すると、それは"jQueryオブジェクト"を指すことになります。
thisがネイティブのDOMエレメントを指すのは他のインスタンスで、jQueryのコールバックとして呼び出された場所などです。
プラグイン内で「$(this)」とした場合は、「$($('#element'))」と同じになります。
(function($) {
$.fn.myPlugin = function() {

// there's no need to do $(this) because
// "this" is already a jquery object

// $(this) would be the same as $($('#element'));

this.fadeIn('normal', function() {
// the "this" keyword is DOM element
});
};
})(jQuery);
$('#element').myPlugin();


3.The Basics
とりあえず、これでjQeuryのプラグインは書けるでしょうからやってみましょう。
(function($) {
$.fn.maxHeight = function() {
var max = 0;

this.each( function() {
max = Math.max( max, $(this).height() );
});

return max;
};
})(jQuery);
var tallest = $('div').maxHeight();	// Returns the height of the tallest div

これは単純なプラグインで、「.height()」 を使用してページ内にあるDIVの最大の高さを返します。



今回はここまで。
で、ここまでで気づいたことがあります。

それは、プラグイン関数内のthisの使い方です。
色々な日本語サイトやブログでよく見かけるのが
「プラグイン関数内では、thisはエレメントそのものに当たる」
といった内容です。
自分もそうなのかぁと思っていたのですが、どうやら正確には×だったようです。
2.Contextであるように、プラグイン内のthisはjQeuryオブジェクトそのものになります。
なので、エレメントとみて$this等とすると変なことになってるということ。
thisがDOMエレメントになるのは、コールバックされた時の関数内だということです。
恥ずかしい。。。
関連記事

テーマ : プログラミング
ジャンル : コンピュータ

コメントの投稿

管理者にだけ表示を許可する

コメント

工事中
RSSフィード
リンク

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。