我討厭 YUI 3 .....第四天 Skin

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();