jQuery UIおよびThemeRoller

• かもしれません 6, 2024

WebサイトまたはWebアプリケーションのユーザーインターフェイスを簡単かつ迅速に設計し、jQueryも含める場合は、jQuery UIを確認してください。そこで、これらの機能を新しいプロジェクトに簡単に追加できるターンキーCSSとjQuery関数のコンボパッケージがあります。

サイトを見てみましょう。 [デモとドキュメント]リンクの下に、ドラッグアンドドロップ、タブ、トランジションなどのjQueryインタラクティブプラグインのリストがあります。各プラグインには、テスト用のデモ、ドキュメント、およびカットアンドペーストのサンプルコードがあります。

ターンキーファイルを取得する場合は、jQuery ThemeRollerの[テーマ]リンクをクリックします。デフォルトのcssは、ベアボーンの白とグレーのテーマです。ダウンロードボタンをクリックしてそのまま使用できますが、開始するためのカラフルなテーマのギャラリーもあります。ギャラリー領域には、いくつかのテーマのサムネイルがあります。好きなものをクリックしてください。 「Roll Your Own」タブをクリックしてから「Download Theme」ボタンをクリックすると、そのテーマをそのままダウンロードできます。しかし、ThemeRollerエンジンを使用してテーマをツイートし始めると、楽しみが始まります。カスタマイズできるオプションは11個あります。ほとんどのオプションでは、背景のテクスチャと色、境界線の色、テキストとアイコンの色を変更できます。

テーマをツイートするためのいくつかのオプションがあります。

• フォント設定：フォントファミリ、太さ、サイズを変更できます。
  
  
• コーナー半径：コーナー半径を変更できます。各テーマにはデフォルトの角丸タブスタイルがありますが、ここでは角のサイズを変更したり、四角タブの場合はゼロに設定したりできます。 （タブはCSS3上に構築されていますが、現時点ではIEでサポートされていません。）
  
  
• ヘッダー/ツールバー：タブの後ろの領域とカレンダープラグインなどのヘッダー領域の色の値を設定できます。
  
  
• コンテンツ：ここでは、メインコンテンツ領域の色を設定できます。ボーダーまたはボーダーなしの選択に応じて、非常に異なるデザインを取得できます。
  
  
• クリック可能なデフォルト状態：これは、タブとボタンのデフォルト（非アクティブ）の外観を制御します。
  
  
• クリック可能なホバー状態：これらのコントロールは、ホバー状態のタブとボタンの外観用です。
  
  
• クリック可能なアクティブ状態：アクティブなページのタブとボタンの外観を制御します。
  
  
• ハイライト：ハイライト領域の背景、境界線、テキスト、アイコンの色。
  
  
• エラー：エラーメッセージの背景、境界線、テキスト、およびアイコンの色。
  
  
• オーバーレイのモーダルスクリーン：背景色とテクスチャを制御します。
  
  
• ドロップシャドウ：ドロップシャドウエフェクトのシャドウの不透明度、厚さ、オフセット、コーナーを制御します。
  
  

jquery-ui-x.x.xx.custom.zipをダウンロードしてパッケージをupzipすると、3つのフォルダー（css、development-bundle、およびjs）とindex.htmlファイルが表示されます。 index.htmlファイルは、テーマでスタイル設定されたプラグインのデモです。メインディレクトリにcssフォルダーとjsフォルダーを配置し、index.htmlファイルのコードを、プラグインを表示する場所のサイトのコードにコピーして貼り付けます。

//jqueryui.com
//jqueryui.com/demos/
//jqueryui.com/themeroller/