ホーム > Programming > JavaScript > プラグインの作成方法 : jQuery

 タグ :

プラグインの作成方法 : jQuery

投稿日 : 2010年7月2日 | 更新日 : 2012年01月28日 前のページへ戻る

jQueryのプラグイン作成方法のメモ。

プラグイン記述の概要

プラグインの書き方は2通りの方法がある[1]。

方法1

jQuery.fn.hoge = function () {
     // something...
};

方法2

jQuery.fn.extend({
     hoge:function () {
          // something...
     }
});

» jQueryのプロトタイプに関数を定義する方

jQuery.fnにメソッドを定義

[xthml]
Hello World
[/xthml] 
div#outer {
    width: 400px;
    height: 200px;
    border: 10px solid #666;
}
div#inner {
    width: 100px;
    height: 100px;
    border: 5px solid #ccc;
}

jQuery(function($) {
    jQuery.fn.setCenter = function() {
        // 自身のサイズ
        var width = $(this).width();
        var height = $(this).height();
        // 要素親のサイズ
        var parentWidth = $(this).parent().width();
        var parentHeight = $(this).parent().height();
        // Cssのposition
        var parentCssPos = $(this).parent().css('position');
        
        if ((parentCssPos != 'absolute') && (parentCssPos != 'relative')) {
            $(this).parent().css({               
                position: 'relative'
            });
        }
        // オフセット
        var offsetX = (parentWidth - width) / 2;
        var offsetY = (parentHeight - height) / 2;
        $(this).css({
            position: 'absolute',
            top: offsetY,
            left: offsetX
        });
        return $(this);
    };

    $('#inner').setCenter().css('backgroundColor', 'yellow');

});

extendメソッドを利用したプラグイン作成

jQuery.fn.extendとjQuery.extendのに違いに注意する。それぞれ下記の機能を持つ。

jQuery.fn.extend(object)

jQueryエレメントに独自の新しいメソッドを追加する。（典型的なjQueryプラグインの作成方法）

» jQuery.fn.extend(object) – jQuery 日本語リファレンス

jQuery.extend() – オプションの扱い

jQuery.extend()は渡される引数の数に応じて2通りの動作をする。主にプラグインの作成では、引数を複数渡す1.を使う。

  1. 引数が複数 : 引数のオブジェクトをマージして返す。
  2. 引数が1つ : jQueryオブジェクト自体を拡張。

参考サイト
»jQuery.extend() – jQuery API
»jQueryを読むために知っておきたい6つの知識 | tech.kayac.com – KAYAC engineers’ blog

jQueryプラグインのオプション処理

» 【jQuery】プラグインでのオプション(オブ ジェクト形式)の初期設定方法を2通り

jQueryオブジェクトの拡張

jQuery.extend()に、引数としてオブジェクトを1つ渡す場合はjQueryオブジェクト自体を拡張できる。 しかし通常プラグインを作成する場合はjQuery.fn.extend(object)かjQuery.fn = function () { }を使う(と思う)。

参考記事
»JavaScriptとかPerlとかPHP とかさくらとか勉強する
»jquery.jsを読み解く：第1回　jQueryライブラリ（1～171行目）

方法2を使った簡単なプラグインのサンプル

プラグイン名： jListBgColor
動作内容 ：li要素に背景色を設定し、オプションの指定があればマウスオーバーで不透明度を変化させる。

»DEMO

jListBgColor.js

jQuery(function ($) {
    $.fn.extend({ // $はJQueryオブジェクト。$.fn.extendはjQueryオブジェクトのプロタイプを拡張。
        setListBgColor : function(options) {
            // 初期値を設定
            var defaults = {
                backgroundColor    : 'transparent',
                hover              : false,
                opacity            : '1'
            };
            // オプションの初期値を設定 $.extend()はdefaultとoptionをマージして返す
            var setting = $.extend(defaults, options);
            // ulの処理
            // thisはul要素。ul要素は複数の場合があるのでeachを利用している。
            $(this).each(function() {
                var list = $(this).children('li');
                $(list).each(function () {
                    // liの処理
                    // thisはli
                    $(this).css("backgroundColor", setting.backgroundColor);
                    if (setting.hover) {
                        $(this).hover(
                            function () {
                                $(this).css("opacity", setting.opacity);
                            },
                            function () {
                                $(this).css("opacity", "1");
                            }
                        );
                    }
                });
            });
            // メソッドチェーン用
            return this;
        }
    });
});

index.html

<html>
<title>jQuery Pluginの作り方</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jListBgColor.js"></script>
<script type="text/javascript">
jQuery(function ($) {
    // 引数値を渡す
    $("#idList").setListBgColor({backgroundColor: "#D0D2D3"});
    $(".classList").setListBgColor({backgroundColor: "#9BACCA", hover : true, opacity: "0.75"}); // 複数のul要素が渡される可能性がある。
});
</script>
</head>
<body>
<ul id="idList">
	<li>リスト　項目1</li>
	<li>リスト　項目1</li>
	<li>リスト　項目1</li>
</ul>
<ul class="classList">
	<li>リスト　項目1</li>
	<li>リスト　項目1</li>
	<li>リスト　項目1</li>
</ul>
<ul class="classList">
	<li>リスト　項目1</li>
	<li>リスト　項目1</li>
	<li>リスト　項目1</li>
</ul>
</body>
</html>

参考サイト

[1] 方法1と2の記述方法にどのような違いがあるのかは調査中。

JavaScript | 固定リンク | Comments (0)

関連記事

このページの上へ移動

コメント

コメントはまだありません。

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。

 

 

 


トラックバックURL

http://www.findxfine.com/programming/javascript/1836.html/trackback

このページの上へ