Jquery Reference SIte

이번에 제작하게 되는 레이아웃은 Jquery라는 자바스크립트 프레임워크를 사용하게 되는데, 한마디로 웹브라우저를 제어하는 장치라고 생각하시면 됩니다. 이 프레임워크를 쓰려면 일련의 JS 파일들을 레이아웃 폴더에 넣고 등록을 시키게 됩니다. 아래의 두 사이트는 앞으로 가장 많이 찾아 볼 사이트라서 링크를 시켜 놓습니다.

* Jquery 공식 사이트
* Jquery UI 코어 사이트

그리고 이번 제작에서 목표로 하게 되는 기능은 여기 사이트와 가장 흡사한 동작을 하는 것 입니다. 이게 엄청 만만치 않은 작업이라 스터디 중간에 다른 길로 샐 수도 있습니다. 하지만 근본적은 목표는 레이아웃의 횡형 접기 기능입니다.

현재 Forum에 등록해 놓은 테스트 레이아웃 파일은 Animate라는 파라메터로 구현 할 수 있는 부분까지를 적용해 놓은 것 입니다. 여기까지의 일련의 과정을 정리하자면 이렇습니다. (밑에 내용은 이미 다 적용을 해서 test.zip 파일에 적용이 된 상태임)

1. jquery.com에서 jquery-1.2.6.js 파일을 다운 받습니다. Jquery를 레이아웃에서 돌릴 수 있게 해주는 가장 기본적인 파일입니다.


2. 웹상에서 <div>단의 폭을 넓히고 좁히는등의 애니메이션을 사용하기 위해 Jquery에는 없는 추가 라이브러리용 JS를 Jquery UI 코어 사이트에서 다운로드 받습니다. 레이아웃 폴더내의 JS 폴더안에 있는 effects.min.js가 바로 그것입니다. 이 파일이 있어야 애니메이션이 가능해지니다.


3. 레이아웃 폴더의 layout.html에서 최상단에 각 JS 파일들을 레이아웃에 연결시키는 코드를 추가했습니다.

<!-- js 파일 import -->
<!--%import("js/xe_official.js")-->
<!--%import("js/jquery.pack.js")-->
<!--%import("js/effects.min.js")-->
<!--%import("js/global.js")-->


4. global.js는 Jquery 구문을 작동시키기 위한 실질적인 변수와 핸들러들이 정의되어 있습니다. layout.html에 일일이 넣으면 엄청나게 길어지기 때문에 따로 JS 파일로 빼 놓은것이 되겠습니다.