ブログトップ 記事一覧 ログイン 無料ブログ開設

プログラマーな日々 このページをアンテナに追加 RSSフィード

プログラマーな日々 > 2010-11-05

2010-11-05

■[JavaScript][jQuery][まとめ]jQueryエントリのまとめ

ここまでのjQuery関連のエントリのまとめです。

エントリ

参考にしたリソース

Permalink | コメント(0) | トラックバック(0) | 16:18 jQueryエントリのまとめを含むブックマーク jQueryエントリのまとめのブックマークコメント

■[JavaScript][jQuery][TDD]QUnitでJavaScriptのユニットテストを自動化する

QUnitを使うとJavaScriptのユニットテストを自動化できます。テストには以下が必要です。

  • testsuite.cssのインクルード
  • testrunner.jsのインクルード
  • idが"main"のdiv

詳細はソースコードを見てください。

ソースコード
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>QUnit sample</title>
<script src="http://code.jquery.com/jquery-latest.js">
</script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/qunit/testsuite.css"
	type="text/css" media="screen" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/qunit/testrunner.js">
</script>
<script type="text/javascript">
$(function () {
	try {
		// ここにテストケースを書く
		test("a basic test example", function () {
			// 第１引数がtrueか？
			ok(true, "this test is fine");

			var value = "hello";
			// 第１引数と第２引数が一致しているか？
			equals("hello", value, "We expect value to be hello");
		});
	}
	catch (e) {
	}
});
</script>
</head>
<body>
<h1>
	QUnit example</h1>
<h2 id="banner">
</h2>
<h2 id="userAgent">
</h2>
<ol id="tests">
</ol>
<div id="main">
</div>
</body>
</html>

テスト結果

f:id:JHashimoto:20101105155945p:image

Permalink | コメント(0) | トラックバック(1) | 16:01 QUnitでJavaScriptのユニットテストを自動化するを含むブックマーク QUnitでJavaScriptのユニットテストを自動化するのブックマークコメント

■[JavaScript][jQuery]jQueryでAjaxを実装する

ソースコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="contents"></div>
<input id="load" type="button" value="load" />
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
(function ($) {
	$(document).ready(function () {
		$('#load').click(function () {
			// Ajaxリクエストのレスポンスを表示
			$('#contents').load('HelloWorld.html');
		});
	})
})(jQuery);
</script>
</html>

ボタンクリック前

f:id:JHashimoto:20101105151135p:image

ボタンクリック後

f:id:JHashimoto:20101105151134p:image

Permalink | コメント(0) | トラックバック(1) | 15:13 jQueryでAjaxを実装するを含むブックマーク jQueryでAjaxを実装するのブックマークコメント

■[JavaScript][jQuery]jQuery UIのテーマ

jQuery UIにはテーマと呼ばれるCSSのセットが用意されています。これを適用することで一貫したスタイルを実現できます。

テーマはこちらからダウンロードできます。jQuery UI - Configure your download

jQuery UIのオートコンプリート機能 - プログラマーな日々で作成したページにテーマを適用してみます。

普通にスタイルシートを読み込むだけです。

<link rel="stylesheet" type="text/css" href="Styles/jquery-ui-1.8.6.custom.css" />

適用前

f:id:JHashimoto:20101105130636p:image

適用後

f:id:JHashimoto:20101105144837p:image

Permalink | コメント(0) | トラックバック(1) | 14:50 jQuery UIのテーマを含むブックマーク jQuery UIのテーマのブックマークコメント

■[JavaScript][jQuery]ドロップダウンメニュー

ソースコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="imagetoolbar" content="false" />
</head>
<body>
	<div id="container">
		<ul class="dropdown" style="width: 200px; border: 1px solid #000000">
			<li class="dropdown_trigger"><a href="#">ナビゲーションメニュー</a>
				<ul>
					<li><a href="#">メニュー１</a></li>
					<li><a href="#">メニュー２</a></li>
					<li><a href="#">メニュー３</a></li>
					<li><a href="#">メニュー４</a></li>
					<li><a href="#">メニュー５</a></li>
				</ul>
			</li>
		</ul>
	</div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
</script>
<script type="text/javascript">
(function ($) {
	function initDropdown() {
		if (!$('ul.dropdown').length) {
			return
		}

		// ナビゲーションメニューのhoverでサブメニューの表示／非表示を切り替える
		$('ul.dropdown li.dropdown_trigger').hover(function () {
			$(this).find('ul').fadeIn(1);
		},
		function () {
			$(this).find('ul').hide();
		});
	}

	$(document).ready(function () {
		initDropdown();
	});
})(jQuery);
</script>
</html>

動作

表示前

f:id:JHashimoto:20101105141335p:image

ナビゲーションメニューをマウスオーバー

f:id:JHashimoto:20101105141334p:image

Permalink | コメント(0) | トラックバック(1) | 14:14 ドロップダウンメニューを含むブックマーク ドロップダウンメニューのブックマークコメント

