Rev. 2.73

Guillermo Rauch씨는 MooTools 자바스크립트 라이브러리와 CSS를 이용하여 재미있는 메뉴 네비게이션 효과를 만들었다. 메뉴 항목에 마우스가 이동할 때 마다 배경이미지에 시각적인 변화가 발생하며, 간단한 마크업만으로 사용할 수 있는 것이 특징이다. 이 것을 회사 프로젝트에 써먹기 위해 Prototype/Scriptaculous에서도 사용할 수 있도록 수정하였으며 사용방법은 아래와 같다.

<div id="fancymenu">
  <ul>
    <li class="current"><a href="#">Home</a></li>
    <li><a href="#">Plant a tree</a></li>
    <li><a href="#">Travel</a></li>
    <li><a href="#">Ride an elephant</a></li>
  </ul>
</div>
new FancyMenu('fancymenu', {
  transition: Effect.Transitions.backOut,
  duration: 0.7
});


※ 위 소스는 프로젝트 위키에서 다운로드 할 수 있습니다.

Comments

exticon.gif

CSS 2.1은 놀라운 능력을 아주 많이 갖추고 있다. Psyked는 이 것을 응용하여 좌측의 그림에 보이는 것처럼 a[href^=”http:”]와 같은 셀렉터(selector)로 'a'태그의 'hfef' 링크 속성을 분석하여 특정한 아이콘을 자동으로 추가하는 방법을 소개했다. 이 것은 매우 유용하다. 'http:' 문자열에 '$' 오퍼레이터(operator)를 추가로 사용하면 파일의 확장자 까지도 분석할 수 있게 되는 것이다. 아래의 CSS 예제를 보자. 서버단 코드나 HTML, 자바스크립트의 도움없이 처리 할 수 있다는 관점에서 효율성이 뛰어나지만, IE6은 CSS2.1을 지원하지 않기 때문에 치명적이다.


/* external link */
a[href^="http:"] {
    display : inline-block;
    padding-right : 14px;
    background : transparent url(/Images/link_icon.gif) center right no-repeat;
}

/* external link */
a[href^="mailto:"] {
    display : inline-block;
    padding-left : 20px;
    line-height : 18px;
    background : transparent url(/Images/mail_icon.gif) center left no-repeat;
}

/* pdf file link */
a[href$='.pdf'] {
    display : inline-block;
    padding-left : 20px;
    line-height : 18px;
    background : transparent url(Images/pdf_Icon.gif) center left no-repeat;
}

/* document file link */
a[href$='.doc'], a[href$='.rtf'], a[href$='.txt'], a[href$='.wps'] {
    display : inline-block;
    padding-left : 20px;
    line-height : 18px;
    background : transparent url(/Images/doc_icon.gif) center left no-repeat;
}

/* compressed file link */
a[href$='.zip'], a[href$='.gzip'], a[href$='.rar'] {
    display : inline-block;
    padding-left : 20px;
    line-height : 18px;
    background : transparent url(/Images/zip_Icon.gif) center left no-repeat;
}

Comments

aptana.gif

Aptana에서의 공식발표는 없지만 Milestone 9의 Nightly(Build 16069)버전의 업데이트가 19일 부터 가능합니다. 다수의 버그수정과 기능개선이 있었고, 약속대로 PHP가 지원되는 것을 확인 했습니다. PHP의 문법강조 및 유효성 검사(PHP5), 코드 어시스트, 아웃라인 함수 등의 기능이 추가되어 있습니다. Nightly Build의 설치방법은 환경설정 > 설치/갱신 > Aptana Automatic Updates 에서 "Nightly builds with more features, but possible bugs" 항목을 선택하고 업데이트를 실행하면 됩니다. 일부 버전에서는 업데이트가 더이상 진행되지 않기도 합니다. 이런 경우 Aptana의 다운로드 페이지에서 Milestone Release 8b (Beta: Build 15613)버전을 다시 설치하고 시도하세요.

Comments