Yahoo!用戶界面博客（YUIBlog）

YUI的網格-使用JavaScript創建自適應網格的“自動柵格 “

我愛YUI的網格 。 我知道我的CSS，我知道如何解決不同的瀏覽器的問題，但我也非常關注無聊的修復和測試，並創建這些變通辦法，一遍又一遍。 雖然 YUI的網格可能不適合所有Web開發的情況下有，我很高興，採取務實的態度，只是創建，可與他們做的網站（現在你也知道，為什麼我不是一個設計師）。

我一直當我把一些YUI的網格為基礎的網站生活的一個問題是，人們抱怨我期待著一個特定的屏幕分辨率或視口大小。 YUI的網格可以是100％廣，它可以是非常愚蠢的高解析度，或優化，無論是800 × 600或1024 × 768分辨率的。 當你優化決議較高的人會抱怨頁面長度為 800像素，當您為 1024人說，他們已經滾動到您的側欄上看到800 × 600。 你不能贏。

或者你能嗎？ CSS是動態的 - 它有一個固定的的狀態，你只能希望瀏覽器不正確的事，你給它（IE瀏覽器的條件很好，有意見，但技術上它們是HTML，當然也有媒體查詢CSS3和其他物品，但讓我們的說法而說支持IE6的基地）。 另一方面，JavaScript中，是非常有活力，你可以讀出並檢查發生了什麼事，以目前使用的瀏覽器和反應。

把這個 JavaScript功能，您可以創建一個 YUI的網格為基礎的佈局，保持靈活和變化，根據需要用好。 所有你需要做的的是使用一些YUI DOM魔術和相應變化ID和類。

YUI的網格總寬度由容器DIV的ID定義，有幾種口味：

• ＃DOC - 750px居中（800 × 600）
• ＃doc2 - 950px居中（1024 × 768）
• ＃doc3 - 100％液（大家好）
• ＃doc4 - 974px液（1024 × 768）
• ＃DOC自定義 - 自定義寬度

這裡有一點要記住的是，即使doc3有一個最小寬度為750像素，這就是為什麼你需要重寫一個完全靈活的網格：

  ＃doc3
  最小寬度：0;
 } 

容器內的DIV，你可以有兩大塊，和他們的寬度和邊欄的位置是由容器DIV的類定義：

• YUI - T1 - 兩列，左邊窄，160px【
• YUI - T2 - 兩列，左邊窄，180px
• YUI - T3 - 兩列，左邊窄，為 300px
• YUI - T4 - 兩列，狹義上的權利，180px
• YUI - T5 - 兩列，右邊窄，240px
• 。YUI - T6 - 兩列，法權的狹隘，為 300px

把這些在一起，你可以創建一個靈活的網格為您的計劃：

• 當屏幕的可用空間大於 950像素，使用doc2和最廣泛的側邊欄 - 向左或向右
• 如果你有小於 950像素，使用DOC和中等規模的側邊欄
• 如果您有小於 760像素，使用doc3和最小的側邊欄
• 如果你有更少 - 說 600像素 - 在您的處置，顯示了以下主要內容的邊欄