■[JavaScript][jQuery]jQuery UIのオートコンプリート機能

ソースコード

「jquery-ui.js」をインクルードする必要があります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<label for="month">月選択</label>
<input id="month" type="text" name="month" />
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.js"></script>
<script type="text/javascript">
(function ($) {
	$(document).ready(function () {
		var months = [
			'January', 'February', 'March', 'April', 'May', 'June',
			'July', 'August', 'September', 'October', 'November', 'December'];

		$("#month").autocomplete({ source: months });
	});
})(jQuery);
</script>
</html>

動作

f:id:JHashimoto:20101105130636p:image

Permalink | コメント(0) | トラックバック(2) | 13:07 jQuery UIのオートコンプリート機能を含むブックマーク jQuery UIのオートコンプリート機能のブックマークコメント

■[JavaScript][jQuery]１つのチェックボックスに基づいてすべてのチェックボックスを切り替える

ソースコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<fieldset>
	<legend>Reasons to be happy</legend><a class="selectAll" href="#">Select All</a>
	<a class="deselectAll" href="#">Deselect All</a>
	<input name="reasons" id="iwokeup" type="checkbox" value="iwokeup" />
	<label for="iwokeup">I woke up</label>
	<input name="reasons" id="health" type="checkbox" value="health" />
	<label for="health">My health</label>
	<input name="reasons" id="family" type="checkbox" value="family" />
	<label for="family">My family</label>
	<input name="reasons" id="sunshine" type="checkbox" value="sunshine" />
	<label for="sunshine">The sun is shining</label>
</fieldset>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
<script type="text/javascript">
(function ($) {
	$(document).ready(function () {
		$('fieldset .selectAll').click(function (event) {
			// アンカー本来の動作を中止する
			event.preventDefault();
			// 兄弟要素のチェックボックスを全てチェックする
			$(this).siblings('input:checkbox').attr('checked', 'checked');
		});

		$('fieldset .deselectAll').click(function (event) {
			event.preventDefault();
			$(this).siblings('input:checkbox').removeAttr('checked');
		});
	});
})(jQuery);
</script>
</html>

すべてチェック

アンカークリック前

f:id:JHashimoto:20101105111953p:image

アンカークリック後

f:id:JHashimoto:20101105111952p:image

すべてチェック解除

アンカークリック前

f:id:JHashimoto:20101105112428p:image

アンカークリック後

f:id:JHashimoto:20101105112427p:image

Permalink | コメント(0) | トラックバック(1) | 11:28 １つのチェックボックスに基づいてすべてのチェックボックスを切り替えるを含むブックマーク １つのチェックボックスに基づいてすべてのチェックボックスを切り替えるのブックマークコメント

■[JavaScript][jQuery]必要なデータをイベントハンドラに提供させる

ソースコード


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<input id="first" type="button" value="first" />
<input id="last" type="button" value="last" />
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
<script type="text/javascript">
(function ($) {
	$(document).ready(function () {
		$('#first').bind('update', function (e) {
			e.firstName = this.value;
		});
		$('#last').bind('update', function (e) {
			e.lastName = this.value;
		});

		var e = $.Event('update');	// Eventオブジェクトはハンドラの第１引数と同じ
		$('#first, #last').trigger(e);	// イベントの実行
		alert(e.firstName);
		alert(e.lastName);
	});
})(jQuery);
</script>
</html>

実行結果

f:id:JHashimoto:20101105102700p:image

f:id:JHashimoto:20101105102659p:image

Permalink | コメント(0) | トラックバック(1) | 10:27 必要なデータをイベントハンドラに提供させるを含むブックマーク 必要なデータをイベントハンドラに提供させるのブックマークコメント

4534040784
Book 図解でわかる Ajaxのすべて
日本実業出版社 清野克行
購入: 1人 クリック: 48回
4896273052
Book Ajaxハッカーズ・プログラミング―基礎からproto...
メディアテック出版 佐久嶋ひろみ
購入: 3人 クリック: 61回
RSSリーダーに登録する
 RSS
Google Readerへ追加
Livedoorへ追加
Twitter
Twitterボタン
Twitterブログパーツ
Livedoorクリップ
この記事をクリップ！この記事をクリップ
クリップページをみる
プロフィール

JHashimoto

JHashimoto はてなダイアリープラス利用中

プログラマーです。CSharper。主にプログラミング、時々ライフハック。RSSを購読されたりフォローされたりすると喜びます。

カレンダー
<< 2010/11 >>
日 月 火 水 木 金 土
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
日記の検索

カテゴリー
最新タイトル
最近のコメント
最近のトラックバック
ページビュー
479324
カウンター
はてなブックマークカウンター
この日記のはてなブックマーク数
はてなスターカウンター
はてなスターカウンター
フィードメーター
フィードメーター - プログラマーな日々
Myはてなブックマーク
購読者数・ブックマーク数相関グラフ
購読者数推移グラフ
ブックマーク数推移グラフ