CSS + jQuery: 水平型メニュー #2
CSS + jQuery: 円形型のメニュー
24 JavaScript Best Practices for Beginners
jQuery: ツリー型メニュー実践サンプル
◆jQuery: ツリー型メニュー
$('ul#nav ul').hide();
$('ul#nav li:has(ul)').each(function(i) {
$(this).children().slideUp(400);
});
$('li.p1:has(ul)').click(function(event) {
if (this == event.target) {
current = this;
$('ul#nav li:has(ul)').each(function(i) {
if (this != current) { $(this).children().slideUp(400); }
});
$(this).children('ul:eq(0)').slideToggle(400);
}
});
jQuery + JavaScript 実践リファレンス (PDF)
jQuery + JavaScript 実践リファレンス − PDF
本書のサンプルＰＤＦを用意しましたのでご覧ください。◆jQueryのHello World ◆jQueryのattr, removeAttr API ◆jQueryのドック型メニュー ◆jQueryのドロップダウン型メニュー
静的なWebページをダイナミックに動くようにするにはスタイルシートとJavaScriptの知識がかかせません。 これまでスタイルシートはデザイナー、JavaScriptはプログラマーとすみ分けされていましたが、 jQueryの登場によりデザイナーがJavaScriptの機能を容易に利用できるようになりました。
jQueryは、米国のJone Resig氏が中心となって開発したJavaScriptのライブラリです。 わずか数行のコードを記述するだけでアニメーションなどの効果(エフェクト)を組み込むことができるといった特徴があります。
jQueryは2006年1月に最初のバージョンがリリースされて以来、定期的にバーションアップされて最新版はjQuery 1.3.2です。 jQuery 1.3.2では、CSSのセレクターエンジンに「Sizzle」を採用したことにより大幅に性能を向上させています。 jQuery 1.2.6と比較すると46%も高速化されています。また、Protoype 1.6.0.3、MooTools 1.2.1、Dojo 1.2.3などのライブラリよりも高速です。
jQueryには、拡張機能がプラグインとして豊富に提供されています。 たとえば、テキストボックスに日付と入力させるとき、カレンダーから日付を選択させるといったことがプラグインを使用すると簡単に組み込むことができます。
本書は、XHTMLとスタイルシートをすでに使いこなしているデザイナーとJavaScriptのプログラムを作成した経験のある方を対象にしています。 本書は2部構成になっています。
第1部では、プラグインを使用するために最低限の知識を習得していただくためにjQueryのセレクターを中心に理解していただきます。 これにより、テキストボックスにカレンダーのプラグインなどを組み込むための知識が習得できます。
第2部では、jQueryのプラグインを12のカテゴリーに分類して実践サンプルを解説しています。 これらのサンプルは、ツリー型のメニューから実行することができます。 サンプルプログラムは、Webサーバーを使用しないで直接実行することも可能です。 付録にApacheとIIS(Internet Information Services)のインストール手順を解説していますので、 ローカルサーバーにサンプルをインストールして実行することもできます。
また、サンプルプログラムに「jQueryセレクターテストツール」も同梱していますので、 このツールを使用してjQueryのセレクターなどを検証することができます。 jQueryを独学するのに役立つツールですのでぜひ活用してください。
jQuery: インフォスライド
jQuery実践サンプル集（広告枠を常時表示する）
このサンプルは、広告枠が画面上端に到達するまでは通常通り スクロールします。そして、広告枠が上端に到達した時点で 固定モードに切り替わります。
広告やサイトの重要なお知らせなどを掲載するときに利用すると 便利です。
jQuery UI: Dialogプラグインの実践サンプル集
◆jQuery UI Dialog(標準) ◆jQuery UI Dialog(モダルダイアログ) ◆jQuery UI Dialog(モダルメッセージ) ◆jQuery UI Dialog(モダル確認) ◆jQuery UI Dialog(モダルフォーム)
