YUI 本身就有設計了一些基本的樣式,並寫在 CSS file 裡,預設的 skin 名稱 「sam」,只要你設定好要使用的 skin ,接著YUI輸出的何任 ui 介面都會有相對應的樣式,另外 YUI 也提供了另一個 skin 叫 「night」,不過呢,我使用 YUI-3.4.1找不到這個 skin ,線上版的也沒有這個 skin 可以用,YUI 文件寫說 3.4.0版就有了呀,真受不了那個文件。
指定 skin
最簡單指定skin的方式,是直接寫在 body 裡,如 <body class="yui3-skin-sam">,YUI 會自動載入 sam 的所有的 css style ,當然寫在 body 是一件很討人厭的事情,明明很乾淨的 code ,卻要被補上一個 class name ,為了YUI ,忍耐點!!。
- skin 可以在 YUI 下載的資料夾 /build/assets/skins 中找到。
YUI class name
YUI 所産生的每一個功能,都會綁上 className ,如 widget 會綁上 yui3-widget-stdmod, overlay 會綁上 yui3-overlay-content ,panel 會綁上 yui3-panel-content,拖拉功能 yui3-dd-draggable ,定位功能 yui3-widget-positioned,YUI 的 skin 就是去修改這些 className 的style,所有如果你想要建立個人風格的樣式,只要覆寫這些 className 就可達成。
skin 範例
YUI stylesheet
YUI 的 StyleSheet 物件,可以用來新增 css Style,首先你要載入 YUI StyleSheet 的 JS 語法,載入的名稱為 「stylesheet」,使用 use('stylesheet')載入,接著宣告 StyleSheet物件,並在第一個參數帶入你要的 css 語法,使用方法如下。
- 宣告時可以指定 html語法中的 css outter link ,
- <link href="my.css" rel="stylesheet" type="text/css" id="css" />
- <script>
- YUI().use('stylesheet','node',function (Y) {
- var sheet1 = Y.StyleSheet("#css",'mystyle');
- var cssStyle1=sheet1.getCssText();
- alert(cssStyle1);
- }
- </script>
- 直接指定 css style
- <script>
- YUI().use('stylesheet','node',function (Y) {
- var sheet1 = Y.StyleSheet('#t2{color:red;}','mystyle');
- sheet1.enable();
- }
- </script>
- 使用 disable 移除相關的 css style : sheet1.disabled();