讓這個腳本是不是真的火箭科學。 它需要做的是讀出的網格設置，可用的瀏覽器窗口的寬度，然後相應地改變 ID和類。

  YAHOO.example.autoGrid =函數（）{
  容器= YAHOO.util.Dom.get（“DOC”）| |
                   YAHOO.util.Dom.get（'doc2“）| |
                   YAHOO.util.Dom.get（'doc4“）| |
                   YAHOO.util.Dom.get（'doc3“）| |
                   YAHOO.util.Dom.get（DOC定制“）;
   （容器）{
    側邊欄 = NULL;
     VAR類 = container.className;
     （classes.match（/ YUI - T [1-3] | YUI左/））{
        VAR側邊欄 =“左”;
     }
     （classes.match（/ YUI - T [4-6] | YUI /右））{
       側邊欄 =“正確的”;
     }
    函數 switchGrid（）{
       currentWidth = YAHOO.util.Dom.getViewportWidth（）;
       （currentWidth> 950）{
         container.id =“doc2”;
         （邊欄）{
           container.className =側邊欄 ==='左'的？  “YUI - T3”：“YUI - T6”;
         }
       }
       （currentWidth <950）{
         container.id =“DOC”;
         （邊欄）{
           container.className =側邊欄 ==='左'的？  “YUI - T2”：“YUI - T5”;
         }
       }
       （currentWidth <760）{
         container.id =“doc3”;
         （邊欄）{
           container.className =側邊欄 ==='左'的？  “YUI - T1”：“YUI - T4”;
         }
       }
       （currentWidth <600）{
         container.id =“doc3”;
         container.className = '';
       }
     };
     switchGrid（）;
     / *
      由Nicholas Zakas油門解決 MSIE中的調整大小的臟東西。

 http://www.nczonline.net/blog/2007/11/30/the_throttle_function

     * /
    功能油門（方法，範圍）{
       clearTimeout（method._tId）;
         method._tId = setTimeout的（函數（）{
         method.call（範圍）;
       }，100）;
     };
     YAHOO.util.Event.on（窗口，“調整大小”，函數（）{
      油門（YAHOO.example.autoGrid.switch，窗口）;
     }）;

   };
  返回{
    開關：switchGrid
   };
 （）; 

讓我們通過它一步一步：

  YAHOO.example.autoGrid =函數（）{
  容器= YAHOO.util.Dom.get（“DOC”）| |
                   YAHOO.util.Dom.get（'doc2“）| |
                   YAHOO.util.Dom.get（'doc4“）| |
                   YAHOO.util.Dom.get（'doc3“）| |
                   YAHOO.util.Dom.get（DOC定制“）;
   （容器）{

首先，我們檢查是否存在實際上是一個銳電網在當前文檔中，通過測試正確的ID存在。 如果有，我們執行的代碼的其餘部分。

 側邊欄 = NULL;
     VAR類 = container.className;
     （classes.match（/ YUI - T [1-3] | YUI左/））{
        VAR側邊欄 =“左”;
     }
     （classes.match（/ YUI - T [4-6] | YUI /右））{
       側邊欄 =“正確的”;
     } 

我們定義為NULL sidebar欄，檢索容器元素的類的名稱，並檢查是否有被定義的列結構。 除了 ​​預設的YUI網格類，我們yui-left yui-right在這裡。 這些樣式，讓你不會有一個側邊欄沒有腳本功能，但得到一個腳本確定後，有一個足夠的空間。

 函數 switchGrid（）{
       currentWidth = YAHOO.util.Dom.getViewportWidth（）;
       （currentWidth> 950）{
         container.id =“doc2”;
         （邊欄）{
           container.className =側邊欄 ==='左'的？  “YUI - T3”：“YUI - T6”;
         }
       }
       （currentWidth <950）{
         container.id =“DOC”;
         （邊欄）{
           container.className =側邊欄 ==='左'的？  “YUI - T2”：“YUI - T5”;
         }
       }
       （currentWidth <760）{
         container.id =“doc3”;
         （邊欄）{
           container.className =側邊欄 ==='左'的？  “YUI - T1”：“YUI - T4”;
         }
       }
       （currentWidth <600）{
         container.id =“doc3”;
         container.className = '';
       }
     };
     switchGrid（）; 

switchGrid()方法，我們定義的所有工作。 我們設立申請的ID和類不同的情況，並呼叫後，立即被定義的方法。

  / *
      由Nicholas Zakas油門解決 MSIE中的調整大小的臟東西。

 http://www.nczonline.net/blog/2007/11/30/the_throttle_function

     * /
    功能油門（方法，範圍）{
       clearTimeout（method._tId）;
         method._tId = setTimeout的（函數（）{
         method.call（範圍）;
       }，100）;
     };
     YAHOO.util.Event.on（窗口，“調整大小”，函數（）{
      油門（YAHOO.example.autoGrid.switch，窗口）;
     }）; 

充分的靈活性，我們也適用於一個事件監聽器，重新檢查電網的規格，當用戶調整瀏覽器。 作為Internet Explorer有一個觸發resize事件的壞習慣，而用戶調整窗口的大小， switchGrid()執行switchGrid（）。這是在尼古拉斯Zakas“博客上詳細解釋。

  };
  返回{
    開關：switchGrid
   };
 （）; 

隨著油門的方法，我們需要一個公共setTimeout()方法來調用返回一個指針switchGrid 。

這是所有。 您可以嘗試的演示頁上的效果。 如果你定義側邊欄的大小無關，你可以創造一些奇妙的動態和靈活的的網站與這個小腳本。

談話： bloglines | technorati

分享和擴展： 書籤del.icio.us | Digg它！ | 書籤交易！