jQueryのプラグイン作成の覚え書き : JavaScript
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');
});
}();
};
コメント
No comments yet.
コメントの投稿
改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。