jQuery入門 : tips

jQuery入門 No.59

2010 06月25日
コメントは受け付けていません。

───────────────────────────────
　jQuery入門 No.59
───────────────────────────────

───────────────────────────────
■目次
───────────────────────────────

　1)Ajax通信で共有使用できる設定を行う
　2)設定したForm要素を送信可能な標準のURLエンコードされた表記に変換する
　3)設定したForm要素を送信可能な標準のURLエンコードされた表記に変換し、
JSON形式で返却する
　4)編集後記

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■Ajax通信で共有使用できる設定を行う
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

jQuery.ajaxSetup( オプション )

または

$.ajaxSetup( オプション )

【サンプル１説明】
ボタンを押すと、PHPのプログラムを呼び、
返ってきたhtmlを表示しています。

こちらはPHPのプログラムを呼んでいますので、
PHPが動作するWebサーバー上でのみ動作します。

【サンプル１】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />

$.ajaxSetup({
url: ‘test_post.php’,
type: “POST”

});

$(“button”).click(function () {
$.ajax({
data: {‘key’: ‘ビーフェイス’},
success: function(data){
$(“#results”).append(data);
}
});

});

</script>
</body>
</html>

【test_post.php】
<p>postされた値は</p>
<p><?= htmlspecialchars($_POST['key'], ENT_QUOTES, ‘UTF-8′); ?></p>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■設定したForm要素を送信可能な標準のURLエンコードされた表記に変換する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

serialize()

【サンプル２説明】
フォームのセレクションボックスや、チェックボックスなどを
選択したり、入力したりすると、<div id=”results”></div>
部分に変換された表記を表示します。
【サンプル２】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />

<input type=”checkbox” name=”pc1″ value=”windows” id=”ch1″/>
<label for=”ch1″>windowsを使っている</label>
<input type=”checkbox” name=”pc2″ value=”mac” id=”ch2″/>
<label for=”ch2″>macを使っている</label>
<br />
<input type=”radio” name=”radio” value=”male” id=”r1″/>
<label for=”r1″>男性</label>
<input type=”radio” name=”radio” value=”female” id=”r2″/>
<label for=”r2″>女性</label>
<br />
<input type=”text” name=”etc” />
</form>

$(“:text”).keyup(showValues);
showValues();
</script>

</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■設定したForm要素を送信可能な標準のURLエンコードされた表記に変換し、
JSON形式で返却する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

serializeArray()

【サンプル３説明】
ボタンを押すと、入力データのnameとvalueを<div id=”results”></div>
部分に表示します。
【サンプル３】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />

$(“button”).click(function () {
$(“#results”).empty();
var array = $(“form”).serializeArray();

jQuery.each(array , function(i, data) {
$(“#results”).append(“name: ” + data.name + ” value:” + data.value + “<br />”);
});
});

</script>

</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
twitterのダウンしたときのくじらのイメージを
CSSで表現した方がいらっしゃるようで
すごいなぁ～とついつい感心してしまいました。

IEでは崩れてしまいますが、SafariやChromeでは
ゆらゆらゆれています。
http://www.subcide.com/articles/pure-css-twitter-fail-whale/

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
jQuery入門 (http://www.bface.net/tips/jquery/)
    発行：株式会社ビーフェイス http://www.bface.net/
    発行システム：『まぐまぐ！』 http://www.mag2.com/
    配信中止はこちら http://www.mag2.com/m/0000280891.html
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    ■レンタルサーバー比較サイト■
      http://www.rental-server-search.jp/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

tips_admin jQuery

入力関連プラグインの紹介ページ

2010 06月21日
コメントは受け付けていません。

@ITのjQueryプラグイン実践活用法に「あなたのWebを入力しやすくするjQueryプラグイン10選」という記事がありました。

フォームを作る際参考になりそうですヨ。

tips_admin jQuery

jQuery入門 No.58

2010 06月18日
コメントは受け付けていません。

───────────────────────────────
jQuery入門 No.58
───────────────────────────────

───────────────────────────────
■目次
───────────────────────────────

1)Ajaxリクエスト終了時に実行するコールバック関数を設定する
2)Ajaxリクエスト送信が成功時に実行するコールバック関数を設定する
3)編集後記

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■Ajaxリクエスト終了時に実行するコールバック関数を設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

ajaxStop( コールバック関数 )

【サンプル１説明】
ボタンを押すと、「開始！」のアラートが出て
ロード中です…を表示します。
データの読み込みが完了すると、「完了」の
アラートが出てロード中です…を隠します。

こちらはPHPのプログラムを呼んでいますので、
PHPが動作するWebサーバー上でのみ動作します。

【サンプル１】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />

</style>
</head>
<body>
<p>
<button>押してみてね</button>
</p>
<div id=”loading”>ロード中です…</div>
<div id=”results”></div>
<script>

$(“#results”).ajaxStart(function(){
alert(“開始”);
$(“#loading”).show();
});

$(“#results”).ajaxSend(function(){
$(“#results”).text(“”);
});

$(“#results”).ajaxStop(function(){
alert(“完了”);
$(“#loading”).hide();
});

$(“button”).click(function () {
$.getJSON(
“test_getjson2.php”,
null,
function(data) {
$(“#results”).append(“<dl>”);
for (i in data) {
$(“#results”).append(“<dt>” + i + “</dt><dd>” + data[i] + “</dd>”);
}
$(“#results”).append(“</dl>”);
});

});

</script>
</body>
</html>

【test_getjson2.php】
<?php
echo <<<EOF
{“5/1″: “○○ちゃん誕生日”, “5/2-5″: “旅行”,”5/6″: “夕食会”}
EOF;
?>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■Ajaxリクエスト送信が成功時に実行するコールバック関数を設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

ajaxSuccess( コールバック関数 )

【サンプル２説明】
ボタンを押すと、「開始！」のアラートが出て
ロード中です…を表示します。
データの読み込みが成功すると、「成功しました！」の
アラートが出てロード中です…を隠します。

こちらはPHPのプログラムを呼んでいますので、
PHPが動作するWebサーバー上でのみ動作します。

【サンプル２】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />

</style>
</head>
<body>
<p>
<button>押してみてね</button>
</p>
<div id=”loading”>ロード中です…</div>
<div id=”results”></div>
<script>

$(“#results”).ajaxStart(function(){
alert(“開始”);
$(“#loading”).show();
});

$(“#results”).ajaxSend(function(){
$(“#results”).text(“”);
});

$(“#results”).ajaxSuccess(function(){
alert(“成功しました！”);
$(“#loading”).hide();
});

</script>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
東京も梅雨入りしました。
４月の天気の影響かつい最近までつつじが綺麗でしたが
これで紫陽花が元気に咲きそうですね。
ワールドカップも始まり、サッカーファンの方は眠れない日々が
続きそうですね。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
jQuery入門 (http://www.bface.net/tips/jquery/)
発行：株式会社ビーフェイス http://www.bface.net/
発行システム：『まぐまぐ！』 http://www.mag2.com/
配信中止はこちら http://www.mag2.com/m/0000280891.html
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■レンタルサーバー比較サイト■

http://www.rental-server-search.jp/

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

tips_admin jQuery

jQuery入門 No.55

2010 05月28日
コメントは受け付けていません。

───────────────────────────────
　jQuery入門 No.55
───────────────────────────────

───────────────────────────────
■目次
───────────────────────────────

　1)HTTP通信(GET)でjavascriptファイルを読み込み実行する
　2)HTTP通信(POST)でデータを取得する
　3)編集後記

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■HTTP通信(GET)でjavascriptファイルを読み込み実行する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

jQuery.getScript( url, [コールバック関数] )

または

$.getScript( url, [コールバック関数] )

戻り値はXMLHttpRequestオブジェクトになります。
【サンプル１説明】
ボタンを押すと、test.jsが読み込まれ、アラートが表示されます。

【サンプル１】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />

</script>
</body>
</html>

【test.js】
alert(“呼ばれたよ!”);

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■HTTP通信(POST)でデータを取得する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

jQuery.post( url, [ 送信するデータ ], [コールバック関数], [データの形式] )

または

$.post( url, [ 送信するデータ ], [コールバック関数], [データの形式] )
【サンプル２説明】
ボタンを押すと、test_post.phpを呼び、取得した
データを表示しています。
こちらはPHPのプログラムを呼んでいますので、
PHPが動作するWebサーバー上でのみ動作します。

【サンプル２】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />

});

