このサンプルは、スタイルシートを利用してイメージギャラリーを表示します。サンプルの右下にイメージのサムネイルが横３で表示されます。サムネイルはスクロールさせることができますので個数が制約やく任意のイメージが表示できます。マウスをサムネイル上に移動すると右上に中間サイズで拡大表示します。このときサムネイルのイメージは「click」に切り替わりますので「クリック」すると左側に拡大表示されます。つまり、このサンプルは２段階方式でサムネイルが拡大します。
メニュー：日記::JavaScript + jQuery：目次
CSS: ドロップライン／ドロップダウン／ハイブリッドメニュー
CSS: ドロップライン／ドロップダウン／ハイブリッドメニュー
このサンプルは、イメージとスタイルシートを利用してドロップライン／ドロップダウン型のメニューを表示します。ドロップラインメニューは左右に分離して表示します。トップメニューの[Selectors]にマウスを移動すると下位メニューがドロップラインに表示されます。ドロップラインメニューから[Base]にマウスを移動すると下位メニューがドロップダウンに表示されます。
jQuery: シンプルショッピングカート v2
jQuery: シンプルショッピングカート v2
このサンプルは、jQuery UI 1.7.2の各種apiを利用してシンプルショッピングカートを実装しています。２段組の棚に商品が表示されますので[ADD TO CART]ボタンをクリックしてカートに入れます。このとき商品をアニメーション化してカートに入れます。カート右下の[Empty Cart]をクリックするとカートに入れた商品を取り出します。このときも商品をアニメーション化して取り出します。このサンプルはフレーム枠内だと使いづらいので「新規ウィンドウ」に表示してご覧ください。
CSS + jQuery: 水平型メニュー #3
このサンプルは、CSSとイメージを利用して楕円型の水平メニューを表示します。マウスをメニューに移動するとメニューがハイライトします。メニューをクリックするとハイライトが固定されます。
CSS + jQuery: 水平型メニュー #2
このサンプルは、水平型のタブメニューを表示します。マウスをタブに移動するとタブがハイライトします。タブをクリックするとハイライトが固定されます。
CSS + jQuery: 円形型のメニュー
24 JavaScript Best Practices for Beginners
Jeffrey Way氏の初心者のためのJavaScriptのチップ集です。
なかなかいいですね！
jQuery: ツリー型メニュー実践サンプル
jQueryのツリー型メニューのサンプルです。このサンプルは、jQueryの各種APIを利用してツリー型のメニューを表示します。黄色のメニューをクリックすると下位メニューが表示されます。
◆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のapiを利用してフォトを説明付きでスライドするサンプルを紹介します。フォトをスライドするには、左右の矢印ボタンをクリックします。下の番号をクリックして移動することもできます。
