2012
Jan
09

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 ,
範例
  1. <link href="my.css" rel="stylesheet" type="text/css" id="css" />
  2. <script>
  3. YUI().use('stylesheet','node',function (Y) {
  4. var sheet1 = Y.StyleSheet("#css",'mystyle');
  5. var cssStyle1=sheet1.getCssText();
  6. alert(cssStyle1);
  7. }
  8. </script>
  • 直接指定 css style
範例
  1. <script>
  2. YUI().use('stylesheet','node',function (Y) {
  3. var sheet1 = Y.StyleSheet('#t2{color:red;}','mystyle');
  4. sheet1.enable();
  5. }
  6. </script>
  • 使用 disable 移除相關的 css style : sheet1.disabled();

回應 (Leave a comment)