Share Xoay một thành phần của website với thư viện jQuery UI Rotatable

filiallion · 04/24/2019

Thư viện jQuery UI Rotatable là một plugin của jQuery dùng để xoay một thành phần nào đó trên website. Các bạn có thể xoay thành phần được cấu hình một cách tự do theo mọi góc độ. Các bạn đừng nhầm lẫn tên của thư viện này với bộ thư viện jQuery UI mà tôi đã từng giới thiệu với các bạn ở những bài viết trước đây. Mặc dù vậy, thư viện jQuery UI Rotatable cũng cần tích hợp bộ thư viện jQuery UI khi sử dụng nó.

Trước khi sử dụng thư viện jQuery UI Rotatable, các bạn cần tích hợp thư viện jQuery và thư viện jQuery UI, sau đó các bạn có thể tải thư viện jQuery UI Rotatable tại địa chỉ https://www.jqueryscript.net/download/jQuery-UI-Rotatable-Elements.zip và tích hợp vào website với nội dung mã lệnh như sau:

HTML:

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

Bây giờ, các bạn có thể tạo một thành phần đơn giản để áp dụng chức năng xoay như sau:

HTML:

<div id="rotatable">
    <img src="path/to/image.jpg">
</div>

Và cài đặt thư viện jQuery UI Rotatable để có thể xoay được thành phần trên với nội dung mã lệnh JavaScript như sau:

JavaScript:

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

Các bạn có thể xem demo cũng như các cấu hình khác của thư viện jQuery UI Rotatable tại địa chỉ https://www.jqueryscript.net/other/jQuery-UI-Rotatable-Elements.html.

Share Xoay một thành phần của website với thư viện jQuery UI Rotatable

filiallion

Administrator