jQueryのUIのデザインテーマ
ファイル構造
テーマは、使用の容易さを高めるための具体的な方法です。 次のように一般的に、ファイルのディレクトリ構造は次のとおりです。
-
themename/-あなたのトピックでは、完全にフォルダという名前の別のトピック名に含まれている必要があります。 -
themename/themename.css-これは、基本的なCSSファイルです。 かかわらず、プラグインするのは、ファイルがテーマを使用して、各ページで参照する必要があります。 ファイルは、軽量でなければならない、要点のみを含んでいます。 -
themename/themename.pluginname.css-あなたがサポートしている各ウィジェットは、CSSファイルが必要です。 プラグインの名前は、直接ファイル名に含まれるべきです。 あなたはプラグインのタブ（タブ）のテーマ設定場合たとえば、があります。themename.tabs.js。 -
themename/img.png-あなたのテーマは、画像を含めることができます。 彼らは、特定の命名規則はありません、あなたの好みに応じて名前を付けることができます。
テーマファイルの構造は、インスタンスを完了する方法については、訪問のjQuery UIの基本的なテーマを 。
カスタムスタイル
テーマのスタイルを書くことは非常に簡単です、それが原因柔軟性のテーマです。
すべてのトピックは、基本的なCSSクラスを持っている必要があります。 メイントピッククラスは、ユーザーが無効になって有効にすることができます。 あなたのルートクラスの形式は次のようになり.ui-themename 。 次のようにHTMLファイルにそれを使用します。
<html>
<head>
<title>My Site</title>
<link rel="stylesheet" href="themename/themename.css" />
<link rel="stylesheet" href="othertheme/othertheme.css" />
<link rel="stylesheet" href="othertheme/othertheme.dialog.css" />
</head>
<body class="ui-themename">
<div class="ui-othertheme">
<div class="ui-dialog">This is a modal dialog.</div>
</div>
</body>
</html>
上記の例では、いくつかの重要なことが起こりました：
- また、文書に2つのテーマをロードします。
- すべてのマシンページ全体の内容は、THEMENAMEスタイルのテーマに応じて行われます。
- しかし、UI-otherthemeのクラスで
<div>と（モーダルダイアログボックスを含む）の各要素otherthemeスタイルのテーマに合わせて行われています。
私たちが開いた場合themename.css表示用のファイルを、私たちは以下のコードを参照することができます：
body.ui-themename { background:#111; color:snow; }
.ui-themename a, a.ui-themename { color:#68D; outline:none; }
.ui-themename a:visited, a.ui-themename:visited { color:#D66; }
.ui-themename a:hover, a.ui-themename:hover { color:#FFF; }
、注意してくださいthemename.cssファイルを定義するためにここにない場合にのみ、ユニバーサルグローバルスタイル情報、特定のウィジェットのスタイル情報を含んでいます。 ここではすべてのトピックのスタイルが適用されます。 複数のファイルを占有しますトピックについて心配しないでください - これらは、作成およびダウンロードするプロセスを簡略化されます。