Simple 레이아웃 매니저
Sébastien Gruhier씨의 홈페이지에서 본것입니다.
이미 정의되어있는 class를 이용에 전체레이아웃을 간단하게 만들수 있군요..
단 prototype 1.6 에서만 작동한다고 하는군요..
사용법은
[code]
<div class="lm_container">
<div class="lm_top"></div>
<div class="lm_left"></div>
<div class="lm_center"></div>
<div class="lm_right"></div>
<div class="lm_bottom"> </div>
</div>
[/code]
위와같은 HTML은 정의해놓고 <HEAD></HEAD>사이에
[code]
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="layout_manager.js"></script>
[/code]
위 두개 파일만 인클루드 시키면 됩니다.
다음 그림이 class별 위치를 간략하게 나타낸것입니다.
[code]
<div class="lm_container">
<div class="lm_top"></div>
<div class="lm_left"></div>
<div class="lm_center" id="center"><a href="#" onclick="loadContent(); return false;">Update this element</a></div>
<div class="lm_right"></div>
<div class="lm_bottom"> </div>
</div>
<script>
function loadContent() {
$('loader').show();
runAjaxRequest.delay(2)
}
function runAjaxRequest() {
new Ajax.Updater('center', './_ajax_content.html', {onSuccess:layoutManager.add.bind(layoutManager, 'center')})
}
</script>
[/code]
위와 같은 코드를 실행시킨후 Update this element버튼을 누르면
center란 아이디를 가진 element에 [_ajax_content.html] 에 정의된 레이아웃이 로딩됩니다.
자세한 샘플과 스크립트 코드는 아래의 파일을 받으시면 보실수 있습니다.
참고 링크 : http://blog.xilinus.com/2007/10/3/simpl ··· type-1-6
이미 정의되어있는 class를 이용에 전체레이아웃을 간단하게 만들수 있군요..
단 prototype 1.6 에서만 작동한다고 하는군요..
사용법은
[code]
<div class="lm_container">
<div class="lm_top"></div>
<div class="lm_left"></div>
<div class="lm_center"></div>
<div class="lm_right"></div>
<div class="lm_bottom"> </div>
</div>
[/code]
위와같은 HTML은 정의해놓고 <HEAD></HEAD>사이에
[code]
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="layout_manager.js"></script>
[/code]
위 두개 파일만 인클루드 시키면 됩니다.
다음 그림이 class별 위치를 간략하게 나타낸것입니다.
[code]
<div class="lm_container">
<div class="lm_top"></div>
<div class="lm_left"></div>
<div class="lm_center" id="center"><a href="#" onclick="loadContent(); return false;">Update this element</a></div>
<div class="lm_right"></div>
<div class="lm_bottom"> </div>
</div>
<script>
function loadContent() {
$('loader').show();
runAjaxRequest.delay(2)
}
function runAjaxRequest() {
new Ajax.Updater('center', './_ajax_content.html', {onSuccess:layoutManager.add.bind(layoutManager, 'center')})
}
</script>
[/code]
위와 같은 코드를 실행시킨후 Update this element버튼을 누르면
center란 아이디를 가진 element에 [_ajax_content.html] 에 정의된 레이아웃이 로딩됩니다.
자세한 샘플과 스크립트 코드는 아래의 파일을 받으시면 보실수 있습니다.
layoutmanager.zip참고 링크 : http://blog.xilinus.com/2007/10/3/simpl ··· type-1-6
프로그래밍/JavaScript
2007/10/10 20:22
댓글을 달아 주세요