Resizeable and Selectable in jquery

1.Giới thiệu

Hôm nay tôi sẽ giới thiệu với bạn 2 tính năng rất hay được sử dụng trong các ứng dụng web đó là Resizeable và Selectable trong thư viện Jquery . Nói qua một chút thì đúng như với tên gọi của nó, hàm resizeable() là hàm cho phép chúng ta có thể thay đổi kích thước của 1 DOM trong Html và hàm selectable() cho phép chúng ta lựa chọn 1 hoặc nhiều phần tử trong 1 list các phần tử.

2.Hướng dẫn thực hiện

Trước tiên trong file html chúng ta cần add thêm thư viện Jquery

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

Chú ý: Thư viện Jquery có rất nhiều các phiên bản khác nhau. các bạn có thể tham khảo các phiên bản của thư viện Jquery và jquery-ui tại đây: http://api.jqueryui.com/

2.1.Resizeable

Trong HTML chúng ta tạo 1 thẻ div

<div id="resize" class="demodiv">Resize me!</div>

Trong CSS chúng ta chỉnh những thông số ban đầu:

.ui-resizable-helper {
    border: 1px dotted #999;
}
#resize {
    background-color: #ccc;
}
.demodiv {
    height: 150px;
    awidth: 150px;
    float: left;
    margin-left: 5px;
}

Trong Jquery chúng ta gọi hàm resizeable()

$('#resize').resizable({
    helper: "ui-resizable-helper",
    grid: [10, 10]
});

Trong hàm resizeable() có rất nhiều options cho chúng ta có thể điều chỉnh các thẻ div của chúng ta sao cho phù hợp. List các options được liệt kê bên dưới đây:

2.1.Selectable

Trong HTML chúng ta tạo 1 list

<ul id="selezionabile" class="ui-widget">
    <li class="ui-widget-content ui-corner-all">Elemento 1</li>
    <li class="ui-widget-content ui-corner-all">Elemento 2</li>
    <li class="ui-widget-content ui-corner-all">Elemento 3</li>
    <li class="ui-widget-content ui-corner-all">Elemento 4</li>
    <li class="ui-widget-content ui-corner-all">Elemento 5</li>
    <li class="ui-widget-content ui-corner-all">Elemento 6</li>
    <li class="ui-widget-content ui-corner-all">Elemento 7</li>
</ul>

Trong CSS chúng ta chỉnh 1 chút giao diện như sau.

ul {margin: 0; padding: 0; list-style-type: none; awidth: 50%;}
ul li {padding: 0.4em; margin: 0.2em; cursor: pointer; font-size: 0.8em;}
.ui-state-highlight {color: red}

Trong Jquery chúng ta gọi hàm selectable()

$( "#selezionabile" ).selectable({
    selected: function( e, ui ) {
        if ($( ui.selected ).hasClass( "ui-state-highlight" )) {
            $( ui.selected ).removeClass( "ui-state-highlight" );
        } else {
            $( ui.selected ).addClass( "ui-state-highlight" );
        }
    },    
    unselected: function( e, ui ) {
        $( ui.unselected ).removeClass( "ui-state-highlight" );    
    }
});

Trong hàm selectable() có rất nhiều options cho chúng ta có thể điều chỉnh list của chúng ta sao cho phù hợp. Danh sách các options và chức năng cùng cách sử dụng được liệt kê ở bảng bên dưới đây:

3.Kết bài và tài liệu tham khảo

Như vậy là tôi đã giới thiệu xong tới các bạn 2 hàm trong thư viện Jquery UI rất hay được sử dụng đó là resizeable() và selectable(). Tất cả tài liệu tham khảo đầy đủ các bạn có thểm tham khảo thêm tại trang chủ của jqueryui .Chúc bạn có những ứng dụng hay vào trang web của mình.