</script>
</body>
</html>
【test_post.php】
<p>postされた値は</p>
<p><?php echo htmlspecialchars($_POST['key'], ENT_QUOTES, ‘UTF-8′); ?></p>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
この前「Charlotte’s Web（シャーロットのおくりもの)」をなにげに読み
始めたら結構面白かったです。
分からない単語なども結構ありますが、読み進めるにはほどよい長さでした。
英語の多読をされている方には結構お勧めかもしれません。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
jQuery入門 (http://www.bface.net/tips/jquery/)
    発行：株式会社ビーフェイス http://www.bface.net/
    発行システム：『まぐまぐ！』 http://www.mag2.com/
    配信中止はこちら http://www.mag2.com/m/0000280891.html
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    ■レンタルサーバー比較サイト■
      http://www.rental-server-search.jp/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

tips_admin jQuery

jQuery入門 No.54

2010 05月24日
コメントは受け付けていません。

───────────────────────────────
　jQuery入門 No.54
───────────────────────────────

───────────────────────────────
■目次
───────────────────────────────

　1)HTTP通信(GET)でデータを取得する
　2)HTTP通信(GET)でJSON形式のデータを取得する
　3)編集後記

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■HTTP通信(GET)でデータを取得する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】
jQuery.get( url, [ 送信するデータ ], [コールバック関数], [データの形式] )

