Rev. 2.73

Spotty 블로그는 비-프로그래머를 위한 AJAX 기능추가 툴킷인 LaCo를 공개하였다. 자바스크립트를 잘 모르는 사용자를 위해 Ajax를 손쉽게 다루는 방법을 제시한다. <A> 또는 <DIV> 태그에 임의의 애트리뷰트(attribute)를 사용함으로 자바스크립트는 손댈 필요도 없이 Ajax가 구현된다. 다음의 4가지방법으로 적용할 수 있다.

자동(페이지 로딩) - <DIV>태그에 'laco_src' 애트리뷰트를 추가하여 해당 페이지 로딩과 동시에 발동한다.
마우스 클릭 - A태그에 'laco_target' 애트리뷰트를 추가하여 사용자가 클릭할 때 발동한다.
마우스 토글 - 마우스 클릭과 동일하지만 다시한번 클릭하여 숨길 수 있다. 그리고 두번째 토글 부터는 다시금 Ajax요청을 하지 않는다.
마우스 오버 - 마우스 토글과 동일하지만 클릭되는 시점이 아니라 오버되는 시점에 발동한다.

// 자동(페이지 로딩)
<div laco_src="less_important_content.html" ></div>
// 마우스 클릭
<a href="content.html" laco_target="myDiv">Show Me The Content</a>
<div id="myDiv"></div>
// 마우스 토글
<a href="content.html" laco_target="myDiv" laco_toggle="true">View</a>
<div id="myDiv"></div>
// 마우스 오버
<a href="content.html" laco_target="myDiv" laco_toggle="true" laco_mouseover="true">View</a>
<div id="myDiv"></div>

주의할 점은 Prototype 프레임웍 라이브러리를 기반으로 제작되었으며 LaCo라이브러리 상단에 prototype.js가 로드되어 있어야 한다. 그리고 이것은 W3C의 웹표준을 따르지 않는 구현방법이다.

<head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="laco.js"></script>
</head>

라이브러리의 다운로드는 이 곳에서 할 수 있다.

Comments

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

Your Reaction Time!

captcha

avatar