0

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;
    width: 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:

Options Tác dụng Code
alsoResize Một hoặc nhiều yếu tố để thay đổi kích thước đồng bộ với các yếu tố thay đổi kích thước. $(".selector").resizable({ alsoResize: "#mirror" });
animate Họat ảnh với kích thước cuối cùng sau khi thay đổi kích thước. Mặc định là "false" animate: true
animateDuration Thời gian khi sử dụng animate option, có hai sự lựa chọn là "slow" và "fast" animateDuration: "fast"
animateEasing Được áp dụng khi sử dụng option animate Mặc định là "swing" animateEasing: "easeOutBounce"
aspectRatio Có 2 loại là boolean và number. với loại boolean thì mặc định là "false" aspectRatio: true
autoHide Cho dù đang handle thì đối tượng cũng sẽ bị ẩn đi khi người dùng không hover qua element nữa. Mặc định là "false" và chỉ nhận giá trị boolean autoHide: true
cancel Ngăn chặn thay đổi kích thước từ bắt đầu trên các phần tử quy định. cancel: ".cancel"
classes Mặc định: "ui-resizable-se": "ui-icon ui-icon-gripsmall-diagonal-se" classes: {"ui-resizable": "highlight" }
containment Hạn chế sự thay đổi kích thước trong phạm vi của phần tử hoặc khu vực quy định.Có 3 kiểu dữ liệu là Selector or Element và String $( ".selector" ).resizable( "option", "containment", "parent" );
delay Kiểu Number. mặc định là 0. Nếu chỉ định, thay đổi kích thước sẽ không bắt đầu cho đến khi chuột được di chuyển vượt thời gian delay. Điều này có thể giúp ngăn chặn thay đổi kích thước ngoài ý muốn khi nhấp vào một phần tử.Thời gian được tính bằng mili giây delay: 650
disabled Vô hiệu hóa việc thay đổi kích thước nếu set là true. Mặc định là "false" disabled: true
distance Nếu chỉ định, thay đổi kích thước sẽ không bắt đầu cho đến khi chuột được di chuyển xa hơn khoảng cách n pixels. Điều này có thể giúp ngăn chặn thay đổi kích thước ngoài ý muốn khi nhấp vào một phần tử. distance: 50
ghost Nếu thiết lập là true, một yếu tố trợ giúp bán trong suốt được hiển thị cho thay đổi kích thước. Điều này cho phép bạn nhìn thấy trước sự thay đổi. Mặc định là "false" ghost: true
grid Dữ liệu nhập vào dạng mảng 2 chiều cho phép chúng ta điều chỉnh tỉ lệ thay đổi của x so với y. grid: [ 40, 30 ]
handles được sử dụng để thay đổi kích thước theo hướng . có 9 string được sử dụng là n, e, s, w, ne, se, sw, nw, all. Mặc định là "e, s, se" handles: "n, e, s, w"
helper Một tên lớp đó sẽ được thêm vào một yếu tố proxy để vạch ra những thay đổi kích thước trong quá trình kéo của tay cầm thay đổi kích cỡ. Khi thay đổi kích cỡ hoàn tất, các yếu tố gốc có kích thước. helper: "resizable-helper"
maxHeight Chiều cao tối đa có thể thay đổi. Kiểu number. Mặc định là null maxHeight: 240
maxWidth Chiều rộng tối đa có thể thay đổi. Kiểu number. Mặc định là null maxWidth: 222
minHeight Chiều cao tối thiểu có thể thay đổi. Kiểu number. Mặc định là 10 minHeight: 444
minWidth Chiều rộng tối thiểu có thể thay đổi. Kiểu number. Mặc định là 10 minWidth: 333

>>> Demo Resizeable

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; width: 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:

Options Chức năng Cách dùng
appendTo Những yếu tố trợ giúp lựa chọn được appended to. Kiểu: Selector, mặc định là "body" $(".selector").selectable("option", "appendTo", "#someElem");
autoRefresh Option này cho phép làm mới lại vị trí và kích thước của các selectee mỗi khi hoạt động lựa chon được diễn ra. Kiểu là "boolean".Mặc định là "true" $(".selector").selectable("option", "autoRefresh", false);
cancel Cho phép ngăn chặn các lựa chọn nếu bạn bắt đầu trên các element phù hợp với bộ chọn. Kiểu là Selector, Mặc định là: "input,textarea,button,select,option" $(".selector").selectable("option", "cancel", "a,.cancel");
classes Chỉ định thêm các class để thêm vào các element của widget. Bất kỳ class nào được quy định trong phần Theming có thể được sử dụng như là chìa khóa để ghi đè lên giá trị của nó. Để tìm hiểu thêm về các tùy chọn này, hãy kiểm tra learn article about the classes option..Kiểu là "object" $(".selector").selectable("option", "classes.ui-selectable", "highlight");
delay Khoảng thời gian tính bằng mili giây để xác định khi thao tác chọn bắt đầu thực hiện. Điều này giúp ngăn chặn các lựa chọn không mong muốn khi nhấp vào một phần tử.Kiểu Integer, mặc định là 0 $(".selector").selectable("option", "delay", 350);
disabled Vô hiệu hóa selectable nếu set là true. Mặc định là false $( ".selector" ).selectable( "option", "disabled", true );
distance Khoảng cách tính theo điểm ảnh, khi lựa chọn được bắt đầu. Nếu chỉ định một số dương khác 0, lựa chọn sẽ không bắt đầu thực hiện cho đến khi các con chuột đã được kéo xa hơn khoảng cách quy định.Mặc định là 0 $(".selector").selectable("option", "distance", 100);
filter Các yếu tố phù hợp với element con sẽ được thực hiện selectees. $(".selector").selectable("option", "filter", "li");
tolerance Chỉ định chế độ sử dụng để thử nghiệm chọn một mục. Giá trị có thể nhận là: "fit": Lasso chồng lên item hoàn toàn. "touch": Lasso chồng lên mục bằng số lượng bất kỳ. $(".selector").selectable("option", "tolerance", "fit");

>>> Demo Selectable

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()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.


All Rights Reserved

Viblo
Let's register a Viblo Account to get more interesting posts.