または

$.get( url, [ 送信するデータ ], [コールバック関数], [データの形式] )

戻り値はXMLHttpRequestオブジェクトになります。
【サンプル１説明】
ボタンを押すと、test.htmlが読み込まれます。
(IEの場合はwebサーバーでないと動作しない場合があるようです）

【サンプル１】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />

</script>
</body>
</html>

【test.html】
テスト！<br />
読み込まれましたか？<br />

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■HTTP通信(GET)でJSON形式のデータを取得する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

jQuery.getJSON(url, [データ], [コールバック関数])

または

$.getJSON(url, [データ], [コールバック関数])
【サンプル２説明】
ボタンを押すと、test_getjson.phpを呼び、取得した
JSONデータを表示しています。
こちらはPHPのプログラムを呼んでいますので、
PHPが動作するWebサーバー上でのみ動作します。

【サンプル２】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />

});

</script>
</body>
</html>

【test_getjson.php】
<?php
echo <<<EOF
{“key1″: “value1″, “key2″: “value2″}
EOF;
?>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
今年の私のブームはホームベーカリー、週に3日程の利用率です。
焼きたてパンも美味しいですが、半日くらいたつと
しっとりしてきてまた美味しいです。

イーストはサフかパネトーネマザーを使っています。

サフはくせがないので、結構お勧めです。

パネトーネマザーは賛否両論なようですが、以下のサイトの方法で
焼くとほんのり甘くて美味しいパンに仕上がります。
http://plaza.rakuten.co.jp/breadrecipe/diary/200704090000/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
jQuery入門 (http://www.bface.net/tips/jquery/)
    発行：株式会社ビーフェイス http://www.bface.net/
    発行システム：『まぐまぐ！』 http://www.mag2.com/
    配信中止はこちら http://www.mag2.com/m/0000280891.html
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    ■レンタルサーバー比較サイト■
      http://www.rental-server-search.jp/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

tips_admin jQuery

jQuery入門 No.53

2010 05月14日
コメントは受け付けていません。

───────────────────────────────
　jQuery入門 No.53
───────────────────────────────

───────────────────────────────
■目次
───────────────────────────────

　1)HTTP通信でデータを取得する
　2)HTTP通信でデータを取得し、DOMに挿入する
　3)編集後記

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■HTTP通信でデータを取得する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】
jQuery.ajax(
オプション
)

または

$.ajax(
オプション
)

戻り値はXMLHttpRequestオブジェクトになります。

