- vừa được xem lúc

[jQuery] Bài 4 - Sử Dụng Thư Viện jQuery UI

0 0 18

Người đăng: Semi Art

Theo Viblo Asia

Trong khi jQuery chỉ là một thư viện library cung cấp các hàm tiện ích, chủ yếu để giúp chúng ta đơn giản hóa việc thể hiện các thao tác cần thực hiện trong code JavaScript khi làm việc với các phần tử HTML và trình duyệt web; Thì jQuery UI, ở một khía cạnh khác, lại là một library được xây dựng trên nền jQuery, cung cấp các thành phần giao diện người dùng mang tính tiện ích bổ trợ widget cho các giao diện web. Các widget này có thể được sử dụng xen lẫn với các thành phần giao diện người dùng chính component do các framework như Bootstrap cung cấp.

Tải về & Tài liệu sử dụng

Cũng giống với việc sử dụng jQuery, chúng ta có thể xuất phát từ trang chủ https://jqueryui.com/ của thư viện mới để tìm hiểu về các thành phần được cung cấp ở đây. Bạn có thể tải về tệp jqueryui.min.js hoặc trỏ liên kết tham chiếu src của thẻ <script> tới thẳng địa chỉ tải về phiên bản jQuer UI mới nhất của code.jQuery.com.

learn.html

<!doctype html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery UI</title> <link rel="stylesheet" href="/asset/style.css">
</head>
<body> <h1>jQuery UI</h1> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script> <script src="/asset/main.js"></script>
</body>
</html>

Về tổng quan, tài liệu của thư viện jQuery UI gồm các nhóm nội dung chính -

Đối với nhu cầu tự tạo và chia sẻ các widget thì bạn có thể tham khảo thêm các chỉ mục hỗ trợ bao gồm -

Thử sử dụng một widget của jQuery UI

Sau khi chọn một widget trong chỉ mục Widgets, chúng ta sẽ có một trang tài liệu rất dài với khu vực liên kết QuickNav để di chuyển nhanh tới các phần nội dung. Và ở ngay bên dưới là code ví dụ đơn giản nhất bao gồm những thành phần thiết yếu để widget có thể hoạt động được.

accordion.html

<div id="accordion"> <h3>Tiêu đề đầu tiên</h3> <div>Khung nội dung thứ nhất</div> <h3>Tiêu đề thứ hai</h3> <div>Khung nội dung thứ hai</div> <h3>Tiêu đề thứ ba</h3> <div>Khung nội dung thứ ba</div> <h3>Tiêu đề thứ tư</h3> <div>Khung nội dung thứ tư</div> <h3>Tiêu đề thứ năm</h3> <div>Khung nội dung thứ năm</div> </div>
</div>

accordion.js

$( "#accordion" ).accordion();

Sau khi copy/paste phần code ví dụ thì chúng ta thu được kết quả hiển thị đơn giản như thế này.

Lúc này chúng ta đã có thể click chuột vào các tiêu đề để mở xem khung nội dung tương ứng. Khi chọn mở một khung nội dung nào đó thì các khung nội dung khác sẽ tự động được thu lại và ẩn đi, và như vậy là accordion đã hoạt động tốt. 😄

Để viết code CSS cho thành phần này, chúng ta có thể xuất phát từ bộ chọn #accordion trong code HTML ví dụ; Hoặc cuộn trang tài liệu xuống một chút thì chúng ta sẽ có mục Theming của widget này, liệt kê các class sẽ được tạo ra bởi code JavaScript của jQuery UI. Chúng ta cũng có thể xem các class này bằng cách xem cấu trúc của văn bản HTML trong cửa sổ Elements bên cạnh Console.

Như vậy chúng ta đã có thể bắt đầu viết code CSS để widget phù hợp với thiết kế web muốn sử dụng.

accordion.css

.ui-accordion { font-family: 'Times New Roman', Times, serif;
} .ui-accordion-header { font-size: 24px; background: royalblue; color: white; padding: 12px 15px;
} .ui-accordion-content { font-size: 18px; line-height: 1.5; border: 1px solid lightgray; padding: 12px 24px;
}

Như vậy là chúng ta đã có được một thành phần hiển thị nội dung dành cho các bài viết dài và các chỉ mục có sự nối tiếp tương quan. So với accordion mà Bootstrap cung cấp, widget của jQuery UI có cấu trúc HTML đơn giản hơn khá nhiều bởi vì được xây dựng xoay quanh tính năng chính là đóng/mở các khung nội dung tương quan. Bootstrap, ở mặt khác lại cố gắng cung cấp dạng mẫu hoàn chỉnh ngay từ đầu và xử lý nhiều vấn đề liên quan như phong cách hiển thị mặc định. Cả jQuery UI và Bootstrap đều không ràng buộc chúng ta về tên thẻ HTML sử dụng và bạn có thể sử dụng các cấp tiêu đề khác cho các thanh điều khiển accordion.

Về mặt tùy chỉnh hiệu ứng chuyển tiếp đóng/mở thì vẫn trong trang tài liệu của accordion còn có hạng mục Options có một phần nói về phương thức để tùy chỉnh animations. Để tùy chỉnh logic hoạt động tương quan giữa các thành phần thì chúng ta có khung nội dung MethodsEvents. Tất cả đều được liệt kê tổng quan trong khung QuickNav mở đầu.

Tạo bộ code tải về kèm sẵn theme

Đối với một số thành phần tạo giao diện người dùng có nhiều thành phần nhỏ và logic hoạt động phức tạp, việc viết code CSS có thể sẽ rất khó khăn. jQuery UI có cung cấp thêm cho chúng ta một phần mềm Theme Roller trên giao diện web của họ.

Ở đây chúng ta có thể tự cấu hình một theme với tone màu riêng phù hợp với thiết kế web đang có để sử dụng. Sau đó chọn Download theme để tải về.

Kết thúc bài viết

Như vậy là chúng ta đã có phần giới thiệu tổng quan về thư viện jQuery UI. Thư viện này thực sự rất dễ sử dụng và tùy biến, với nhiều widget tiện ích có thể giúp chúng ta nhanh chóng tính hợp một tính năng tương tác với người dùng vào trong một thành phần nào đó của trang web.

Trong bài tiếp theo, chúng ta sẽ cùng xây dựng một widget đơn giản từ các công cụ mà jQuery UI cung cấp. 😄

[jQuery] Bài 5 - Tự Tạo Một Plug-in/Widget Đơn Giản

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 496

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 413

- vừa được xem lúc

Một số phương thức với object trong Javascript

Trong Javascript có hỗ trợ các loại dữ liệu cơ bản là giống với hầu hết những ngôn ngữ lập trình khác. Bài viết này mình sẽ giới thiệu về Object và một số phương thức thường dùng với nó.

0 0 134

- vừa được xem lúc

Tìm hiểu về thư viện axios

Giới thiệu. Axios là gì? Axios là một thư viện HTTP Client dựa trên Promise.

0 0 117

- vừa được xem lúc

Imports và Exports trong JavaScript ES6

. Giới thiệu. ES6 cung cấp cho chúng ta import (nhập), export (xuất) các functions, biến từ module này sang module khác và sử dụng nó trong các file khác.

0 0 93

- vừa được xem lúc

Bài toán đọc số thành chữ (phần 2) - Hoàn chỉnh chương trình dưới 100 dòng code

Tiếp tục bài viết còn dang dở ở phần trước Phân tích bài toán đọc số thành chữ (phần 1) - Phân tích đề và những mảnh ghép đầu tiên. Bạn nào chưa đọc thì có thể xem ở link trên trước nhé.

0 0 228