<< [신간] Ajax 인 프랙티스 소개 | Home | XStream을 통해 XML 다루기 >>

jQuery를 활용한 테이블 소트 예제

jQuery를 활용한 테이블 소스 예제입니다. 구글의 ig 서비스를 아신다면 이해가 빠르실 겁니다. 자신의 개인화된 메뉴를 재배치가 가능해지게 되는거죠.

1. 샘플 예제

2. Sortables

2.1 Options

accept string mandatory the class name for items inside container
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
helperclass string optional helper is used to point the place where the item will be positioned. This is the class for the helper
opacity float ( < 1) optional opacity for the item while in drag
ghosting boolean optional when true the sorthelper contains a copy of the dragged element
tolerance 'pointer', 'intersect' or 'fit' optional points how the draggble must be against the droppable
fit boolean optional when true the draggable must be inside the droppable
fx integer optional duration for the effect applied to the draggable
onchange function optional callback that get as argument an array with serialized changed sortables
floats boolean optional tells if the sorted items are floats
containment string ('parent') optional the item can be dragged only inside the container
axis string ('vertically' or 'horizontally') optional define the axis which the dragged elements moves on
handle string or DOMElement optional the handel that starts the draggable
onHover function optional called when an accepted draggble is hovering a sortable. Applies to the sortable and gets as parameter the draggable DOMElement
onOut function optional called when an accepted draggble is leaving a sortable. Applies to the sortable and gets as parameter the draggable DOMElement
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.
onStart function optional callback function triggered when the dragging starts
onStop function optional callback function triggered when the dragging stops

2.2 샘플 Code :

$(document).ready(
    function () {
        $('a.closeEl').bind('click', toggleContent);
        $('div.groupWrapper').Sortable(
            {
                accept: 'groupItem',
                helperclass: 'sortHelper',
                activeclass :     'sortableactive',
                hoverclass :     'sortablehover',
                handle: 'div.itemHeader',
                tolerance: 'pointer',
                onChange : function(ser)
                {
                },
                onStart : function()
                {
                 $.iAutoscroller.start(this,
document.getElementsByTagName('body'));
                },
                onStop : function()
                {
                    $.iAutoscroller.stop();
                }
            }
        );
    }
);
Tags :



Add a comment Send a TrackBack