Rev. 2.73

이 글은 http://www.agilepartners.com/blog 에 의해 공개된 것입니다.
Script.aculo.us의 slide.js가 담당하는 슬라이더 응용입니다. Fluxiom의 인트로 비디오에서 보았던 바로 그 효과입니다. 아래의 슬라이드 바를 조정해 보세요. 익스플로러보다 파이어폭스에서 훨씬 빠른 렌더링 속도(실시간)를 보여줍니다.

사용된 스크립트 코드입니다.

function scaleIt(v) {
	var scalePhotos = document.getElementsByClassName("scale-image");
	floorSize = .26;
	ceilingSize = 1.0;
	v = floorSize + (v * (ceilingSize - floorSize));
	for (i=0; i < scalePhotos.length; i++) {
		scalePhotos[i].style.width = (v*190)+"px";
	}
}
var demoSlider = new Control.Slider('handle1','track1', 
	{axis:'horizontal', minimum: 0, maximum:200, alignX: 2, increment: 2, sliderValue: 1});
demoSlider.options.onSlide = function(value){
	scaleIt(value);
}
demoSlider.options.onChange = function(value){
	scaleIt(value);
}

다이네믹이 느껴지나요? FloatPhoto에도 성공적으로 적용했습니다. 더불어 가로 세로, 비율 계산과 설정 값이 쿠키로 저장되게 하였죠, 실시간으로 값을 전달하는 슬라이더는 콤보박스를 대체할 수도 있고, 웹페이지를 어플리케이션 수준으로 끌어올리는데 한몫할 것입니다.

Comments

script.aculo.us에서 드래그 앤 드롭이 사용되는 목적은 크게 두가지입니다. 하나는 선택한 엘리먼트가 목적 엘리먼트로의 이동하는 것(Draggables & Droppables)이고 다른 하나는 선별되는 엘리먼트들의 목록(Sortable lists and floats)입니다. 둘 중에서 Draggables & Droppables에 대하여 알아봅시다.

Draggables & Droppables

<div id="photo1"> <img ... /> </div>
<script type="text/javascript" language="javascript">
new Draggable('photo1',{revert:true});
</script>

옵션
# starteffect: function(element) {
element._opacity = Element.getOpacity(element);
new Effect.Opacity(element, {duration:0.2, from:element._opacity, to:0.7});
} //드래그 시작에 일어나는 효과 설정
# reverteffect: function(element, top_offset, left_offset) {
var dur = Math.sqrt(Math.abs(top_offset2)+Math.abs(left_offset2))*0.02;
element._revert = new Effect.Move(element, { x: -left_offset, y: -top_offset, duration: dur});
} //드래그 중에 일어나는 효과 설정
# endeffect: function(element) {
var toOpacity = typeof element._opacity == ‘number’ ? element._opacity : 1.0
new Effect.Opacity(element, {duration:0.2, from:0.7, to:toOpacity});
} //드래그 종료에 일어나는 효과 설정
# zindex: 1000 z축 값을 정한다.
# revert: false // true 마우스가 다운되면 되돌아 올지 말지를 결정
# snap: false // false, or xy or [x,y] or function(x,y){ return [x,y] } 정해진 값으로 드래그할 때 움직임에 스냅을 준다.

Droppables.add

Droppables.add('id_of_element',[options]);

// from the shopping cart demo
Droppables.add('shopping_cart', {
accept: 'products',
onDrop: function(element)
{ $('shopping_cart_text').innerHTML =
'Dropped the ' + element.alt + ' on me.'; }});

옵션
accept : 드래그한 엘리먼트가 올바른지 class 명으로 확인한다.
containment : 확인된 드래그 엘리먼트를 봉쇄한다. 이 옵션은 Sortables 제어 또는 Drag-and-Drop, Sortables을 함께 쓰는 경우에 사용한다.
hoverclass: 드래그한 엘리먼트가 올바른 경우 목적지 엘리먼트의 모양을 CSS에서 지정한 class로 변경한다.
overlap: 만약, Sortables에서 수평(horizontal) 또는 수직(vertical)옵션을 가진 엘리먼트는 50% 오버랩 시킨다?
greedy : true(Default) 만약 true로 설정되어 있다면 hovering 처리를 멈춘다.

콜백옵션
onHover : Sortables에서 드래그하는 엘리먼트가 드래그되는 엘리먼트 위로 옮겨지고 영향을 받으면 언제든지 불러낸다. 돌려줄 수 있는 세가지 파라미터 : Draggable, 드래그하는 엘리먼트, 그리고 옵션규정에 따르는 오버랩 퍼센테이지.
onDrop : 드래그하는 엘리먼트가 드래그되는 엘리먼트에서 생성되고 그것이 받아들였다면, 언제든지 불러낸다. 돌려줄 수 있는 두가지 프리미터 : 드래그하는 엘리먼트, 그리고 드래그되는 엘리먼트.

Droppables.remove
이것에 대한 자료는 아직 없군요. Droppables.add에 선별된 엘리먼트를 드래그앤드롭을 사용하여 지워주는 기능을 엘리먼트에 부여합니다. 사용법은 Droppables.add와 흡사합니다.

예제는 "Drag and Drop AJAX Shopping Cart 실습"을 참조하세요.

※ 이 페이지는 RSS리더기에서 비정상으로 보일 수 있으며 정상적으로 작동하지 않습니다.

Comments

http://www.napyfab.com/ajax-indicators/ 에서 제공하는 AJAX Activity Indicators 이미지들입니다. Prototype의 Ajax.Request 또는 Ajax.Updater 객체를 사용할 때 onLoading, onComplete 옵션으로 로딩 알리미를 사용할 수 있습니다.

new Ajax.Updater('items', 'ajax/cart.php', {
onLoading:function(request){Element.show('indicator')},
onComplete:function(request){Element.hide('indicator')},
parameters:'action=add' + encodeURIComponent(element.id),
evalScripts:true, asynchronous:true
}

덧. 온라인에서 즉성 생성 : http://www.ajaxload.info/

Comments