jQueryプラグインの作り方

自己紹介

• 
• かみやん (Twitter@kamiyam)
• システム開発会社
• ほとんどWebのシステム
• Java・C#

最近はHTML5・Javascriptの勉強をしてます。

元 自動車整備士です

jQueryって何？

• オープンソースの JavaScript ライブラリ
• クロスブラウザ対応
• 実装している機能が豊富
• 関数の使い方が分かりやすい
• 昨年(2010年)、MicroSoftがjQuery 開発へのサポートを発表したり

jQuery

http://jquery.com/

jQueryを使う

まずはjQueryを読み込みます
jquery-1.4.4.min.jsはjquery.comからダウンロードしてきます

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>

jQueryプラグインをつくる

別ファイルでプラグイン用のjsファイルを作りましょう

最小構成

中身はこんな感じで

(function() 
{
    $.fn.jqMyPlugin = function()
    {
        //何もしないプラグイン
        
        //チェーンメソッドの為にjQueryオブジェクトを返す
        return this;
    };
})(jQuery);

プラグイン呼び出し

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/Javascript" src="../js/jqMyPlugin.js"></script>
<script type="text/javascript">
jQuery( function( $ ){
    $.jqMyPlugin();
});
</script>