さんまがおいしい季節だねー(´・ω・`)

サラッとjQueryプラグインを書けると(・∀・)イイ!!感じ

JavaScript — タグ: — さくら @ 2010/02/05 17:53

某サイトにて、type=”text” の input 要素を、こんな感じで jQuery を使って無効にしていたのですが、

function disable_enter(e) {
    if (e.which == 13) {
       return false;
    }
    return true;
}

$(function() {
    $('.noEnter').keypress(disable_enter);
});

同じ機能を他でも使うことになって、いちいち keypress(disable_enter) 呼び出すのもうっとおしいなと思って、試しに jQuery プラグインにしてみたところ、応用範囲が超スゲー感じだったのでお伝えしたいと思います。

とりま上のをプラグインにするとこんな感じ。

(function($) {
    $.fn.extend({
        disableEnter: function() {
            this.keypress(function(e) {
                return (e.which != 13);
            });
        }
    });
})(jQuery);

$(function() {
    $('.noEnter').disableEnter();
});

呼び出し側のコードが、超簡単になったのがお分かり頂けるでしょうか?

jQuery プラグインの作り方は、プラグイン関数をメンバに持つオブジェクトを引数に渡すだけです。プラグイン関数内では、this は呼び出しに使用された jQuery オブジェクト(上の例なら $(‘.noEnter’) が返すオブジェクト)になってますので、元々 jQuery 用に書かれたコードならだいたいそのまま動きます。

元のコードでは「disable_enter を keypress イベントハンドラにセットするとエンター入力でフォームがサブミットされなくなります」という感じで、処理の概要の説明が若干まだるっこしいですが、プラグインにすると「disablEnter() を呼び出すとエンター入力でフォームがサブミットされなくなります」とう感じで、超スッキリします。

ちなみに $.fn.extend ではなく $.extend を使用すると、jQuery そのものの機能を拡張できるのですが、今日はメンドイので説明省略w

jQuery にはプラグインディレクトリ もありますので(たぶんエンターを無効にするプラグインはここにありそうw)、これ超イケテルプラグインができたらうpしたら良いと思うのですが、それほど大したものじゃなくても、jQuery の処理をプラグインにしてパッケージングしておくと再利用性がぐーんと広がるような気がします。

ぜひお試しあれw

1件のコメント »

  1. ALIjTzPlUwvfkpKIuz 8353

    コメント by xUVswbHcmsFZjqD — 2014 年 10 月 5 日 @ 17:53

この投稿へのコメントの RSS フィード。 TrackBack URI

コメントする

Copyright © 2017 さくらたんどっとびーず | powered by WordPress with Barecity