jQuery 를 이용하여 page slide 만들어 보자.

http://code.google.com/p/jquery-pageslide/

위의 사이트에 가면 Featured Downloads 에서 해당 소스를 다운로드 받으시면 됩니다.

위의 기능은 먼저 위의 그림을 참고하면, original content 에서 특정 문장에 대해 설명이 필요한 부분이 있으면,

우측에 있는 secondart pane 에 해당 설명서가 보이도록 하는 기능입니다.

그리고 다시 원상태로 돌아가기 위해서는 original content 를 마우스 클릭하게 되면 됩니다.

간단하죠.

먼저 소스내용을 보면 jquery 1.2.6 버전을 참조하고, 해당 pageslide 기능을 위해 jquery.pageslide-0.2.js 를 넣고,

secondart pane 를 위한 디자인 처리를 위해 jquery.pageslide.css 를 넣었습니다.

위의 3가지 종류를 기본적으로 사용하고, 

$(document).ready(function() {

      $('a').pageSlide({

          width: "350px"

      });

  });

페이지 로딩이 되고 나서 해당 a 태그에 pageSlide 메소드를 접근하여 pane 의 넓이를 350px 로 조정했습니다.

우측 pane 의 넓이가 350 px 이며, 이는 개발자 분이 상황에 맞게 조절을 하시면 됩니다.

그러면 링크인 click for pageSlide 라는 a 태그에 어떤 설정값으로 지정되어 있을까요?

<div id="content"><a href="_secondary_page.htm" rel="pageslide">click for pageSlide</a></div>

다른건 필요없고, rel 을 pageslide 라는 값을 a 태그에 지정만 하시면 됩니다.

두개 만들고자 한다면??

<div id="content"><a href="_secondary_page.htm" rel="pageslide">click for pageSlide</a></div>

<div id="content"><a href="_secondary_page1.htm" rel="pageslide">click for pageSlide1</a></div>

위처럼 하나 추가해서 rel 은 동일하게 하시고, 해당 href 경로만 변경하시면 됩니다. 이는 postback 이 발생되지도 않기 때문에

전혀 문제가 되지 않습니다.

제가 보기엔 이는 협업에서 이 기능을 사용하는것을 본적은 없지만, 외국 사이트에서는 종종 보는 현상인듯 싶고요.

필요하다면 괜찮은 기능이기도 합니다.

감사합니다.

Posted by 심재운 (shimpark@gmail.com)