この関数はjQueryのAJAX通信の基本で、実際には、jQuery.getや
jQuery.postなどのほうが簡単に実装できます。

細かくオプションを設定したい場合はこちらを
利用します。
オプションには以下をハッシュ（キー:値）で設定することが出来ます。

//——————
// async : boolean
//——————
　初期値：true
　非同期通信フラグ

//——————
// beforeSend : function(XMLHttpRequest)
//——————
　ajaxリクエストが送信される前に呼ばれるイベント

//——————
// cache : boolean
//——————
　初期値：true
　キャッシュ

//——————
// complete : function(XMLHttpRequest, textStatus)
//——————
　ajax通信完了時に呼ばれる関数

//——————
// contentType : string
//——————
　初期値：”application/x-www-form-urlencoded”
　データ送信の際のcontent-type

//——————
// context : object
//——————
　コールバック関数内で用いるthisの値を設定

//——————
// data : object, string
//——————
　サーバーに送信する値

//——————
// dataFilter : function(data, type)
//——————
　戻りデータをフィルタリング

//——————
// dataType : string
//——————
　dataTypeには以下が設定できます。
　xml,html,script,json,jsonp,text

//——————
// error : function(XMLHttpRequest, textStatus, errorThrown)
//——————
　通信失敗の際に呼ばれる関数

//——————
// global : boolean
//——————
　初期値：true
　グローバルAjaxイベントを実行するかどうか指定

//——————
// ifModified : boolean
//——————
　初期値：false
　データが更新された場合のみデータを送信するかどうか

//——————
// jsonp : string
//——————
　JSONPリクエストで使用するコールバック関数のパラメータ名を設定
　設定しない場合は、callbackとなります。

//——————
// jsonpCallback : string
//——————
　JSONPリクエストのコールバック関数名を設定

//——————
// password : string
//——————
　初期値:null
　認証が必要なHTTPリクエストを送信する場合のパスワードを指定

//——————
// processData : boolean
//——————
　初期値:true
　detaオプションで指定したオブジェクトを
　”application/x-www-form-urlencoded”形式で
　送るかどうかを指定します。

//——————
// scriptCharset : string
//——————
　dataTypeオプションが”script”の場合など、読み込み文字コードを指定します。

//——————
// success : function(data, textStatus, XMLHttpRequest)
//——————
　通信が成功したときに呼ばれるコールバック関数

//——————
// timeout : number
//——————
　初期値:0
　タイムアウト時間をミリ秒で指定

//——————
// traditional : boolean
//——————
　パラメータのシリアライズをトラディショナルスタイルにしたい時
　trueにする

//——————
// type : string
//——————
　初期値:”GET”
　”GET”もしくは”POST”を指定

//——————
// url : string
//——————
　初期値:現在のページのURL
　リクエスト先のURLを指定

//——————
// username : string
//——————
　初期値:null
　認証が必要なHTTPリクエストを送信する場合のユーザ名を指定

//——————
// xhr : function
//——————
　XMLHttpRequestオブジェクトが作成された際に呼び出される
　コールバック関数
【サンプル１説明】
ボタンを押すと、test.htmlが読み込まれます。
(IEの場合はwebサーバーでないと動作しない場合があるようです）

【サンプル１】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />

});
</script>
</body>
</html>

【test.html】
テスト！<br />
読み込まれましたか？<br />

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■HTTP通信でデータを取得し、DOMに挿入する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

load(url,[データ],[コールバック関数])
【サンプル２説明】
ボタンを押すと、test.htmlが読み込まれまれ、
完了時にアラートを表示し、渡されている引数を表示します。
test.htmlはサンプル１と同じものを使用しています。
(IEの場合はwebサーバーでないと動作しない場合があるようです）

【サンプル２】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />

});
</script>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
連休は皆さんいかがお過ごしでしたか？

