jQuery UI テーマ


すべての jQuery UI プラグインを使用すると、開発者は UI ウィジェットを Web サイトやアプリケーションのルック アンド フィールにシームレスに統合できます。各プラグインは CSS を通じてスタイルを定義し、標準の jQuery UI CSS フレームワーク スタイルと特定のプラグイン スタイルという 2 つのレイヤーのスタイル情報が含まれています。

jQuery UI CSS フレームワークは、タイトル、コンテンツ、クリック可能領域など、ウィジェット内の要素の役割を示すセマンティック表現クラスを提供します。これらはすべてのウィジェットで一貫しており、クリック可能なタブ、アコーディオン、またはボタンには同じ ui-state-default クラスがあり、クリック可能であることを示すために使用されます。ユーザーがこれらの要素の上にマウスを置くと、このクラスは ui-state-hover になり、これらの要素が選択されると ui-state-active になります。これらのクラスの一貫性により、同様の役割またはインタラクション状態を持つ要素がすべてのウィジェットにわたって一貫しているように見えます。 ui-state-default class，用来表明它们是可点击的。当用户鼠标悬浮在这些元素上面时，这个 class 就变成 ui-state-hover，当选中这些元素时则变成 ui-state-active。这些 class 的一致性使得所有部件中具有相似角色或交互状态的元素在外观表现上一致。

CSS 框架样式封装在一个单独的文件中，名为 ui.theme.css。这个文件时通过 ThemeRoller 应用程序来修改的。框架样式只包含影响外观和感观的属性，只要是颜色、背景图像、图标等。所以这些是 "安全的" 样式，不会影响到插件的功能。这种分隔意味着开发人员可以通过在 theme.css 文件中修改颜色和图像来创建一个自定义的外观和感观。由于未来的插件或者 bug 修复将是可用的，这些不通过修改即可与主题一起使用。

由于框架样式只覆盖了外观和感观，所以还需要包含具体的插件样式表，这些样式表包括了所有额外的让小部件具有功能性的结构样式规则，比如尺寸、内边距、外边距、定位、浮动。每个插件的样式表位于 themes/base 文件夹内，且配合插件进行命名，比如 "jquery.ui.accordion.css"。这些样式必须认真编辑，因为它们与脚本一起提供了框架样式的覆盖。

我们鼓励所有的开发人员创建 jQuery 插件，jQuery UI CSS 框架使得最终用户更容易定制主题和使用插件。

主题化

下面列出了三种主题化 jQuery UI 插件的一般方法：

  • 下载 ThemeRoller 主题：最早的创建主题的方式是使用 ThemeRoller 来生成和下载一个主题。这个应用程序将创建一个新的 ui.theme.css 文件和一个包含了所有必需的背景图像及图标精灵的 images

    CSS フレームワーク スタイルは、ui.theme.css という名前の別のファイルにカプセル化されます。このファイルは、ThemeRoller アプリケーションを通じて変更されます。フレーム スタイルには、色、背景画像、アイコンなどの外観に影響を与えるプロパティのみが含まれます。したがって、これらは「安全な」スタイルであり、プラグインの機能には影響しません。この分離は、開発者が theme.css ファイル内の色と画像を変更することでカスタムのルック アンド フィールを作成できることを意味します。将来のプラグインやバグ修正が利用可能になるため、これらは変更せずにテーマで動作します。 🎜🎜フレーム スタイルは外観と操作性のみをカバーするため、これらのスタイル シートには、サイズ、パディング、距離、位置など、ウィジェットを機能させるための追加の構造スタイル ルールがすべて含まれる必要があります。フローティング。各プラグインのスタイル シートは themes/base フォルダーにあり、「jquery.ui.accordion.css」など、プラグインに応じた名前が付けられます。これらのスタイルはスクリプトとともにフレーム スタイルをオーバーライドするため、慎重に編集する必要があります。 🎜🎜 jQuery UI CSS フレームワークを使用すると、エンド ユーザーがテーマをカスタマイズしたりプラグインを使用したりすることが容易になります。 🎜

    テーマ

    🎜 jQuery UI プラグインのテーマを設定する 3 つの一般的な方法を以下に示します。 🎜
    • 🎜ThemeRoller テーマをダウンロード:テーマを作成する最も早い方法は、ThemeRoller を使用してテーマを生成し、ダウンロードすることです。このアプリケーションは、新しい ui.theme.css ファイルと、必要な背景画像とアイコン スプライトをすべて含む images フォルダーを作成します。このアプローチはテーマを作成および管理する最も古い方法ですが、カスタマイズが ThemeRoller で使用できるオプションに限定されます。 🎜

    • CSS ファイルを変更する: ルック アンド フィールをさらに制御するには、デフォルトのテーマ (Smoothness) で開始するか、ThemeRoller によって生成されたテーマで開始してから、ui.theme.css 文件，或者任意一个独立插件的样式表。例如，您可以很容易地调整所有按钮的角半径为不同于其他 UI 组件的值，或者使用自定义设置为图标精灵改变路径。通过一点点的样式范围，您甚至可以在一个 UI 中同时使用多个主题。为了易于维护，建议只更改 ui.theme.css ファイルと画像を調整するかを選択できます。

    • カスタム CSS を書き直す: ルック アンド フィールを最大限に制御するには、フレームワーク クラスや特定のプラグイン スタイルシートを使用せずに、最初から開始して各プラグインの CSS を記述することができます。このアプローチは、CSS を変更したり、高度にカスタマイズされたマークアップを使用したりしても、目的のルック アンド フィールを実現できない場合に使用できます。このアプローチには、CSS に関する深い専門知識と、将来のプラグインの手動更新が必要です。 O Themeroller、JQuery UI CSS フレームワークを使用し、カスタム テーマをデザインします

    jquery ui themeroller

    • jquery UI CSS フレームワーク API

    • デザイン テーマ

→