jquery ui の themeを変更する方法(Google CDN 編）

jquery ui を使ってちょっとリッチな見た目や機能を提供したい時は、

google.load("jquery", "1");
google.load("jqueryui", "1");

と、Google CDNにあるjqueryとjqueryuiをloadして、
ごにょごにょ実装するのがおすすめです。

また、jquery uiは、CSSだけでデザインの制御をしているので自分が好むtheme CSSを読み込むだけで、
javascriptのコードを変えることなくデザインを変更できます。

Google CDNには、このtheme CSSファイルも置いてあり、
以下のpathにあります。

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" rel="stylesheet" />

↑「redmond」という部分がtheme名を意味しています。
themeには、jquery ui 1.7.2では、以下の種類があります。

• base
• black-tie
• blitzer
• cupertino
• dark-hive
• dot-luv
• eggplant
• excite-bike
• flick
• hot-sneaks
• humanity
• le-frog
• mint-choc
• overcast
• pepper-grinder
• redmond
• smoothness
• south-street
• start
• sunny
• swanky-purse
• trontastic
• ui-darkness
• ui-lightness
• vader

jquery ui の場合、CSSのクラス名が"ui-" から始まるので、
クラス名がかぶってなければ他のデザインに影響が出ることはないので安心。

サイトのデザインにあわせて気軽に変えられるので非常に便利です。
是非おためしください。

なお、このサイトではredmondを採用しています。