Yahoo!用户界面博客（YUIBlog）

“自动栅格”为锐电网-使用JavaScript创建自适应网格

我爱YUI的网格 。 我知道我的CSS，我知道如何解决浏览器的不同问题，但我也很无聊修复和测试，并创建这些变通办法，一遍又一遍。 虽然锐网格未必适合所有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 - 两列，左边窄，300像素
• YUI-T4 - 两列，右边窄，180px
• YUI-T5 - 两列，右边窄，240px
• 。YUI-T6 - 两列，右边窄，300像素

把这些在一起，你可以创建一个灵活的网格您的计划：

• 当可用的屏幕空间是大于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-左/））{
       侧边栏='左';
     }
     （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定制'）;
   （容器）{

首先，我们检查是否存在实际上是一个在当前文档中的YUI的电网，通过正确的ID存在测试。 如果有，我们执行的代码的其余部分。

 侧边栏= NULL;
     VAR类container.className;
     （classes.match（/ YUI-T [1-3] | YUI-左/））{
       侧边栏='左';
     }
     （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() 在尼古拉斯Zakas的博客详细的解释 。

  };
  返回{
    开关：switchGrid
   };
 }（）; 

随着油门的方法需要我们setTimeout()调用的公共方法返回一个指针switchGrid 。

这一切。 你可以尝试的演示页上的效果。 如果你定义你的侧边栏的大小无关，你可以创造一些奇妙的动态和灵活的网站与这个小脚本。

找到的谈话： bloglines technorati

共享和扩展： 书签del.icio.us Digg它！ | reddit！