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

JavaScript | jQuery | 2010年7月 | Comments (0)

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

プラグイン作成の概要

jQueryはプラグインの作成用にjQuery.fnオブジェクトを用意している。プラグインの作成方法は2通りある^[1]。

方法1 jQuery.fnにメソッドを定義する方法

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

方法2jQuery.fn.extendメソッドを使う方法

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

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

jQuery.fnにメソッドを定義する方法

jQuery.fnにメッソドを定義して簡単なプラグインを作成する。

<div id="outer">
    <div id="inner">Hello World</div>
</div>

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');

});

jQuery.fn.extendメソッドを使う方法

jQuery.fn.extend(object)

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

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

jQuery.extend()

jQuery.extend()は引数の数に応じて異なる動作をする。

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

上記の例では2の目的でjQuery.extendを使っている。

参考サイト
»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の記述方法にどのような違いがあるのかは調査中。

No comments yet.

コメントの投稿

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

« 前の記事

サイト運営者

資格

履歴

個人サイト

WordPress

テーマ

プラグイン

concrete5

EC-CUBE3

開発サービス