Rev. 2.73

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

css-dock.zip 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'   /* 가로 정렬 */
});

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar