TABS - jQuery TOOLS

[ タブのネーミング ] [ メニュー ] [ マウスオーバを使用したタブの切り替え]

CSSを使った4種類のスキン

このページは、いろいろなタブのスキン設定方法を示しています。詳細な背景情報については、 jQuery Tools に適用されるグラフィックデザインやプレゼンテーションについて読むことをお勧めします。

ほとんどがCSSベースのスキン

ここでは、選択したタブに背景画像を1つだけ使用し、ペインの背景へ半透明のグラデーション設定をしています。その他は全て単純な、CSSのディメンジョン、ボーダー、パディング及び色の設定です。

Seagram Building

The Seagram Building is a skyscraper in New York City, located at 375 Park Avenue, between 52nd Street and 53rd Street in Midtown Manhattan. It was designed by the German architect Ludwig Mies van der Rohe, in collaboration with the American Philip Johnson.

It is 515 feet tall with 38 stories. Severud Associates were the structural engineering consultants. It stands as one of the finest examples of the functionalist aesthetic and a masterpiece of corporate modernism. It was designed as the headquarters for the Canadian distillers Joseph E. Seagram's & Sons, thanks to the foresight of Phyllis Lambert, the daughter of Samuel Bronfman, Seagram's CEO.

Barcelona Pavilion

The Barcelona Pavilion, designed by Ludwig Mies van der Rohe, was the German Pavilion for the 1929 International Exposition in Barcelona, Spain. This building was used for the official opening of the German section of the exhibition.

Mies was offered the commission of this building in 1928 after his successful administration of the 1927 Werkbund exhibition in Stuttgart. The German Reich entrusted Mies with the artistic management and erection of not only the Barcelona Pavilion, but for the buildings for all the German sections at the 1929 Universal Exhibition.

Neue Nationalgalerie

Neue Nationalgalerie at the Kulturforum is a museum for classical modern art in Berlin, with main focus on early the 20th century. It is part of the German National Gallery. The museum building and its sculpture garden were designed by Ludwig Mies van der Rohe and opened in 1968.

The collection features a number of unique highlights of modern 20th century art. Particularly well represented are Cubism, Expressionism, the Bauhaus and Surrealism. The collection owns masterpieces of artists like Pablo Picasso, Ernst Ludwig Kirchner, Joan Miró, Wassily Kandinsky and Barnett Newman.

スタンドアロン・デモ

上記のタブは、次の設定で遂行できる、クロスフェード効果を使用しています:


$("#tab_nav ul").tabs("#panes > div", {effect: 'fade', fadeOutSpeed: 400});

クロスフェードが可能になるように、個々のペインは絶対配置にする必要があります。

画像を使用しないタブ・スキン

これらのタブは、画像のないスキンを適用しています。背景色とボーダだけで実現しています。タブのタイトルは任意で、幅は適宜調整されます:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, leo sit amet auctor fermentum, risus lorem posuere tortor, in accumsan purus magna imperdiet sem.

Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus nibh metus, faucibus quis, semper ut, dignissim id, diam.

Mauris ultricies. Nam feugiat egestas nulla. Donec augue dui, molestie sed, tristique sit amet, blandit eu, turpis. Mauris hendrerit, nisi et sodales tempor, orci tellus laoreet elit, sed molestie dui quam vitae dui.

Pellentesque nisl. Ut adipiscing vehicula risus. Nam eget tortor. Maecenas id augue. Vivamus interdum nulla ac dolor. Fusce metus. Suspendisse eu purus. Maecenas quis lacus eget dui volutpat molestie.

Maecenas at odio. Nunc laoreet lectus vel ante. Nullam imperdiet. Sed justo dolor, mattis eu, euismod sed, tempus a, nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

In sed dolor. Etiam eget quam ac nibh pharetra adipiscing. Nullam vitae ligula. Sed sit amet leo sit amet arcu mollis ultrices. Vivamus rhoncus sapien nec lorem. In mattis nisi. Vivamus at enim. Integer semper imperdiet massa. Vestibulum nulla massa, pretium quis, porta id, vestibulum vitae, velit.

スタンドアロン・デモ

設定は、最小限の設定と同じです。 CSS ファイルを見てください。

その他のスタイル例

これらのタブは、前のタブと同じCSSファイルに、多少特別なCSS宣言を持つものを使用します:

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, leo sit amet auctor fermentum, risus lorem posuere tortor, in accumsan purus magna imperdiet sem.

Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus nibh metus, faucibus quis, semper ut, dignissim id, diam.

スタンドアロン・デモ

CSS オーバーライド

ここに、外部のCSSファイルをオーバーライドするCSSの設定があります:

/* alternate colors: skin2 */
ul.skin2 a {
    background-color:#89a;
    color:#fff !important;
}
 
/* mouseover state */
ul.skin2 a:hover {
    background-color:#678;
}
 
/* active tab */
ul.skin2 a.current {
    background-color:#4F5C6A;
    border-bottom:2px solid #4F5C6A;
}
 
/* tab pane with background gradient */
div.skin2 div {
    min-height:200px;
    color:#fff;
    background:#234 url(/media/img/gradient/h300.png) repeat-x scroll 0 -50px;
 
    /* IE6 does not support PNG24 images natively */
    _background:#4F5C6A;
}

画像を使わないスキンの利点は、非常に柔軟であると言うことです。ほんのわずかの特別な設定によって、デフォルトタブのルック＆フィールを変更できて、ページに多くの異る種類のデザインされたタブを持つことを可能にします。

画像付きのタブ・スキン

ここでは、全体設定のために1つの背景画像を使用しています。これは、CSS スプライトのテクニックで達成することができます。1つのイメージだけを使用するために、この設定は非常に迅速に実行されます。 CSSスプライトは、現代のウェブデザインにおいては、非常に重要な技術です。

プレーヤー
プラグイン
ストリーミング
スクリプト

Lorem ipsum dolor sit amet

Consectetur adipiscing elit. Duis viverra, leo sit amet auctor fermentum, risus lorem posuere tortor, in accumsan purus magna imperdiet sem.

Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus nibh metus, faucibus quis, semper ut, dignissim id, diam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, leo sit amet auctor fermentum, risus lorem posuere tortor, in accumsan purus magna imperdiet sem.

Lorem ipsum dolor sit amet

Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus nibh metus, faucibus quis, semper ut, dignissim id, diam.

Title for the third tab pane

Fourth pane is here

スタンドアロン・デモ

ここで使われている CSS ファイルを見てください。こちらで、スタンドアロンページを参照してください。また、タブのスクロール可能なバージョンを楽しむことができます。

[ タブのネーミング ] [ メニュー ] [ マウスオーバを使用したタブの切り替え]