2012年12月22日土曜日

jQuery purupuru.js の作り方

こんばんは みたび Fuya です。
きょうはjQueryでプラグインを作ったので紹介したいと思います.
あなたは、jQueryでぷるぷるさせたい事ありますか?
とくに冬至は入力フォームをプルプルさせたい衝動に駆られますよね。
jQueryのプラグインは,2種類あります.
  • $('selector').hoge()
  • $.hoge()
今回は,特定のオブジェクトをプルプルさせたいので,前者の呼び出し方法のやつにします.

さっそく作ってみよう

(function($){
$.fn.purupuru=function(){
        return this;
    };
})(jQuery);
これで何もしないjQueryプラグイン $(selector).purupuru(); の完成です.
次にプルプルさせます.

....
    $.fn.purupuru=function(){

        this.css('position','relative');

        for (var i = 0; i< 5; i++) {
            this.animate(
            {
                left: "6px"
            },
            20
            ).animate(
            {
                left: "-6px"
            },
            20
            );
        }
        this.animate(
        {
            left: "0px"
        },
        10,
        function() {
            this.css('position', '');
            this.css('position', '');
        }
        );
....
よいプルプルらいふを!

0 件のコメント:

コメントを投稿