今週はiPadの予約開始で並んだ方もいらっしゃるようですね。
欲しいと思いつつも、どうしようかと悩む今日この頃です。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
jQuery入門 (http://www.bface.net/tips/jquery/)
    発行：株式会社ビーフェイス http://www.bface.net/
    発行システム：『まぐまぐ！』 http://www.mag2.com/
    配信中止はこちら http://www.mag2.com/m/0000280891.html
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    ■レンタルサーバー比較サイト■
      http://www.rental-server-search.jp/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

tips_admin jQuery

jQuery入門 No.52

2010 04月28日
コメントは受け付けていません。

───────────────────────────────
jQuery入門 No.52
───────────────────────────────

───────────────────────────────
■目次
───────────────────────────────

1)要素のキューにコールバック関数を設定する
2)要素のキューの先頭から実行する
3)要素のキューの内容を削除する
4)アニメーションエフェクトをON/OFFする。
5)編集後記

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のキューにコールバック関数を設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

queue(コールバック関数)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のキューの先頭から実行する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

dequeue()

【サンプル１説明】
キューの最後にエフェクトを追加して、実行します。

【サンプル１】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<style>
#box { margin:3px; width:100px; height:100px;
position:absolute; left:0px; top:100px;
background:green; display:none; }
#queue_num { color:red;}
</style>

$(“#box”).show(“slow”);
$(“#box”).animate({left:’+=400′},2000);
$(“#box”).queue(function () {
$(this).animate({width:’200px’},1500);
$(this).slideToggle(1000);
$(this).slideToggle(“fast”);
$(this).animate({width:’100px’},1500);
$(this).animate({left:’-=400′},1500);
$(this).slideUp(“normal”);
$(this).dequeue();

});

});
</script>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のキューの内容を削除する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

clearQueue([キュー名])

【サンプル2説明】
スタートボタンを押し、動いている途中でストップボタンを
押すと、動きが止まります。スタートを再度押すとその位置から
最初からのエフェクトが実行されます。

【サンプル2】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<style>
#box { margin:3px; width:100px; height:100px;
position:absolute; left:0px; top:100px;
background:green; display:none; }
#queue_num { color:red;}
</style>

});

$(“#stop”).click(function () {

$(“#box”).clearQueue();
$(“#box”).stop();

});
</script>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■アニメーションエフェクトをON/OFFする。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

jQuery.fx.off = TRUE;
もしくは

jQuery.fx.off = FALSE;

TRUEの場合アニメーション処理を行いません。
FALSEにするとアニメーション処理を行います。

【サンプル３説明】
アニメーションアリのチェックボックスのチェックを
はずすと、アニメーション処理を行わなくなります。

【サンプル2】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<style>
div { width: 100px; height: 100px; margin: 5px;
float:left;background-color: #00f;}
</style>
<script src=”jquery-1.4.2.min.js”></script>
</head>
<body>
<p>
<button>押してみてね！</button>
<label><input type=”checkbox” checked=”checked”>アニメーションアリ</label>
</p>
<div></div>
<div></div>
<script>
$(“button”).click(function () {

$(“div:eq(0)”).slideUp(300).fadeIn(400);
$(“div:eq(1)”).slideUp(300).delay(300).fadeIn(400);

});

$(“:checkbox”).click(function(){
jQuery.fx.off = !$(this).attr(“checked”);
});

</script>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
この頃子ども(5歳)は図書館がブームで、絵本を大量に借りてきて
読んでいます。
毎晩寝る前に絵本を１冊読むのですが、毎回違う絵本を読むのもまた
新鮮です。
絵本は子どものみならず親も癒してくれる気がします。
今年は国民読書年。
色々な本を手に取って読むのも良いですね。
また、今後は電子書籍での絵本なども増えていくのかもしれないですね。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
jQuery入門 (http://www.bface.net/tips/jquery/)
発行：株式会社ビーフェイス http://www.bface.net/
発行システム：『まぐまぐ！』 http://www.mag2.com/
配信中止はこちら http://www.mag2.com/m/0000280891.html
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■レンタルサーバー比較サイト■

http://www.rental-server-search.jp/

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

tips_admin jQuery

jQuery入門 No.51

2010 04月22日
コメントは受け付けていません。

───────────────────────────────
jQuery入門 No.51
───────────────────────────────

───────────────────────────────
■目次
───────────────────────────────

1)要素のエフェクトを遅らせる
2)要素のエフェクトを止める
3)要素のキューの数を返却する
4)編集後記

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のエフェクトを遅らせる
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

