Share Tạo hộp thoại chuyên nghiệp với thư viện jQuery UI Dialog

filiallion · 04/18/2018

Trên các trình duyệt web, các bạn sử dụng JavaScript là có thể tạo các hộp thoại thông báo nhưng những hộp thoại thông báo đó có thiết kế không đồng nhất trên các trình duyệt khác nhau và cũng không được đẹp. Để đồng nhất giao diện hộp thoại thông báo và cũng để tạo ra các hộp thoại được thiết kế đẹp theo chủ đề của website thì tôi giới thiệu với các bạn thư viện jQuery UI Dialog để tạo ra các hộp thoại thông báo chuyên nghiệp. Thư viện jQuery UI Dialog là một thành phần trong bộ thư viện jQuery UI được sử dụng phổ biến hiện nay.

Để 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.

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 Dialog với nội dung mã lệnh như sau:

JavaScript:

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

Sau đó để tạo hộp thoại các bạn tham khảo ví dụ sau:

HTML:

<div id="dialog" title="Title">Content</div>

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

Share Tạo hộp thoại chuyên nghiệp với thư viện jQuery UI Dialog

filiallion

Administrator