Firejune

Home Contact Portfolio Music Video History Calendar Links RSS RSS2

Home Contact Portfolio Music Video History Calendar Links RSS RSS2

간만에 자바스크립트 관련 포스트를 작성합니다. jQuery를 기반으로 작성된 CSS Dock Menu를 Prorotype에서도 사용할 수 있도록 컨버전했습니다. 원작자이신 N.Design의 Stefan Petre씨는 이 컴포넌트를 Packed(암호화 압축) 상태로 배포했기 때문에 도무지 소스를 분석할 엄두도 못내고 있었지만, Unpacker가 있다는 사실을 알게 되었습니다. Unpack과 함께 Beautify(코드를 아름답게)를 입혀 주니 원본소스와 다를게 없군요. 알아볼 수 있게 된 김에 즉흥적으로 해 치워버린 작업이 되겠습니다. 위에 적용해 놓은 데모에서 직접 사용해 보세요. 적용시키는 방법은 아래와 같습니다.

css-dock.zip (245.0 KB)

마크업:

<div id="dock">
  <div>
    <a href="#"><span>Home</span><img src="images/home.png" alt="" /></a> 
    <a href="#"><span>Contact</span><img src="images/email.png" alt="" /></a> 
    <a href="#"><span>Portfolio</span><img src="images/portfolio.png" alt="" /></a> 
    <a href="#"><span>Music</span><img src="images/music.png" alt="" /></a> 
    <a href="#"><span>Video</span><img src="images/video.png" alt="" /></a> 
    <a href="#"><span>History</span><img src="images/history.png" alt="" /></a> 
    <a href="#"><span>Calendar</span><img src="images/calendar.png" alt="" /></a> 
    <a href="#"><span>Links</span><img src="images/link.png" alt="" /></a> 
    <a href="#"><span>RSS</span><img src="images/rss.png" alt="" /></a> 
    <a href="#"><span>RSS2</span><img src="images/rss2.png" alt="" /></a> 
  </div>
</div>

스크립트:

new Fisheye('dock',{
    maxWidth: 60,       /* 아이콘의 최대 크기 */
    items: 'a',         /* 너비가 적용될 앨리먼트 */
    itemsText: 'span',  /* 문자열의 태그이름 */
    itemWidth: 40,      /* 아이콘의 기본 크기 */
    proximity: 80,      /* 반응 범위 */
    valign: 'bottom',   /* 수직 정렬 */
    halign : 'center'   /* 가로 정렬 */
});