はじめに
jQuery toolsとは?
jQuery Toolsとは、最近のウェブサイトで求められている、
高機能なユーザエクスペリエンスやビジュアルエフェクトを簡単に実装することができるjQueryライブラリです。
サイトに実装したい機能に合わせてかなり自由にイベントのタイミング、生成されるクラスのクラス名の変更、ローカライズなどのカスタマイズなどが出来ます。
また、サイトの表示速度への影響にも気が使われており、そもそもの容量も数kbと軽量なのですが、その中から必要なものだけを選択してダウンロードや結合が出来たり、CDNなどのサービスの利用が出来るなど、
ユーザーの利用目的に応じて柔軟に使い方を調整できます。
※利用するためには、人気のjavascriptライブラリ、jQueryが必要になります。
このサイトの内容について
半分自分の勉強用として作成しています。
基本的にテストをしながらリファレンスを記述していますが、
なにぶん個人でやっているため、一部間違いや誤訳などがあるかもしれませんので、ご了承ください。
今後、時間があるときに徐々にサイトの品質を上げられるようにしていく予定です。
jQuery tools - デモ一覧
- タブに関するデモ
- ・ 基本的なタブ ・ フェードイン/アウトするタブ ・ スライドによるアコーディオン ・ Ajaxによりコンテンツを取得 ・ 複数同時に表示するタブ ・ 複数同時に表示するタブ(複数エフェクト) ・ 効果をカスタマイズしたタブ ・ APIによるタブ操作 ・ スライドショー付きタブ(履歴と同時設定) ・ [公式/英語] - 最小セットアップ ・ [公式/英語] - タブに名前をつける ・ [公式/英語] - 4種類のCSSによる異なるスキンをもつタブ ・ [公式/英語] - マウスオーバーでスイッチするタブ ・ [公式/英語] - タブによるウィザード ・ [公式/英語] - タブによるアコーディオン ・ [公式/英語] - アコーディオンエフェクトをカスタマイズ ・ [公式/英語] - タブによる水平方向のアコーディオン ・ [公式/英語] - 複数タブによるアコーディオン ・ [公式/英語] - ブラウザの戻るボタンをサポートしたタブ ・ [公式/英語] - Ajaxによりコンテンツを読み込むタブ ・ [公式/英語] - Ajaxによりコンテンツを読み込むタブ。履歴付 ・ [公式/英語] - タブによるスライドショー
- ツールチップに関するデモ
- ・ 基本的なツールチップ ・ フェードインするツールチップ(遅延処理あり) ・ HTML要素をツールチップとして表示 ・ IDで指定した要素をツールチップとして表示 ・ エフェクトをカスタマイズしたツールチップ ・ フォームに対応したツールチップ ・ スライドエフェクトのツールチップ ・ ポジションがダイナミックに変化するツールチップ ・ [公式/英語] - ツールチップの基本 ・ [公式/英語] - HTMLをツールチップに使う ・ [公式/英語] - デフォルトのブラウザツールチップに似せる ・ [公式/英語] - フォームフィールドで使うツールチップ ・ [公式/英語] - テーブルで使うツールチップ ・ [公式/英語] - ツールチップエフェクトをカスタマイズ ・ [公式/英語] - ツールチップのポジションを動的に変化
- スクロール機能に関するデモ
- ・ 最小セットアップ ・ 垂直方向のスクロール ・ 簡易画像ギャラリー ・ 自動再生スクロールスライダー ・ スクロールスライダーへナビ機能を追加 ・ スクロールスライダーへナビ機能を追加(マニュアル) ・ [公式/英語] - 最小セットアップ ・ [公式/英語] - 垂直方向のスクロール ・ [公式/英語] - 簡易画像ギャラリー ・ [公式/英語] - 1ページ内に多重に表示 ・ [公式/英語] - ウィザード形式のフォーム ・ [公式/英語] - スクロール+ナビゲーションプラグイン ・ [公式/英語] - ブラウザの戻るボタンに対応したスクロールシステム ・ [公式/英語] - ホームページセットアップ ・ [公式/英語] - スクロールナビシステム例 ・ [公式/英語] - スクロールナビシステムにアイテムを追加 ・ [公式/英語] - スクロールナビシステムのアニメーションを編集
- オーバーレイに関するデモ
- ・ 最小セットアップ ・ 閉じるボタンのカスタマイズ ・ オーバーレイでマスクをかけた場合 ・ ページ読み込み直後にオーバーレイ ・ オーバーレイのエフェクトをカスタマイズ ・ オーバーレイを複数同時に表示 ・ オーバーレイにアップルエフェクトプラグイン ・ [公式/英語] - オーバーレイの最小セットアップ ・ [公式/英語] - オーバーレイのアップルエフェクト ・ [公式/英語] - ダイアログ ・ [公式/英語] - ページ読み込み直後にオーバーレイ ・ [公式/英語] - 複数のオーバーレイに異なるスタイル ・ [公式/英語] - 外部コンテンツをオーバーレイに読み込み ・ [公式/英語] - 複数のオーバーレイを同時に表示 ・ [公式/英語] - オーバーレイエフェクトをカスタマイズ
- バリデータに関するデモ
- ・ 最小セットアップ ・ 日本語化したバリデータ ・ オリジナルのバリデート項目を追加 ・ イベントフィールド単位でバリデート ・ バリデータのフルオプション ・ [公式/英語] - バリデーターの最小セットアップ ・ [公式/英語] - input要素のtype属性をカスタマイズ ・ [公式/英語] - サーバーとクライアントサイドでの連携 ・ [公式/英語] - バリデータのイベントによるアクション ・ [公式/英語] - バリデータのローカライズ
- レンジ入力に関するデモ
- ・ 基本的なレンジ入力 ・ レンジ入力のクラス名を変更 ・ レンジ入力のプログレスバーを有効に ・ レンジ入力のステップ単位を編集 ・ レンジ入力を垂直に配置 ・ レンジ入力のAPI操作 ・ div要素のスクロールバーをカスタマイズ ・ 複数のスクロールバーを同期 ・ [公式/英語] - レンジ入力の最小セットアップ ・ [公式/英語] - 複数の垂直レンジ入力 ・ [公式/英語] - 複数のレンジ入力 ・ [公式/英語] - divなどのスクロールバーをカスタマイズ
- 日付入力に関するデモ
- ・ 日付入力の最小セットアップ ・ 日付入力のローカライズ(日本語化) ・ 日付入力のフルオプション例 ・ [公式/英語] - 日付入力の最小セットアップ ・ [公式/英語] - 大きなスキンの日付入力 ・ [公式/英語] - 日付入力の挙動をカスタマイズ ・ [公式/英語] - データにそのまま付加情報を追加する ・ [公式/英語] - 常に見えているカレンダー ・ [公式/英語] - 日付入力のローカライズ
- エクスポーズ処理に関するデモ
- ・ 最小セットアップ ・ マスクの背景に任意の画像を指定 ・ マスク処理のコールバック関数テスト ・ [公式/英語] - 最小セットアップEXPOSE処理(マスクから除外) ・ [公式/英語] - マスク処理部にスタイルを当てる ・ [公式/英語] - フォームで使うEXPOSE処理 ・ [公式/英語] - ビデオで使うEXPOSE処理
- FLASH埋め込みに関するデモ
- ・ 基本的なFLASH動作の埋め込み ・ FLASH動作の埋め込みオプション ・ [公式/英語] - 基本的なFLASHの埋め込み ・ [公式/英語] - jQueryとFLASH埋め込み ・ [公式/英語] - マウスクリックでFLASHを読み込み開始 ・ [公式/英語] - HTMLをFLASHの上に重ねる ・ [公式/英語] - 古いバーションのFLASHプレイヤーをコントロール
- 履歴操作に関するデモ
- ・ 基本的なヒストリー(履歴)操作 ・ ヒストリーとタブの連動
- マウスホイール操作に関するデモ
- ・ 基本的なマウスホイール連動