delay(“スピード”,[キュー名])

スピード部分は、slow,normal,fast,ミリ秒を指定します。
ない場合は、normalのスピードとなります。
キュー名は指定がない場合はデフォルトの標準キューのfxに
なります。

【サンプル１説明】
ボタンをクリックすると、同時に２つの四角がスライドアップしますが、
２つめの四角はフェイドインが300ミリ秒遅れます。

【サンプル１】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<style>
div { width: 100px; height: 100px; margin: 5px;
float:left;background-color: #00f;}
</style>
<script src=”jquery-1.4.2.min.js”></script>
</head>
<body>
<p>
<button>押してみてね！</button>
</p>
<div></div>
<div></div>
<script>
$(“button”).click(function () {

$(“div:eq(0)”).slideUp(300).fadeIn(400);
$(“div:eq(1)”).slideUp(300).delay(300).fadeIn(400);
});
</script>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のエフェクトを止める
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

stop()

【サンプル2説明】
スタートボタンを押し、動いている途中でストップボタンを
押すと、動きが止まります。

【サンプル2】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<style>
div { width: 100px; height: 100px; margin: 5px;position:absolute; background-color: #00f;}
</style>
<script src=”jquery-1.4.2.min.js”></script>
</head>
<body>
<p>
<button id=”start”>スタート</button>
<button id=”stop”>ストップ</button>
</p>
<div></div>

$(“div”).stop();
});
</script>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のキューを返却する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

queue([キュー名])

キュー名は指定がない場合はデフォルトの標準キューのfxに
なります。

【サンプル3説明】
キューの数を表示ボタンを押すと、現在溜まっているキューの
数を表示します。
キューとは待ち行列のことで、処理の待ち状態のものの
数を示します。
処理部分はrun_it部分になります。
run_it部分の中のslideUp()でまたrun_itを
呼んでいますので、ずっとrun_it部分を処理し続けます。

【サンプル3】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<style>
#box { margin:3px; width:100px; height:100px;
position:absolute; left:0px; top:100px;
background:green; display:none; }
#queue_num { color:red;}
</style>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
GWも近くなってきましたね。
皆さんはご予定はいかがですか？
遠くにお出かけもよいですが、近くを散策するのも良いですよね。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
jQuery入門 (http://www.bface.net/tips/jquery/)
発行：株式会社ビーフェイス http://www.bface.net/
発行システム：『まぐまぐ！』 http://www.mag2.com/
配信中止はこちら http://www.mag2.com/m/0000280891.html
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■レンタルサーバー比較サイト■

http://www.rental-server-search.jp/

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

tips_admin jQuery

jQuery入門 No.50

2010 04月15日
コメントは受け付けていません。

───────────────────────────────
　jQuery入門 No.50
───────────────────────────────

───────────────────────────────
■目次
───────────────────────────────

　1)要素にfadeToエフェクトを設定する
　2)要素にanimateエフェクトを設定する(1)
　3)要素にanimateエフェクトを設定する(2)
　4)編集後記

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にfadeToエフェクトを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

fadeTo(["スピード"],[コールバック関数])

スピード部分は、slow,normal,fast,ミリ秒を指定します。
ない場合は、normalのスピードとなります。
コールバック関数ではエフェクト完了後に実行する
処理を指定します。

【サンプル１説明】
<p></p>部分の文字をクリックするとフェイドし、
「フェードしました！」とアラート表示します。

【サンプル１】

<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<style>
p{cursor:pointer;}
</style>
</style>
<script src=”jquery-1.4.2.min.js”></script>
</head>
<body>
<p>
ここをクリックすると、フェイドします。
</p>
<script>
$(“p”).click(function () {
$(“p”).fadeTo(“slow”,0.25, function() {alert(“フェードしました！”);});
});
</script>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にanimateエフェクトを設定する(1)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

animate( プロパティ, [ "スピード" ], [ "easing名" ], [ コールバック関数 ] )

プロパティにはアニーメーションで変化させるstyleを設定します。
例えば、{height:”100px”}などになります。

