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

"유이 격자 AutoGrid"에 대한 - 적응 격자 생성에 JavaScript를 사용하여

난 유이 격자 사랑. 내 CSS를 알고 있고 어떻게 브라우저의 다양한 문제를 해결하는 건 알지만, 또한 아주 많이 수정하고 테스트하고 다시 이러한 해결 방법 이상 만드는 것에 대해 지겨워. 그러나 유이 격자 밖으로 웹 개발의 모든 경우에 거기에, 내가 행복하고 실용적인 접근을 그냥 그들과 함께 할 수있는 사이트를 만들어 완벽하게되지 않을 수도있습니다 (지금도 왜 내가 디자이너가 아니에요) 알아요.

내가 몇 가지 선택 YUI 그리드 넣어 보관하는 데 하나의 문제를 기반으로 사이트를 사는 사람들이 나에 대해 특정 화면 해상도 또는 뷰포트의 크기를 기대하고 불평이다. 유이 격자 중 하나를 100 %로, 이는 매우 높은 해상도, 또는 중 800 × 600 또는 1024 × 768의 해상도에 최적화에 바보 같이 수있는 다양한하실 수있습니다. 하면 더 높은 해상도를 800 픽셀들을위한 페이지의 길이에 대해 불평하고 최적화하면 1천24명 그들이 800 × 600에서 귀하의 사이드 스크롤 막대가 표시 해 가서 말할 것이다. 당신은 이길 수없습니다.

아니면 할 수있어? CSS는 동적입니다 - 고정 상태 및 당신이 단지 당신의 브라우저 (물론, 거기에 IE 용 조건부 댓글이없습니다 무슨 포기와 옳은 일이 왔으면 좋겠다 수 있지만, 기술적으로 그들이 HTML을, 그리고 물론, 거기에 미디어 검색어입니다 CSS3 및 기타 케이크,지만 논쟁을 위해서는 6으로 지원하는 말을하자 기지)입니다. 자바 스크립트, 다른 한편으로는, 매우 동적이고 당신을 읽을 수 있고 어떤 브라우저를 사용하여 현재 일어나고 그것에 반응을 확인하시기 바랍니다.

- 당신 격자 유이를 만들 수있습니다 - 레이아웃을 기반으로 유연성을 유지하고 변경 사항의 필요에 따라 잘 사용하려면 자바 스크립트의 기능을 입고. 당신이 할 필요에 따라 몇 가지 선택 YUI 돔 마법과 변화 ID와 클래스를 사용합니다.

유이 격자 전체 너비의 여러 풍미에서 컨테이너에 ID를 DIV에 의해 정의된 온 :

• # 의사 - 750px (800 × 600)를 중심으로 좋은
• # doc2 - 950px (1024 × 768을위한) 좋은 중심으로
• # doc3 - 100 % 액체 (모두) 잘
• # doc4 - 974px 유체 (1024 × 768)를 잘
• # 의사 - 사용자 정의 - 사용자 정의 너비

여기서 한가지 기억조차 doc3 750 픽셀의 최소 너비가 왜 당신을 무시할 필요가 충분히 유연 격자 용 :

  # doc3 (
   분 너비 : 0;
 ) 

컨테이너 DIV 안에서 당신이 두 개의 블록을 가질 수 그들의 너비와 사이드 막대의 위치에 컨테이너 클래스를 DIV에 의해 정의됩니다 :

• . 유이 - t1에 - 2 열, 160px 왼쪽에 좁은
• . 유이 - t2가 - 2 열, 180px 왼쪽에 좁은
• . 유이 - T3는 - 2 열, 300px 왼쪽에 좁은
• . 유이 - t4 - 2 열, 오른쪽에있는 좁은 180px
• . 유이 - T5 - 2 열, 오른쪽에있는 좁은 240px
• . 유이 - T6 - 2 열, 오른쪽에있는 좁은 300px

여러분이 함께 유연한 그리드에 대한 계획을 만들 수있습니다 주는게 :

