<< 언론은 왜 석유회사 폭리에 침묵하나? | Home | 웹 어플리케이션 보안 >>

jQuery를 활용한 쇼핑 카트 구현 예제

 jQuery를 활용하여 쇼핑 카트를 만들어봤는데 재밌네요.
좀더 확장하면 쇼핑몰에 응용할 수 있는 수준이군요.

예제 링크

1. Draggables

1.1 Options:

handle string or DOMElement optional the handel that starts the draggable
revert boolean optional when true, on stop drag the element returns to initial position
ghosting boolean optional when true a copy of the element is moved
zIndex integer optional zIndex depth for the element while in drag
opacity float ( < 1) optional opacity for the element while in drag
grid mixed (integer or array) optional define a grid for draggable to snap to
fx integer optional duration for the effect applied to the draggable
containment string ('parent' or 'document') or array (left, top, width, height) optional define the zone where the draggable can be moved. Use value 'parent' to move it inside parent element, 'document' for not moving it outside the document, so no extra scroll.
axis string ('vertically' or 'horizontally') optional define the axis which the dragged elements moves on
onStart function optional callback function triggered when the dragging starts
onStop function optional callback function triggered when the dragging stops
onChange function optional callback function triggered when the dragging stops and elements was moved at least one pixel
onDrag function optional callback function triggered while the element is dragged. Receives two parameters the x and y coordinates. You can return an object with new coordinates {x: new x, y: new y} so this way you can interact with the dragging process, build your containment for instance.
insideParent boolean optional tell whatever the element is dragged inside its parent
snapDistance integer optional the dragged element is not moved unless is moved more then snapDistance. This way you can prevent accidental dragging
cursorAt object optional the dragged element is moved to the cursor position with the offset specified. Accepts value for top, left, right and bottom offset.
autoSize boolean optional when true the drag helper is resized to its content, instead of the dragged element's sizes
frameClass String optional When is set the cloned element is hidden so only a frame is dragged

1.2 사용된 샘플 소스

$('div.product').Draggable({revert: true, fx: 300, ghosting: true, opacity: 0.4});
2. Droppables

2.1 Options:

accept string mandatory the class name for draggables to get accepted by the droppable
activeclass string optional when an acceptable draggable is moved the droppable gets this class
hoverclass string optional when an acceptable draggable is inside the droppable, the droppable dets this class
tolerance 'pointer', 'intersect' or 'fit' optional points how the draggble must be against the droppable
onDrop function optional when an accepted draggble is drop on a droppable this functin is called. Applies to the droppable and gets as parameter the draggable DOMElement
onHover function optional called when an accepted draggble is hovering a droppable. Applies to the droppable and gets as parameter the draggable DOMElement
onOut function optional called when an accepted draggble is leaving a droppable. Applies to the droppable and gets as parameter the draggable DOMElement

2.2 사용된 샘플 소스

		$('#cart').Droppable(
{
accept : 'product',
activeclass: 'activeCart',
hoverclass: 'hoverCart',
tolerance: 'intersect',
onActivate: function(dragged)
{
if (!this.shakedFirstTime) {
$(this).Shake(3);
this.shakedFirstTime = true;
}
},
onDrop: addProductToCart
}
);

 재밌네요. 좀 더 공부한다면 더 좋은 인터페이스, 더 많은 문제점을 알게 될 것 같네요. 아직은 모르는 부분이 많아서인지 기본 기능만 되어도 좋아 보이네요. jQuery 다시 보았어...^^




Add a comment Send a TrackBack