設計あなたのページjQueryのUIをテーマ周辺

jQueryのUIを 1.5のリリースは、Themeroller、これは連れて来らをカスタマイズするとjQuery"ウィジェットのセットをダウンロードする"Webページで使用するための簡単な方法は速い。

単に1つ前のテーマ、または調整して自分の好みに合わせて設定を構築中から選択し、テーマをダウンロードします。 あなたのダウンロードすべての作業をすべて、これらのウィジェットのために必要な、1つのページ上のすべてのそれらとのデモファイルにはファイルが含まれます。

実際には、これらのビルド済みのテーマは、新しい設計のための出発点として、お役に立てることができます。 の基本的なウェブサイトのタブとアコーディオンを使用してテーマをダウンロードする操作しましょう。

クリーニングハウス

我々は、サイトのメインコンテンツ領域のタブのウィジェットを使用すると、サイドバーのアコーディオン予定です。 幸先の良い第一歩を組織し、次に、HTMLやCSSファイルから余分なコードの除去を開始あなたのフォルダを取得することです。

私は再スタートしたとのstyle.cssには、CSSファイルをindex.htmlへdemo.htmlファイルのネーミング。

それから私は何もタブとアコーディオン以外にしなければならなかったのCSSファイルからのすべてのCSSは削除されます。 ある要素のトンの場合は、グローバルリセットを使用し、実際にそれを必要としないリセットなどのデフォルトのCSSファイル内の余分な粗雑なつくりのがたくさんある。 で清潔度の家がここに。

次に、HTMLファイルには、その基本的な構造やタブやアコーディオンの一部されていないすべてのコードを削除しても同じことです。 ここに私のページのように洗浄後に見えるものです：

構造

タブは、サイトのメインコンテンツ領域として使用するように良い意味を確認します。 各タブの本質的には、サイトの別の領域ができます。 最初に、すべてのdivにページのIDとは、サイト全体をラップすることができますラップので、センターは、一定の幅を設定することができます。 それ以来、両方のタブやアコーディオン、すでに部の、我々のCSSをターゲットすることができますラッピングでは、される静的な幅を設定し、どちらかの側に浮かんでいる。 これは、CSSをどのように見えるかもしれないです：

#page-wrap { width: 900px; margin: 0 auto; } #accordion { width: 280px; float: right; } #tabs { width: 600px; float: left; } 

現在のタブのメインコンテンツを見てとアコーディオン以上にしているサイドバーのようなものです。 各タブには、サイトの別のセクションのように、だけのスイッチングのページがそれを行うには全く、ページの読み込みを必要とする非常にクールな動的な方法で機能することができます！

ここに私のページがどのように見えるされた後にリストラのビット：

コンテンツへの肉付け

のあるうちは、デフォルトのコンテンツを取得しようと独自のものでプラグインを起動します。 まあ、これはまだデモので、しかし、それはLoremイプサムスタッフのほとんど...残しておきます後、私はいくつかのグラフィックを投げるといくつかのより現実的なコンテンツのプラグインをすぐに見て：

ファイナル

これは、サイト全体を一緒にスローするように、約20分かかりました。 これは任意の手段では傑作だが、それには良いスタートをきれいさんのサイト。 行くを見るにはどのように迅速にWebページを構築し始めることができますも、UIのthemeroller jQueryとを介してクールな動的な機能を持つ。

デモの閲覧

ダウンロードファイル