jQuery UI ThemeRoller

ThemeRoller の概要

ThemeRoller は、jQuery UI 用のカスタムテーマを設計およびダウンロードするための直感的なインターフェースを提供する Web アプリケーションです。アクセスしてjQuery UI ThemeRollerテーマのカスタマイズを行うことができます。

jQuery UI ThemeRoller は、ボストンのFilament Group, Incによって設計・開発されました。

ThemeRoller インターフェース

ThemeRoller のインターフェースは複数のパネルに分かれており、各パネルは、グローバルフォントと角丸半径の設定、ウィジェットコンテナのスタイル、クリック可能な要素のインタラクティブ状態、オーバーレイとシャドウの各種スタイルをそれぞれ担当します。これらのパネルでは、フォントサイズ、色、太さ、背景色とテクスチャ、枠線の色、テキストの色、アイコンの色、角丸半径など、さまざまな CSS プロパティを設定できます。

テーマギャラリー（Gallery）：事前デザイン済みテーマ

ThemeRoller のテーマはパーマリンク URL で表示でき、選択可能な事前デザイン済みテーマがいくつか含まれています。テーマギャラリー（Gallery）は、アプリケーションインターフェースの上部にあるタブバーからアクセスできます。テーマギャラリー（Gallery）では、テーマのプレビューやダウンロードができ、テーマを選択してから「Roll Your Own」タブに切り替えて調整することもできます。

テーマのダウンロード

テーマの設計が完了したら、プロジェクトで使用するためにテーマをダウンロードできます。ThemeRoller の上部には「Download theme（テーマのダウンロード）」ボタンがあり、すべてのテーマ関連ファイルを含む zip 圧縮ファイルを生成できます。ダウンロードファイル内の画像は、指定した仕様に従って生成され、高品質の PNG ファイルとして保存されます。

テーマには画像と CSS が含まれ、jQuery UI CSS フレームワークのカスタムバージョンを構成します。すべてのプラグインの画像と CSS が含まれます。

プロジェクトにダウンロードしたテーマをインストールする

テーマをダウンロードしたら、解凍後、次の名前のものが表示されます：themesという名前のフォルダーです。このフォルダーには、テーマに必要な CSS と画像が含まれています。テーマフォルダーをプロジェクトにコピーし、ページ内でリンクしてください：themes/all.cssファイル。

カスタムの「ThemeRoller-Ready」コンポーネントの作成

ThemeRoller は、独自の ThemeRoller-ready な jQuery コンポーネントを開発するための、jQuery UI CSS フレームワークのカスタムバージョンを生成します。このフレームワークで生成されるクラスは、状態、アイコン、さまざまなヘルパークラスなど、一般的なユーザーインターフェースのデザイン状況を提供するように設計されています。

jQuery UI CSS フレームワークの開発情報の詳細については、以下を参照してください：テーマ化 API ドキュメント。