Chritian Heilmann씨가 YUI Grids와 함께 쓰는 Autogrid 라는 새로운 JavaScript 라이브러리를 작성하셨습니다. 이 기반 CSS 라이브러리는 똑똑한 리사이즈 기능을 제공합니다:
저는 YUI Grids를 아주 좋아합니다. 저는 CSS를 알고 있고, 브라우저마다 일어나는 다른 문제를 처리할 방법도 알고 있습니다. 하지만, 동시에 이런 처리들을 계속 해가면서 고치고 작성하는 일에 무척 짜증이 나기도 합니다. YUI Grids가 모든 경우의 웹 개발에 완벽히 맞지 않다해도, 그것들을 이용해 실용적인 접근을 하고 사이트를 만드는 일이 매우 좋습니다(아시다시피 저는 디자이너가 아니거든요).

YUI 기반 사이트를 만들면서 계속 가지고 있던 한가지 문제는 정확한 화면 해상도 혹은 가시영역 크기 예측에 대한 사람들의 불평이었습니다. YUI Grids는 고 해상도에서는 조금 멍청해보일 수 있는 100% 너비도 되고 800x600이나 1024x768 등의 해상도에 최적화된 것도 가능합니다. 여러분이 800 픽셀에 최적화하면, 보다 높은 해상도를 사용하는 사람들은 페이지의 길이에 대해 불평할 것입니다. 여러분이 1024에 최적화한다면, 800x600을 사용하는 사람들은 가로 스크롤을 해야하는 것에 대해 뭐라고 할것입니다. 모두다 만족시킬 수 없는거죠.

할 수 있을까요? CSS는 동적이지 않습니다 —고정된 상태를 가지고 있으며 브라우저가 여러분이 작성한 대로 제대로 보여주기만 바랄 수 밖에 없습니다(음, IE를 위한 조건절이 있긴 합니다만 기술적으로 그것들은 HTML의 영역입니다. 물론, CSS3의 미디어 퀴리도 있고 다른 것들도 있지만, 이 글의 목적은 기본적으로 IE6 지원을 위한 것입니다). 한편, JavaScript는 매우 동적이라서 그것을 사용하고 반응할 때 브라우저에서 지금 무슨 일이 일어나고 있는지 읽고 확인할 수 있습니다.

JavaScript의 이 기능을 잘 사용하면 여백의 폭을 필요에 따라 조절할 수 있는 YUI Grids 기반의 레이아웃을 만들 수 있습니다. 여러분이 해야할 것은 약간의 YUI Dom 마법과 ID와 class를 바꾸어 주는 것뿐입니다.
Christian씨는 데모 페이지와 전체 코드를 제공하고 있습니다:
[code:js]
YAHOO.example.autoGrid = function(){
  var container = 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-custom');
  if(container){
    var sidebar = null;
    var classes = container.className;
    if(classes.match(/yui-t[1-3]|yui-left/)){
       var sidebar = 'left';
    }
    if(classes.match(/yui-t[4-6]|yui-right/)){
       var sidebar = 'right';
    }
    function switchGrid(){
      var currentWidth = YAHOO.util.Dom.getViewportWidth();
      if(currentWidth> 950){
        container.id = 'doc2';
        if(sidebar){
          container.className = sidebar === 'left' ? 'yui-t3' : 'yui-t6';
        }
      }
      if(currentWidth <950){
        container.id = 'doc';
        if(sidebar){
          container.className = sidebar === 'left' ? 'yui-t2' : 'yui-t5';
        }
      }
      if(currentWidth <760){
        container.id = 'doc3';
        if(sidebar){
          container.className = sidebar === 'left' ? 'yui-t1' : 'yui-t4';
        }
      }
      if(currentWidth <600){
        container.id = 'doc3';
        container.className = '';
      }
    };
    switchGrid();
    /*
      Throttle by Nicholas Zakas to work around MSIE's resize nasties.
      http://www.nczonline.net/blog/2007/11/30/the_throttle_function
    */
    function throttle(method, scope) {
      clearTimeout(method._tId);
        method._tId= setTimeout(function(){
        method.call(scope);
      }, 100);
    };
    YAHOO.util.Event.on(window,'resize',function(){
      throttle(YAHOO.example.autoGrid.switch,window);
    });
 
  };
  return {
    switch:switchGrid
  };
}();

from YUI Autogrid: Correctly resize the grids
TAG CSS, Yahoo!, Yui
Posted by 행복한고니 트랙백 0 : 댓글 0
Firefox 3와 Opera 9.5의 출시가 임박함에 따라, Yahoo UI 팀은 자신들의 YUI 2.5.2 버전에서 이 브라우저들과 강력한 호환성을 보증하는 선수(先手)를 두었습니다. 어제 발표된, YUI 2.5.2 는 다수의 버그를 수정했지만 주로 Mozilla와 Opera의 새로운 브라우저에 초점을 두었습니다. 업데이트는 다음 사항을 포함합니다:
  • Opera 9.5b2와 Firefox 3.0RC1에 대한 광범위한 테스트. 이들 브라우저는 최종 릴리스에서 A 등급 브라우저가 될 것입니다.
  • DataTable, Menu, Rich Text Editor,Button의 주요 버그가 수정되었습니다.
  • 라이브러리의 Rich Text Editor와 DataSource가 Adobe AIR를 더 잘 지원하도록 업데이트 되었습니다.
  • 완전한 범례와 세 개의 새로운 스타일 세트 지원을 포함해 실험적인 Charts Control 이 업그레이드 되었습니다.
  • 컴포넌트를 조금 더 깊이 알고 싶은 개발자를 위해 Flash를 사용하는 컴포넌트(Chart와 Uploader)의 ActionScript 소스를 다운로드할 수 있게 되었습니다.
YUI v2.5.2의 전체 릴리스 노트는 Yahoo! User Interface Library Group에서 보실 수 있으며, Yahoo!’s free edge-hosting service를 통해 즉시 다운로드 하실 수 있습니다.

from YUI 2.5.2 Released, Big Focus on Firefox 3 and Opera 9.5 Support on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

Reid Burke씨가 YUI 확장기능들을 작성하는 yodeler 프로젝트를 시작했습니다. 그의 가장 최근 확장기능은 각 탭의 컨트롤을 수직 혹은 수평으로 스크롤 할 수 있는 tab view 입니다:

제 첫번째 작업은 탭 컨텐트간 전환을 위해 스크롤 애니메이션을 사용하는 YAHOO.widget.TabView의 확장입니다.

속성에서 부모 컨테이너를 위한 너비와 높이를 반드시 지정해야한다는 점만 빼면, TabView와 똑같이 동작합니다. 모든 스타일은 자동으로 적용됩니다!

사용자 삽입 이미지
ScrollTabView.js는 BSD 라이센스를 적용했고, Reid의 SVN 저장소에서 다운로드받을 수 있습니다.

from Scrolling Tab View for YUI on Ajaxian
TAG Yahoo!, Yui
Posted by 행복한고니 트랙백 0 : 댓글 0