야후 사용자 인터페이스 블로그 (YUIBlog)

에 유이 격자 ""AutoGrid - 격자를 적응 만들기를 사용하여 자바 스크립트를

내가 사랑하는 유이 격자를 . 내 CSS를 알고, 그리고 어떻게 브라우저의 다양한 문제를 해결하기 위해 알아,하지만 나 또한 대단히 수정하고 테스트 및 만들려면 다음과 해결 방법을 반복해서 다시 데 대해 지겨워. 유이 격자 밖의 웹 개발의 모든 경우에 완벽한되지 않을 수도 있지만, 내가하고 실용적인 접근 방식을 데리고 단지 (지금도 제가 디자이너는 아니라고 왜 그런지) 그들과 함께 할 수있는 사이트를 만들 기쁘게 생각합니다.

하나의 문제는 내가 좀 유이 격자 기반의 사이트는 사람들이 내가 특정 화면 해상도 또는 뷰포트 크기를 기다리고 대해 하소연한다는 라이브 넣으면 가져왔다. 유이의 격자도 꽤 높은 해상도에, 바보거나 800 × 600 또는 1024 × 768의 해상도에 최적화할 수 있습니다 백퍼센트 폭 수 있습니다. 언제 최적화 800 픽셀 이상의 해상도에서 사람과 페이지의 길이에 대하여 불평하지 않으며 그들은 800 × 600에서 귀하의 사이드 막대를 보려면 스크롤해야 할 말할 것이다 1,024명에 갈 때. 당신은 이길 수 없습니다.

아니면 수 있습니까? CSS는 동적 아니야 - 그것은 고정된 상태를 가지고 있으며 당신은 오직 브라우저가 IE 용 조건부 댓글이 없습니다 (물론, 그것을주는 것과 옳은 않는다는 것을 희망 수 있지만, 기술적으로 그들이 HTML을하고 있으며, 물론 미디어 검색어가 없습니다 논쟁의 술 CSS3과 다른 케이크에, 그런데하자) IE6가 기지 지원 말한다. 자바 스크립트, 반면에, 매우 동적이며 당신은 밖으로 읽을 수 있고 현재 사용중인 브라우저에서 무슨 일이 일어나고 있는지 확인하고 그것에 반응합니다.

잘 사용할 당신은 유연하고 변화가 필요에 따라 남아 유이 - 그리드 기반의 레이아웃을 만들 수있는 자바 스크립트의 기능을 가지고 있구나. 해야할 일은해야 할 몇 가지 사용하는 것입니다 유이 돔 및 변경 ID와 클래스를 따라 마술.

컨테이너 사업부의 신분증에 의해 정의된 전체 너비의 여러 맛을 들어가도 유이 격자 :

• # 의사 - 750px (800 × 600에 대한 좋은) 중심
• # doc2 - 950px (1024 × 768에 대한 좋은) 중심
• # doc3 - 100 % 유체 (모두에게 좋은)
• # doc4 - 974px 유체 (1024 × 768에 대한 좋은)
• # 의사 - 사용자 정의 - 사용자 정의 너비

기억 여기 것은 하나도이다 doc3 것을 필요 재정을 완전히 유연한 그리드에 대한 이유를 750 픽셀,이의 폭을 최소 :

  # doc3 {
   분 - 폭 : 0;
 } 

컨테이너 사업부 안에 당신은 컨테이너 사업부에있는 클래스에 의해 정의됩니다 두 블록, 그리고 그들의 폭 및 측면 표시줄의 위치를​​ 가질 수 있습니다 :

• . 유이는 - T1에서 - 두 기둥은 좁고, 160px 왼쪽에
• . 유이는 - t2 - 두 기둥은 좁고, 180px 왼쪽에
• . 유이가 -에서 T3 - 두 기둥은 좁고, 300px 왼쪽에
• . 유이 - t4 - 오른쪽, 180px에 2 열 좁은
• . 유이 - t5 - 오른쪽, 240px에 2 열 좁은
• . 유이 - t6 - 오른쪽, 300px에 2 열 좁은

당신의 유연한 그리드에 대한 계획을 만들고 이들을 함께 할 수 퍼팅 :

• 중 왼쪽 또는 오른쪽 - 사용 가능한 화면 공간보다 큰 950 픽셀, 사용 doc2과 가장 넓은 사이드바 때
• 당신은보다 950 픽셀, 사용 의사와 중간 크기 sidebars있다면
• 당신은 760 픽셀, 사용 doc3 및 가장 작은 sidebars보다 적은 경우
• 당신은 더 적은이있는 경우 - 600 픽셀을 기원합니다 - 귀하의 처분에 게재 메인 컨텐츠로 아래의 사이드 바

