TẠO MỘT DIALOG “SIÊU TỐC” BẰNG JQUERY UI

1. jQuery UI là gì?

jQuery UI là giao diện người dùng chính thức thư viện jQuery (như chúng ta đã biết jQuery là một thư viện javascript rất phổ biến) . Nó cung cấp sự tương tác, các widget, hiệu ứng, popup, dialog và đề tài cho việc tạo ra các ứng dụng Internet phong phú. Hơn nữa jQuery UI là thư viện miễn phí, phần mềm mã nguồn mở.

Hình ảnh dưới đây là ví dụ về 1 dialog tạo bởi jQuery UI.

Hoặc đây là một ví dụ khác về datepicker tạo bởi jQuery UI

2. Các sử dụng jQuery UI.

Tương tự như việc sử dụng thư viện jQuery thì để sử dụng được thư viện jQuery UI việc đầu tiền ta phải làm là tải các thư viện về. Bạn có thể tải tại link: https://jqueryui.com/download/all/

Khi tải được thư viện về rồi thì chúng ta bắt đầu làm một ví dụ tạo một dialog đơn giản bằng jQuery UI thôi. Let’s go! =))

3. Ví dụ tạo dialog bằng jQuery UI

B1: Nhúng các file thư viện đã tải vào file .html

Có 3 file cần nhúng vào đó là:

B2: Tạo 1 button và 1 dialog để khi nhấn vào button thì dialog của chúng ta hiện ra.

Lưu ý là div chứa dialog ban đầu chúng ta sẽ để display : none. Các bạn có để ý hàm openDialog() ở thẻ button không? Đó là hàm sử dụng jQuery UI để gán sự kiện khi ta click vào button thì dialog của chúng ta sẽ hiện ra. Chúng ta cùng tạo hàm openDialog() ngay thôi!

B3: Tạo function có tên openDialog() để gán sự kiện mở dialog cho button.

SouceCode hoàn chỉnh:

Kết quả:

Trong hàm open openDialog do chúng ta viết thì ta có sử dụng hàm dialog(), đây là hàm có sẵn trong jQuery UI, hàm này có chức năng mở dialog và có một số option để ta có thể custom lại dialog ví dụ như (title, width, height..).

Giải thích một số option:

  • title: “Học jQuery UI” : gán tiêu đề cho dialog.
  • modal: true : đặt giá trị modal là true để các mục khác của trang web sẽ bị vô hiệu hóa dồng thời tạo một lớp phủ màu xám che cả trang web ngoại trừ dialog.
  • width: 400 : Đặt độ rộng cho dialog, ở đây mình đặt là 400px nhưng lưu ý chỉ ghi là 400 không chữ “px” nhé.
  • height: 500 : Tương tự như thuộc tính width.
  • dialogClass: “className” : dialogClass cho phép bạn chúng ta thêm class do mình tự định nghĩa vào dialog.

Còn rất nhiều các option khác ngoài những option cơ bản mình vừa liệt kê trên để chúng ta có thể custom cho dialog. Các bạn có thể tham khảo thêm các option tại đây: https://api.jqueryui.com/dialog/

4. Kết luận.

Trên đây là mình đã giới thiệu cho các bạn về jQuery UI, cách sử dụng jQuery UI để tạo một dialog đơn giản. Ở các bài sau mình sẽ giới thiệu cho các bạn cách

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *