2011年05月15日

jQuery UI Tabs のCSSを変更してタブの背景を変える

ライブラリ:jQuery UI Tabs

jQuery UI Tabsを使うと、簡単にタブを表現することができます。なのですが、初期のCSSのままじゃ物足りないな〜と思いヘッダーの画像の背景を変えて、タブの印象を変えてみました。
ちなみに、ヘッダーの背景というのは、タブを選択する部分の背景のことを言っています(一般的に何て呼ぶのかはわかりません)。
初期のヘッダーの背景は以下のようになっています(クリックすると実際の大きさで見れます)。
default_bg_image

このオレンジ色のグラデーションの画像を他の画像に変更してみます。

jQuery UI Tabsを使う場合、jquery-ui.custom.cssというCSSファイルを読み込むと思います。このファイルの中にヘッダーの画像を指している箇所があるので、その部分を書き換えます。
タブのヘッダーや中身に使用する画像・文字のフォントなどを指定している箇所は、以下の部分です(Component containersというコメントから始まる部分です)。
/* Component containers
----------------------------------*/
.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #dddddd; background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #333333; }
.ui-widget-content a { color: #333333; }
.ui-widget-header { border: 1px solid #e78f08; background: #f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
.ui-widget-header a { color: #ffffff; }

この中に
.ui-widget-header { border: 1px solid #e78f08; background: #f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }

という行があります。この行のbackgroundのurlに画像ファイルを指定します。
今回は、以下のような100×100の黄色のグラデーション画像を用意しました(画像のサイズは500×100でなくても大丈夫みたいです)。
ui-bg_gloss_org1_100_100

この画像をui-bg_gloss_org1_100_100.pngという名前で保存して、以下のようにCSSを変更しました(赤字が変更した箇所です)。
.ui-widget-header { border: 1px solid #ffff00; background: #f6a828 url(images/ui-bg_gloss_org1_100_100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }

背景画像に合わせて、ボーダーの色を黄色に変えました。
ブラウザで見ると、次のようになります(クリックすると実際の大きさで見れます)。
yellow_bg_image

ちゃんと変更されています。
用意するのが面倒だけど、いろいろな背景画像を用意して試してみたいです。


    • 0 Comment |
    • 0 Trackback |
    • このエントリーをはてなブックマークに追加
    • Edit

この記事へのトラックバックURL

 

トラックバックはまだありません。

コメントはまだありません。

コメントする。

絵文字
 
星  顔