• 때 사용 가능한 화면 공간보다 큰 950 픽셀을 사용 doc2과 넓은 사이드바 - 왼쪽 또는 오른쪽 중 하나입니다
• 만약 당신이 950 픽셀을 사용하는 의사와 중간 크기의 사이드바 미만이
• 만약 당신이 760 픽셀을 사용 doc3 및 작은 사이드바 미만이
• 만약 당신도 이하 - 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는': '선택 YUI - T6';
         )
       )
       (currentWidth "950) (경우
         container.id = '닥;
         (사이드바의 경우) (
           container.className = 사이드바 === '왼쪽으로?  '유이 - t2가': '선택 YUI - T5';
         )
       )
       (currentWidth "760) (경우
         container.id = 'doc3';
         (사이드바의 경우) (
           container.className = 사이드바 === '왼쪽으로?  '유이 - t1에': '선택 YUI - 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 ( '의사가 사용자 정의');
   (컨테이너) 만약 (

먼저 우리가 거기에 실제로 있는지 확인 유이 바둑 판식 현재 문서에서 올바른 ID의 존재를 테스트하는 것입니다. 있다면, 우리는 코드의 나머지 부분을 실행합니다.

  var 사이드바 = null이;
     var 수업 = container.className;
     만약 (classes.match (/ 유이 - T는 [1-3] | 유이 - 좌 /)) (
        var 사이드바 = '왼쪽;
     )
     만약 (classes.match (/ 유이 - T는 [4-6] | 유이 오른쪽 /)) (
        var 사이드바 = '오른쪽';
     ) 

만약 거기에 열 구조를 정의 우리는, 컨테이너 요소의 클래스 이름을 확인 검색할 NULL로 sidebar 정의합니다. 우리도 yui-left 유이 미리 정의된 클래스 yui-left yui-right 여기에 또한. 이러한 스타일의 스크립트 기능을하지 않고 있지만 사이드바가 없다는 게 좀 한번에 하나의 스크립트가 한 충분한 공간이 있는지 여부를 확인하실 수있습니다.

  함수 switchGrid () (
       var currentWidth = YAHOO.util.Dom.getViewportWidth ();
       (currentWidth "950) (경우
         container.id = 'doc2';
         (사이드바의 경우) (
           container.className = 사이드바 === '왼쪽으로?  '유이 - T3는': '선택 YUI - T6';
         )
       )
       (currentWidth "950) (경우
         container.id = '닥;
         (사이드바의 경우) (
           container.className = 사이드바 === '왼쪽으로?  '유이 - t2가': '선택 YUI - T5';
         )
       )
       (currentWidth "760) (경우
         container.id = 'doc3';
         (사이드바의 경우) (
           container.className = 사이드바 === '왼쪽으로?  '유이 - t1에': '선택 YUI - 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, 창);
     )); 

전체의 유연성을 위해, 우리는 또한 이벤트 리스너를 다시 수표 그리드 사양을 할 때 사용자가 브라우저 크기를 조절이 적용됩니다. 마찬가지로 Internet Explorer의 크기를 행사하는 동안 사용자가 창의 크기를 조정 해고의 고약한 버릇이, 우리 switchGrid() Zakas이 니콜라스 '의 블로그에 자세히 설명되어있습니다 스로틀을 실행해야합니다.

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

마찬가지로 스로틀 메서드를 setTimeout() 호출하는 public 메서드를 필요로 setTimeout() 우리는 switchGrid 포인터를 반환.

그게 다야. 당신은 데모 페이지에서 효과를 시도할 수있습니다. 만약 당신이 크기의 독립적인 사이드바, 당신이 약간의 스크립트와 함께 멋지고 역동적이고 유연한 사이트를 만들 수있습니다 정의할 수있습니다.

대화 찾기 : 하십시요 Bloglines | Technorati은

공유하고 확장 : 스크랩 야후! My Web 내 웹 | 스크랩 del.icio.us와 | 그게 digg! | reddit!