이 가능하도록하기 위해서 스크립트는 정말 로켓 과학이 아닙니다. 그것은 할 필요가 모든 격자 설정, 사용할 수있는 브라우저 윈도우의 너비를 읽고 다음에 따라 ID와 클래스를 변경할 수 있습니다.

  YAHOO.example.autoGrid = 함수 () {
   var에 컨테이너 = YAHOO.util.Dom.get ( '의사') | |
                   YAHOO.util.Dom.get ( 'doc2') | |
                   YAHOO.util.Dom.get ( 'doc4') | |
                   YAHOO.util.Dom.get ( 'doc3') | |
                   YAHOO.util.Dom.get ( '의사 - 사용자 정의');
   (컨테이너)면 {
     var에 사이드바 = null을;
     var에 수업 = container.className;
     경우 (classes.match (/ 유이 - t [1-3] | 유이 - 좌 /)) {
        var에 사이드바 = '왼쪽';
     }
     (classes.match (/ 유이 - t [4-6] | 유이 오른쪽 /)) {면
        var에 사이드바 = '권한';
     }
     함수 switchGrid () {
       var에 currentWidth = YAHOO.util.Dom.getViewportWidth ();
       경우 (currentWidth> 950) {
         container.id = 'doc2';
         (사이드바의 경우) {
           container.className = 사이드바 === '왼쪽'?  '유이 -에서 T3': '유이 - t6';
         }
       }
       경우 (currentWidth <950) {
         container.id = '닥';
         (사이드바의 경우) {
           container.className = 사이드바 === '왼쪽'?  '유이 - t2': '유이 - t5';
         }
       }
       (currentWidth <이 760) {면
         container.id = 'doc3';
         (사이드바의 경우) {
           container.className = 사이드바 === '왼쪽'?  '유이 - T1에서': '유이 - t4';
         }
       }
       경우 (currentWidth <600) {
         container.id = 'doc3';
         container.className = '';
       }
     };
     switchGrid ();
     / *
       니콜라스 Zakas에 의해 스로틀 MSIE의 크기를 조정 nasties 해결하는 방법.

 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 = 함수 () {
   var에 컨테이너 = YAHOO.util.Dom.get ( '의사') | |
                   YAHOO.util.Dom.get ( 'doc2') | |
                   YAHOO.util.Dom.get ( 'doc4') | |
                   YAHOO.util.Dom.get ( 'doc3') | |
                   YAHOO.util.Dom.get ( '의사 - 사용자 정의');
   (컨테이너)면 {

올바른 신분증의 존재를 테스트하여, 현재 문서에서 실제로 유이 바둑 판식있다면 먼저 확인하십시오. 있다면, 우리는 코드의 나머지 부분을 실행합니다.

  var에 사이드바 = null을;
     var에 수업 = container.className;
     경우 (classes.match (/ 유이 - t [1-3] | 유이 - 좌 /)) {
        var에 사이드바 = '왼쪽';
     }
     (classes.match (/ 유이 - t [4-6] | 유이 오른쪽 /)) {면
        var에 사이드바 = '권한';
     } 

우리는 정의 sidebar , null이 아니라 요소의 컨테이너 이름을 검색하는 클래스와 정의된 구조 열 경우가 발생했습니다 확인하십시오. 수업 격자의 유이 이외에도 미리 저희는 또한 정의 yui-left 과 yui-right 여기. 이러한 스타일은하지만 스크립트 기능없이 사이드바가 없다는 스크립트 하나에 충분한 공간이있다는 것을 결정하는 일단 하나를 얻을 수 있습니다.

  함수 switchGrid () {
       var에 currentWidth = YAHOO.util.Dom.getViewportWidth ();
       경우 (currentWidth> 950) {
         container.id = 'doc2';
         (사이드바의 경우) {
           container.className = 사이드바 === '왼쪽'?  '유이 -에서 T3': '유이 - t6';
         }
       }
       경우 (currentWidth <950) {
         container.id = '닥';
         (사이드바의 경우) {
           container.className = 사이드바 === '왼쪽'?  '유이 - t2': '유이 - t5';
         }
       }
       (currentWidth <이 760) {면
         container.id = 'doc3';
         (사이드바의 경우) {
           container.className = 사이드바 === '왼쪽'?  '유이 - T1에서': '유이 - t4';
         }
       }
       경우 (currentWidth <600) {
         container.id = 'doc3';
         container.className = '';
       }
     };
     switchGrid (); 

메소드 switchGrid() 정의된 작업을 우리가하는 일의 전부. 우리는 ID와 클래스를 적용하기위한 여러 가지 경우를 설정하고 그것은 정의의 바로 뒤에 메서드를 호출합니다.

  / *
       니콜라스 Zakas에 의해 스로틀 MSIE의 크기를 조정 nasties 해결하는 방법.

 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() . 이 블로그 Zakas 니콜라스에 대한 설명에 자세히 .

  };
   {반환
     스위치 : switchGrid
   };
 } (); 

에서으로 스로틀 public 메서드를 호출하기 위해 필요한 방법 setTimeout() 우리가에 대한 포인터를 반환 switchGrid .

그게 다야. 당신이 영향을 밖으로 시도 할 수 페이지에서 시범 . 당신의 사이드바 크기의 독립적인 정의하면, 당신은이 작은 스크립트와 함께 멋지고 역동적이고 융통성있는 사이트를 만들 수 있습니다.

: 찾기 대화 bloglines | 테크노을

공유하고 확장할 수 : 즐겨찾기에 추가 del.icio.us으로 | 그것 Digg에! | reddit!