スピード部分は、slow,normal,fast,ミリ秒を指定します。
ない場合は、normalのスピードとなります。

easing名部分で、値の変化の調節について指定します。
“linear”と”swing”を指定することが出来、プラグインを
いれると、他のeasingも利用することが可能になります。

コールバック関数ではエフェクト完了後に実行する
処理を指定します。

【サンプル2説明】

開始ボタンを押すと、四角が消えて、ボタンが押せなくなります。

【サンプル２】

<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<style>
div{width:100px;height:100px;background:#0f0;}
</style>
</style>
<script src=”jquery-1.4.2.min.js”></script>
</head>
<body>
<button>
開始
</button>
<div></div>
<script>
$(“button”).click(function(){
$(“div”).animate({height: “hide”}, 1500, “linear”,
function() { $(“button”).attr(“disabled”, “disabled”);});
});

</script>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にanimateエフェクトを設定する(2)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

animate(プロパティ, オプション)

プロパティにはアニーメーションで変化させるstyleを設定します。

オプションには、
スピード(duration),
easing値(easing),
アニメーションが終了後に
実行される関数(complete)、
アニメーション実行中のフレームごとに呼ばれる関数(step)、
キューへの保存の真偽(queue)が設定できます。

【サンプル3説明】

右へ移動ボタンをクリックすると、四角が右へ移動して,
「動いた？」というアラートを表示します。

【サンプル３】

<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<style>
div {
    position:absolute;
    background-color:#00F;
    left:10px;
    top:70px;
    width:100px;
    height:100px;
    margin:5px;
}

</style>
<script src=”jquery-1.4.2.min.js”></script>
</head>
<body>
<button>
右へ移動
</button>

</script>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
４月も半ばですが例年より寒い日が続いたりして
なかなかコートが手放せませんね。
このままだた急に暑くなって冬から夏に
なってしまいそうですね。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
jQuery入門 (http://www.bface.net/tips/jquery/)
    発行：株式会社ビーフェイス http://www.bface.net/
    発行システム：『まぐまぐ！』 http://www.mag2.com/
    配信中止はこちら http://www.mag2.com/m/0000280891.html
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    ■レンタルサーバー比較サイト■
      http://www.rental-server-search.jp/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

tips_admin jQuery

jQuery入門 No.49

2010 04月07日
コメントは受け付けていません。

───────────────────────────────
　jQuery入門 No.49
───────────────────────────────

───────────────────────────────
■目次
───────────────────────────────

　1)要素にslideToggleエフェクトを設定する
　2)要素にfadeInエフェクトを設定する
　3)要素にfadeOutエフェクトを設定する
　4)編集後記

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にslideToggleエフェクトを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

slideToggle(["スピード"],[コールバック関数])

【サンプル１説明】

サンプル１では<p></p>で設定されている文字が
スライドダウン/スライドアップを切り替え、
その際にボタンの背景色も切り替えています。

【サンプル１】

<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<style>
button.highlight { background:yellow; }
p { width:400px; }
</style>
<script src=”jquery-1.4.2.min.js”></script>
</head>
<body>
<button>表示・非表示切り替え</button>

<p>
入園入学入社の時期ですね。みなさんはいかがお過ごしですか？
新しい生活にワクワクドキドキされている方もたくさんいらっしゃる
のではないでしょうか？
</p>
<script>
    $(“button”).click(function () {
      $(“p”).slideToggle(“slow”, function() {
             $(“button”).toggleClass(“highlight”);});
    });
</script>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にfadeInエフェクトを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

fadeIn(["スピード"],[コールバック関数])

【サンプル2説明】

ボタンを押すと、div部分の四角が表示され、
四角の中に「こんにちは！」と表示しています。

【サンプル２】

<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<style>
    div { margin:3px; width:80px; display:none;
      height:80px; float:left; background:#0F0;}
    </style>
</style>
<script src=”jquery-1.4.2.min.js”></script>
</head>
<body>
<button>押してみてね！</button>
<div></div>
<script>
    $(“button”).click(function () {
      $(“div”).fadeIn(“slow”,
               function() {$(“div”).html(“こんにちは！”);});
    });
</script>
</body>
</html>