タグ :

jQueryのプラグイン作成の覚え書き : JavaScript

投稿日 : 2013年1月18日 | 更新日 : 2013年01月18日 前のページへ戻る

Pocket

HTMLファイル index.html

<head>
...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="template.js"></script>
<script>
jQuery(function($) {
    $('.orange-link').setLinkHoverColor('orange');
    $('.olive-link').setLinkHoverColor('olive');
})
</script>
....
</head>

JavaScriptファイル template.js

/**
 * jQuery plugin template
 *
 * Set link hover color
 * $('selector').setLinkHoverColor('color');
 *
 * @param {String} color
 * colorはblue, orangeなどのHTML color name
 */
jQuery.fn.setLinkHoverColor = function(color) {

    // thisは$('selector').setLinkHoverColorを実行したselectorのjQueryオブジェクト(リスト)を指す

    // jQuery.selectorは$('selector').setLinkHoverColorを実行したセレクタ文字列。 $(window)のときは空文字。
    var selector = (this.selector !== '') ? this.selector : '';

    color = color || 'blue';

    // 即時実行でイベントハンドラを設定
    return function() {

        // thisはwindowオブジェクトを指す

        $('a' + selector).hover(function() {

            // thisはaオブジェクト

            $(this).css('color', color);

        }, function() {

            // thisはaオブジェクト
            $(this).css('color', 'blue');

        });

    }();
};

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

このページの上へ移動

コメント

No comments yet.

コメントの投稿

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

 

 

 


このページの上へ