Share Thay đổi kích thước một thành phần với thư viện jQuery UI Resizable

filiallion · 04/13/2018

Khi các bạn muốn thay đổi kích thước của một thành phần nào đó trên website bằng cách dùng chuột kéo giản hay co lại thì các bạn có thể sử dụng thư viện jQuery UI Resizable. Thư viện jQuery UI Resizable là một thành phần trong bộ thư viện jQuery UI được sử dụng phổ biến hiện nay. Việc sử dụng thành phần Resizable của thư viện jQuery UI cũng giống như thành phần Draggable mà tôi đã giới thiệu ở bài viết "Kéo thả một thành phần với thư viện jQuery UI Draggable".

Để sử dụng thư viện jQuery UI các bạn cần phải tích hợp thư viện jQuery. Các bạn tải thư viện jQuery tại địa chỉ http://jquery.com/download. Ngoài ra, trong gói thư viện jQuery UI cũng đã có sẵn thư viện jQuery để các bạn tích hợp.

Các bạn tải gói thư viện jQuery UI tại địa chỉ http://jqueryui.com/download. Tại trang tải thư viện, các bạn có thể chọn các thành phần mà các bạn cần dùng cũng như chọn mẫu giao diện các bạn muốn sử dụng. Ngoài các thành phần bắt buộc phải có thì tôi khuyên các bạn chỉ nên lựa chọn các thành phần mà các bạn cần dùng để giảm kích thước của thư viện, và với bài viết này thì tôi chỉ sử dụng duy nhất thành phần Resizable.

Các bạn tích hợp thư viện jQuery UI vào website với nội dung mã lệnh như sau:

HTML:

<link href="path/to/jquery-ui.min.css" rel="stylesheet">
<script src="path/to/jquery-ui.min.js"></script>

Và cài đặt thư viện jQuery UI Resizable với nội dung mã lệnh như sau:

JavaScript:

$(function() {
    $('#resizable').resizable();
});

Sau đó để áp dụng thay đổi kích thước với một thành phần nào đó các bạn tham khảo ví dụ sau:

HTML:

<div id="resizable" class="ui-widget-content">Resize me</div>

Các bạn có thể tìm hiểu thêm về thư viện jQuery UI Resizable tại địa chỉ http://jqueryui.com/resizable.

Share Thay đổi kích thước một thành phần với thư viện jQuery UI Resizable

filiallion

Administrator