jQueryの最近のブログ記事

クロージャは何の役に立つのか?

前回の記事で、クロージャは「状態を保持する関数」であると書きました。
これを応用すると、いろいろ便利なことができます。

jQueryとクロージャは相性バツグン

jQueryを使った経験があれば、誰でも下記のようなコードを書いたことがあるのではないでしょうか?
$('#btn').click(function(){
  alert('hello');
});
ここで、clickメソッドに渡されているのは無名関数function(){...}です。
そう、無名関数と言えばクロージャの出番です!

クロージャの応用例:2回目にクリックすると警告が出るボタン

ショッピングカートの「注文する」ボタンで、2重クリックすると2回決済されてしまうというサイトをたまに見かけます。
jQuery + クロージャを使うことで、これを防止してみましょう。
HTML
<form name="frm" id="frm">
  <input type="submit"   value="注文する" />
</form>
Javascript
$(function(){

    var isClicked = false;

    $('#frm').submit(function(){
        if (isClicked) {
            alert('すでにクリック済みです。');
            return false;
        }

        isClicked = true;
    });

});
デモ

↓2回クリックすると、2回目に警告が出ます。


クラスを作るより手軽なので、jQuery+クロージャの組み合わせはとってもおすすめです。
ぜひいろんな場面で使ってみてください!

これで、あなたはクロージャ入門を卒業しました。
最後まで読んでくれてありがとう。
おつかれさまですた。

jQueryを使って2重送信を防止する方法を紹介します。
Javascript
$(function(){
  var isSubmitClicked = false;
  $('#submitBtn').click(function(){

   if(isSubmitClicked) {
        alert('既にクリック済みです。お待ちください。');
        return false;
    }

    isSubmitClicked = true;
});
HTML
<form>
 <input type="submit" id="submitBtn" value="送信" />
</form>
ポップアップカレンダーによる日付入力インターフェースはいろいろありますが、やはりredmineのやつが一番使いやすいと思います。
そこで、誰でも簡単に設置できるように、jQueryプラグインとして移植してみました。

デモ

日付を入力: ← クリック


どうですか?直感的でしょ?

ダウンロード

下記のページで設置方法と使い方を紹介しています。
どうぞご利用ください。

シンプルなカレンダー日付入力プラグイン jquery.simplecalendarjp.js
カヤックのブログに、相反する2つの記事が書かれていました。
非常に面白かったので紹介します。

1つ目の記事
jQuery言語入門
AmazonS3上の画像を表示するときは、下記ようなHTMLタグになると思います。

<img id="image1"
 src="http://hoge.s3.amazonaws.com/fuga/file.jpg?AWSAccessKeyId=AKIHOGE&amp;Expires=1322305525&amp;Signature=abcde" >

これをjQueryで再読み込みする方法をご紹介します。

人気記事

このアーカイブについて

このページには、過去に書かれたブログ記事のうちjQueryカテゴリに属しているものが含まれています。

前のカテゴリはiPhoneです。

次のカテゴリはnanoです。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

最近の人気記事