Latest web development tutorials
×

jQuery UI コース

jQuery UI コース jQuery UI 簡単な紹介 jQuery UI ダウンロード jQuery UI 使用 jQuery UI カスタマイズ jQuery UI ワークス

jQuery UI テーマ

jQuery UI テーマ jQuery UI ThemeRoller jQuery UI CSS フレーム API jQuery UI デザインテーマ

jQuery UI コンポーネントライブラリ

jQuery UI コンポーネントライブラリ jQuery UI 拡張ウィジェット jQuery UI メソッド呼び出しウィジェット jQuery UI なぜウィジェットライブラリを使用 jQuery UI ウィジェットライブラリを使用する方法

jQuery UI リファレンスマニュアル

jQuery UI API ファイル API カテゴリ - 特別に良い効果 API カテゴリ - エフェクトコア API カテゴリ - 交互に API カテゴリ - メソッドのオーバーロード API カテゴリ - ウェイ API カテゴリ - セレクタ API カテゴリ - テーマ API カテゴリ - UI コア API カテゴリ - ユーティリティ API カテゴリ - ウィジェット

jQuery UI 例

jQuery UI 例 ドラッグ 場所 スケーリング 選択します シーケンス 折りたたみパネル オートコンプリート プッシュボタン 日付ピッカー ダイアログ メニュー プログレスバー スライダー 回転子 タブ ツールチップボックス 特別に良い効果 ディスプレイ 隠します 切り替え .addClass() .removeClass() .toggleClass() .switchClass() カラーアニメーション 検索します コンポーネントライブラリ

jQueryのUIのテーマ

すべてのjQuery UIプラグインは、開発者がシームレスに自分のサイトやアプリケーションのルックアンドフィールにUIウィジェットを統合することができます。 各ウィジェットは、CSSスタイルによって定義され、2スタイル情報を含んでいる:標準のjQuery UI CSSフレームワークスタイルと特定のプラグインのスタイルを。

jQueryのUI CSSフレームワークは、タイトル、内容、またはクリック可能な領域として小さな構成要素の役割を示すために、クラスの意味表現を提供します。 これらはすべて、小さな部品で一貫性があり、クリック可能なタブ(タブ)、アコーディオン(アコーディオン)またはボタン(ボタン)同じ持っているui-state-default 、彼らがクリック可能であることを示すために、クラスA。 ユーザーはこれらの要素の一番上に置いたときにクラスになり、 ui-state-hover 、その後、これらの要素はに選出されたとなるui-state-active 。 一貫性のクラスは、相互作用状態で同様の役割を有する要素またはコンポーネントのすべての外観一貫したパフォーマンスを行います。

CSSスタイルのフレームは、別のファイルにカプセル化された名前が付けられui.theme.css 。 介してこのファイルThemeRollerの変更をアプリケーションに許可します。 フレームスタイルは、唯一のように色、背景画像、アイコンとする限り、プロパティの外観と感触に影響を与える含まれています。 したがって、これらは、「安全」なスタイルであり、それはプラグイン機能には影響しません。 この分離は、開発者がで使用できることを意味しtheme.cssカスタム外観を作成し、感じるように色やイメージファイルを変更します。 プラグインやバグ修正の将来は利用できるようになり、これらは、テーマによって変更することなく使用することができますので。

フレームスタイルカバーのみを見て、感じているので、それは特定のプラグインのスタイルシートを含める必要があるので、これらのスタイルシートは、すべての余分なウィジェットがこのような大きさ、パディング、マージンなどの機能構造のスタイル規則を、許可含み、ポジショニング、フロート。 各ウィジェットのスタイルシートthemes/base 、およびプラグインの名前、例えば「jquery.ui.accordion.css」のフォルダ。 彼らは一緒にスタイルをカバーするフレームワークを提供するため、これらのパターンは慎重にスクリプトを編集する必要があります。

私たちは、jQueryのUI CSSフレームワークは、それが簡単にエンドユーザーがカスタムテーマやプラグインを使用できるようになり、プラグインのjQueryを作成するために、すべての開発者を奨励します。

テーマ

ここでは一般的な手順に関連のjQuery UIウィジェットの3のとおりです。

  • ThemeRollerのトピックをダウンロード:最初に使用することでテーマを作成ThemeRollerのを生成し、テーマをダウンロードします。 このアプリケーションは、新しい作成しますui.theme.cssファイルを、すべての必要な背景画像とアイコンスプライト含まれているimagesフォルダを。 この方法は、道のテーマを作成し、維持するために最初に、それは限られたThemeRollerのカスタムを提供するオプションです。
  • コントロールのルックアンドフィールをさらにするためには、デフォルトのテーマ(平滑)から始まりますから、またはThemeRollerのスタートによって生成された1トピックから選択し、調整することができます:CSSファイルを変更 ui.theme.cssファイル、個別のプラグインまたはいずれかをスタイルシート。 たとえば、あなたは簡単にすべてのボタンの半径の角度が他のUIコンポーネントの値とは異なる調整、またはパス・ウィザードを変更するには、カスタムアイコンを使用することができます。 スタイルは、あなたもUIで複数のテーマを使用することができ、少しの範囲です。 メンテナンスを容易にするために、提案された変更のみui.theme.cssファイルや画像を。
  • 再書き込みカスタムCSS:外観を制御し、感じる最大化するには、プラグインフレームワーククラスの使用または特定のスタイルシートなしで、各ウィジェットとCSSで再度書き込みを開始することができます。 あなたが見てみたいと感触は、CSSを変更したり、高度にカスタマイズされたタグを使用することによって達成することができる場合は、このメソッドを使用することができます。 このアプローチは、CSSの用語で深い専門知識を必要とし、将来のプラグインの手動更新が必要です。

ThemeRollerの、jQueryのUI CSSフレームワークだけでなく、デザインのカスタムテーマを使用します