JQueryのプラグインを作ろうかと公式サイトの「Advanced Plugin Concepts」を読んだ覚書

PPW MBnokondensa 1024x682 JQueryのプラグインを作ろうかと公式サイトの「Advanced Plugin Concepts」を読んだ覚書

覚書第2弾です。
前回の
「JQueryのプラグインを作ろうかと公式サイトの「How to Create a Basic Plugin」を読んだ覚書」
http://www.sdblog.info/20130425534.html
も参考にしてください。

// plugin definition
$.fn.hilight = function( options ) {
    // Extend our default options with those provided.
    // Note that the first arg to extend is an empty object -
    // this is to keep from overriding our "defaults" object.
    //この書き方で空の引数が入ってきたらデフォルトを読む設定になる。
    var opts = $.extend({}, $.fn.hilight.defaults, options);
    // Our plugin implementation code goes here.
    //この辺に実装を書いていく。
};

// plugin defaults - added as a property on our plugin function
//デフォルトの設定です。
$.fn.hilight.defaults = {
    foreground: "red",
    background: "yellow"
};

1


上記の書き方が最小のコードで拡張性の高い書き方になっているようです。


1
$.fn.hilight.defaults.foreground = "blue";

上記のように実行することで

$("#myDiv").hilight();

これで青い色にかわることになります。


// デフォルトのforegroundカラーが青になります。
$.fn.hilight.defaults.foreground = "blue";
// ...
// .hilightDivに対して上記の設定で反映されます。
$(".hilightDiv").hilight();
// ...

// 下記のようにforegroundを再度設定すればその設定で反映されることになります。
$("#green").hilight({
foreground: "green"
});

デフォルトの値の設定の仕方と上書きの仕方をまとめた感じですね。

内部で定義して呼び出すには以下のようにする。

// plugin definition
$.fn.hilight = function( options ) {
    // iterate and reformat each matched element
    return this.each(function() {
var $this = $( this );
// ...
var markup = $this.html();
// call our format function
markup = $.fn.hilight.format( markup );
    $this.html( markup );
});
};
// define our format function
$.fn.hilight.format = function( txt ) {"
    return "<strong>" + txt + "</strong>";
};

最初のコードと次のコードをあわせてみた。
※よい書き方かどうかはまったく不明
※あとで見返したら恥ずかしくなるはず。。


<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.7");</script>
<script type="text/javascript">
// plugin definition
$.fn.hilight = function( options ) {

	var opts = $.extend({}, $.fn.hilight.defaults, options);

    // iterate and reformat each matched element
    return this.each(function() {

		var $this = $( this );
		// ...
		var markup = $this.html();
		// call our format function
		color = $this.hilight.defaults.foreground;
		markup = $.fn.hilight.format( markup , color );
		$this.html( markup );
	});
};
// define our format function
$.fn.hilight.format = function( txt , color) {
    return "<strong>" + "<font color=" + color + ">" + txt + "</font>" +  "</strong>";
};

$.fn.hilight.defaults = {
    foreground: "red",
    background: "yellow"
};

//実行
//ここを変更でかわります。
$.fn.hilight.defaults.foreground = "blue";
//htmlロード時に実行です。
$(document).ready(function(){
  $("p").hilight();
})


</script>


</head>
<body>

<p>あいうえををををを</p>

</body>
</html>

とりあえずあわせただけなのでやっつけ感満載ですがこんな感じでプラグイン作れるようです。
みてわかると思いますが今回は単純にタグを埋め込む形にしています。
やるならCSSで色を変えるとか、BackGroundColorつけたいよねとかいろいろとあると思います。
次はこれを拡張します。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">