THE HAM MEDIA BLOG

いつも利用させていただいているjQueryのプラグイン「yuga.js」
どんな風に書かれているのかなーって思い、作者のブログを読んだところ、
プラグインの記述方法で書いていると書かれていた。

そんなものがあるのかなと思い出してみたら、
魔法の鎖のつなぎ方(2)で書かれていたのを思い出した。
どんな風に書けばいいのかメモ程度に書いておく。

試作

とりあえず、yuga.jsの記述を参考に、
テキストの色を変更するくらいのものを作ってみることにした。

■JavaScript

(function($) {
  $(function() {
    $.ham.drowcolor({});
  });

  $.ham = {
    drowcolor: function(options){
      var c = $.extend({
        textcolor:'red',
        target:'div.preview'
      }, options);
      $(c.target).each(function(){
        $(this).css("color",c.textcolor);
      });
    }
  };
})(jQuery);

■HTML

<div class="preview">
<p>ダミーテキスト０</p>
<p>ダミーテキスト１</p>
<p>ダミーテキスト２</p>
<p>ダミーテキスト３</p>
<p>ダミーテキスト４</p>
</div>

■プレビュー

$.ham.drowcolor({});でtextcolorとtargetを変更できるようにもなっている。

  $(function(){
    $.ham.drowcolor({
        textcolor:'blue',
        target:'h3'
    });
  });

上記のようにすると、h3に指定した部分が青色になる。

プラグイン作ったりするのなんて、難しいけど、
もう少し勉強したら何か作れるかな？