THE HAM MEDIA BLOG

jQuery勉強メモ:プラグインの記述方法でかいてみた

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jQuery
javascript
プラグイン

jQuery;プラグインの記述方法でかいてみた

いつも利用させていただいている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>ダミーテキスト0</p>
<p>ダミーテキスト1</p>
<p>ダミーテキスト2</p>
<p>ダミーテキスト3</p>
<p>ダミーテキスト4</p>
</div>

■プレビュー

ダミーテキスト0

ダミーテキスト1

ダミーテキスト2

ダミーテキスト3

ダミーテキスト4

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

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

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

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



この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。