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

"에 대한 YUI 격자 AutoGrid"- 격자를 적응 만들기를 사용하여 JavaScript를

내가 사랑하는 YUI 격자를 . 내 CSS를 알고, 그리고 어떻게 브라우저의 다양한 문제를 해결하려면 알지만, 나 또한 대단히 수정하고 테스트하고 이상이 해결 방법을 작성하고 반복하는 데 대해 지겨워. YUI 격자 완벽 밖으로 웹 개발의 모든 경우에 해당되지 않을 수도 있지만, 난 실용적인 접근 방식을 데리고 행복 해요 지금 당신이 또한 내가 왜 디자이너 아닌 거 알지?) 그들 (와 함께 할 수있는 사이트를 만들 수 있습니다.

난 내가 언제 어떤 YUI 격자 기반의 사이트를 넣어 보관하는 데 하나의 문제는 살아있는 사람들이 나에 대해 특정 화면 해상도 또는 뷰포트의 크기를 기다리고 불평이다. 유이 격자도 상당히 높은 해상도, 또는의 해상도에 최적화에 바보 수있는 100 % 폭 수 중 800 × 600 또는 1024 × 768. 당신은 더 높은 해상도에서 800 픽셀의 사람들을위한 페이지의 길이에 대해 불평하고하면 1024 사람들이 귀하의 사이드 막대를 볼로 스크롤해야 할 말 것입 최적화할 때 800 × 600. 당신은 이길 수 없습니다.

아니면 할 수 있지? CSS는 동적되지 않습니다 - 그것은 고정된 상태를 가지고 당신은 단지 그 브라우저는 당신이 그것을 (주는 것과 옳은 일을하지 뭐, IE 용 조건부 댓글 으면 수 있지만, 기술적으로 그들은 HTML이 있으며, 물론 거기에 미디어 검색어가 없습니다 CSS3 및 기타 만요, 있지만 인수를 위해서는 6으로이 기지 지원하는 말) 가자. 자바 스크립트는 반면에, 매우 동적이며 당신은 밖으로 읽을 수있는 어떤 브라우저에 현재 사용중인에서 일어나는 일들과 거기에 반응 확인하시기 바랍니다.

당신은 유연성 유지 및 변경의 필요에 따라 YUI - 격자 기반의 레이아웃을 만들 수 있습니다 잘 사용하는 자바 스크립트의 기능을 가지고 있구나. 모두 당신이해야 할 몇 가지 사용해야합니다 YUI 돔 및 변경 ID와 클래스를 따라 마술.

YUI 격자 전체 너비의 여러 맛을에서 컨테이너에있는 ID를 DIV에 의해 정의된 온 :

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

한 가지는 여기에 기억조차입니다 doc3 그게 필요로 완전히 무시 유연한 그리드가있는 픽셀의 최소 넓이를 750을위한 이유는 :

  # doc3 (
   분 폭 : 0;
 ) 

컨테이너 DIV 안으로, 그리고 두 블록을 가질 수 그들의 너비와 사이드 막대의 위치가 컨테이너의 클래스 DIV에 의해 정의됩니다 :

• . YUI - T1을 - 2 열, 160px 왼쪽에 좁은
• . YUI - T2 - 2 열, 180px 왼쪽에 좁은
• . YUI - T3의 - 2 열, 300px 왼쪽에 좁은
• . YUI - T4 - 2 열, 오른쪽, 180px에 좁은
• . YUI - T5 - 2 열, 오른쪽, 240px에 좁은
• . YUI - 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에 사이드바 = 널;
     var에 수업 = container.className;
     (classes.match (해당되는 경우 / YUI - t [1-3] | YUI 왼쪽 /)) (
        var에 사이드바 = '왼쪽';
     )
     (classes.match (해당되는 경우 / YUI - t [4-6] | YUI 오른쪽 /)) (
        var에 사이드바 = '권리';
     )
     함수 () (switchGrid
       var에 currentWidth = YAHOO.util.Dom.getViewportWidth ();
       (해당되는 경우 currentWidth> 950) (
         container.id = 'doc2';
         면 (세로 막대) (
           container.className = 사이드바 === '왼쪽으로'?  'YUI - T3의': 'YUI - T6';
         )
       )
       (해당되는 경우 currentWidth <950) (
         container.id = '의사';
         면 (사이드바) (
           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;
     / *
       계기판은 니콜라스 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 ( '의사 - 사용자 정의');
   면 (컨테이너) (

먼저 우리가 만약 실제로 YUI 그리드 현재 문서에 올바른 신분증의 존재에 대한 테스트입니다 확인하시기 바랍니다. 있다면, 우리는 코드의 나머지 부분을 실행합니다.

  var에 사이드바 = 널;
     var에 수업 = container.className;
     (classes.match (해당되는 경우 / YUI - t [1-3] | YUI 왼쪽 /)) (
        var에 사이드바 = '왼쪽';
     )
     (classes.match (해당되는 경우 / YUI - t [4-6] | YUI 오른쪽 /)) (
        var에 사이드바 = '권리';
     ) 

우리는 정의 sidebar , NULL로 검사의 용기에 이름을 검색할 클래스 요소와 구조 정의한다면 거기 있었 열. 정의 또한 우리가 미리 설정된 YUI 격자 수업 이외에 yui-left 과 yui-right 여기에. 이러한 스타일은 자네가 스크립트 기능없이 사이드바가 없다는 허용하지만, 하나를 얻기 위해 스크립트가 그 하나에 충분한 공간이 결정되면.

  함수 () (switchGrid
       var에 currentWidth = YAHOO.util.Dom.getViewportWidth ();
       (해당되는 경우 currentWidth> 950) (
         container.id = 'doc2';
         면 (사이드바) (
           container.className = 사이드바 === '왼쪽으로'?  'YUI - T3의': 'YUI - T6';
         )
       )
       (해당되는 경우 currentWidth <950) (
         container.id = '의사';
         면 (사이드바) (
           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 및 수업을 적용하고 그 방법을 바로 뒤에 그것이 정의의 전화를 다른 사건을 설정할 수 있습니다.

  / *
       계기판은 니콜라스 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 Digg에 그것을! | 레딧!