Yahoo! UI LibraryのCSSを使用したXOOPS(XOOPS Cube 2.0)のテーマを作成してみました。
背景が白のシンプルなテーマです。
Yahoo! UI Libraryがサポートしているブラウザの一覧は、次のページにあります。
Yahoo! UI Library: Graded Browser Support
ダウンロード
セットアップ
- The Yahoo! User Interface Library (YUI)から、Yahoo! UI Library(yui2.3.1.zip)をダウンロードします。
-
XOOPS_ROOT_PATH(※)に、Yahoo! UI Library(yui2.3.1.zip)を展開します。
※ XOOPS_ROOT_PATHは、XOOPSをインストールしたディレクトリで、mainfile.phpに記述されているパスです。
Yahoo! UI Libraryは、次のようなディレクトリに配置されることになります。
XOOPS_ROOT_PATH/yui -
yuidefault_2.zipをXOOPSのテーマディレクトリで展開します。
XOOPSのテーマディレクトリは、XOOPS_ROOT_PATH/themesです。
-
管理画面の[システム管理]->[一般設定]->[一般設定]で、デフォルト・サイトテーマを「yuidefault」を選択して、送信ボタンを押下します。
ホームページにテーマが適用されない場合は、一度ログアウトします。
追記(2007年9月24日)
「Yahoo! UI LibraryとInternet Explorer6は相性が悪いのかな」の問題が再現しなくなったため、style.cssを修正しました。
Yahoo! UI Libraryを使用して、select要素のオプションデータを非同期に取得するメモです。
サーバー側は、次のようなJSON形式のデータを返します。
-
[{"id":"1","name":"test"},{"id":"2","name":"test2"}]
クライアント側のJavaScriptのサンプルです。
onLabelClickは、Yahoo! UI LibraryのTreeviewのラベルをクリックしたときに呼ばれる関数です。
JavaScript select要素に含まれるオプションの値の取得するメモです。
-
var sel_elem = document.getElementById("sel_foo");
-
var sel_children = sel_elem.childNodes;
-
var count = sel_children.length;
-
for (var i=0;i<count;i++) {
-
var opt_elem = sel_children[i];
-
// オプションのテキスト
-
YAHOO.log(opt_elem.text);
-
// オプションの値
-
YAHOO.log(opt_elem.value);
-
}
Yahoo! UI Libraryを使用したページをInternet Explorer6で表示して、リンクをクリックすると、テキストのサイズが大きくなり、デザインが崩れます。
YUI Library Examples: TreeView Control: Default TreeViewのTreeviewのサンプルでも、ラベルの部分をクリックすると一部のフォントサイズが大きくなり、ページ全体のデザインが少し崩れます。
Yahoo! UI Libraryのcssを使用しないでTreeviewを作成した場合には、このようなことにはなりませんでした。
YUI付属のfonts.cssにある次の定義が問題になるようです。
-
body {font:13px/1.22 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
次のようにbodyのフォントスタイルを上書きして、フォントが大きくなることは避けられました。
(「*font-size:small;」を削除しました。)
-
body {
-
font:13px/1.22 arial,helvetica,clean,sans-serif;*font: x-small;
-
}
フォントサイズに関するCSSハック - Go my wayに、「*font-size:small;」の解説がありました。
IE7の対策とのことです。
IE6とFirefox2.0.0.6では、この変更で影響はないようですが、いつか他のブラウザ(特にIE7)の影響も見たいと思います。
追記(2007年9月24日):
Internet Explorer6で、2007年9月24日に再確認したところ、この記事の現象は発生しませんでした。
この記事を書いたときの僕のPCの状態が悪かったのか、Windows UpdateでIEが改善されたか、YUIのバージョンアップで解消されたかは、不明です。
Yahoo! UI Library: Grids CSSにYUI: CSS Grid Builderというツールがありました。
CSSに詳しくなくても、基本的なHTMLデザインの構成を簡単に作成できて、便利と思いました。
YUI CSSがサポートしている環境(ブラウザとOSの対応表)は、次のページにあります。
Yahoo! UI Library: Graded Browser Support