jQ plugin: boxes Ver 0.3
Tác giả: Zzbaivong
Chức năng: jQ plugin boxes giúp bạn tạo các Inline popup một cách dễ dàng, bạn có thể dùng để tạo các lightbox đơn như popup đăng nhập, đăng ký, thông báo, quảng cáo, xem video youtube...
3 kiểu box tương tự javascript popup của trình duyệt:
* Từ giờ mình sẽ gọi inline popup được tạo ra, theo tên của plugin, là boxes.
Demo: http://baivong.github.io/boxes/
![[jQ plugin] boxes - Thay thế Js popup mặc định của trình duyệt TmxH2V8](https://i.imgur.com/tmxH2V8.png)
Alert box
![[jQ plugin] boxes - Thay thế Js popup mặc định của trình duyệt 0XqbKCn](https://i.imgur.com/0XqbKCn.png)
Confirm box
![[jQ plugin] boxes - Thay thế Js popup mặc định của trình duyệt P1pRO5k](https://i.imgur.com/P1pRO5k.png)
Prompt box
Cài đặt: Xem thông tin và cập nhật mới nhất tại: https://github.com/baivong/boxes
1. Cách dùng 3 loại boxes riêng:
2. Cách dùng 3 loại box với plugin rePopup:
Trong đó:
3. Sử dụng plugin boxes với các tham số:
(Còn tiếp...)
Tác giả: Zzbaivong
Chức năng: jQ plugin boxes giúp bạn tạo các Inline popup một cách dễ dàng, bạn có thể dùng để tạo các lightbox đơn như popup đăng nhập, đăng ký, thông báo, quảng cáo, xem video youtube...
3 kiểu box tương tự javascript popup của trình duyệt:
- Alert box: Dùng cho các thông báo nhanh
- Confirm box: Dùng cho việc xác nhận đúng/sai, có/không...
- Prompt box: Dùng cho các nhập liệu ngắn, như đăng status, thay avatar,...
* Từ giờ mình sẽ gọi inline popup được tạo ra, theo tên của plugin, là boxes.
Demo: http://baivong.github.io/boxes/
![[jQ plugin] boxes - Thay thế Js popup mặc định của trình duyệt TmxH2V8](https://i.imgur.com/tmxH2V8.png)
Alert box
![[jQ plugin] boxes - Thay thế Js popup mặc định của trình duyệt 0XqbKCn](https://i.imgur.com/0XqbKCn.png)
Confirm box
![[jQ plugin] boxes - Thay thế Js popup mặc định của trình duyệt P1pRO5k](https://i.imgur.com/P1pRO5k.png)
Prompt box
Cài đặt: Xem thông tin và cập nhật mới nhất tại: https://github.com/baivong/boxes
- Code:
<!-- style boxes -->
<link rel="stylesheet" type="text/css" href="stylesheets/jquery.boxes.min.css" media="screen" />
<!-- Thư viện jQuery 1.7.2+ -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- jQuery plugin boxes -->
<script type="text/javascript" src="javascripts/jquery.boxes.min.js"></script>
<!-- jQuery plugin boxes repopup -->
<script type="text/javascript" src="javascripts/jquery.boxes.repopup.min.js"></script>
- Thông tin cập nhật:
- Ver 0.3:
- Thêm thông số noClose
- Bỏ đối tượng $.boxes.helper vì chỉ đáp ứng boxes mới, gây lỗi khi có nhiều boxes cùng lúc
- Thêm sự kiện click cho trường hợp dùng boxes với selector
Ver 0.2:- Bổ sung các thông số:
minWidth
maxWidth
minHeight
maxHeight
padding
border
messString
inputTxt
helper - Thêm đối tượng $.boxes.helper
- Điều chỉnh đối số this trong các hàm callback
- Sửa lỗi plugin rePopup
Ver 0.1:- Hoàn chỉnh jQuery plugin boxes
- Chuyển javascript popup của trình duyệt bằng plugin rePopup
- Thêm thông số noClose
Hướng dẫn
1. Cách dùng 3 loại boxes riêng:
- Code:
$.boxes(mode, arg1[, arg2], callback);
- Ví dụ:
- Code:
$.boxes('alert', 'Đây là thông báo cho bạn.', function () {
cosole.log(this.data);
// Nhấn Ok : undefined
});
$.boxes('confirm', 'Nhấn một nút bất kỳ!', function () {
cosole.log(this.data);
// Nhấn Ok : true
// Nhấn Cancel : false
});
$.boxes('prompt', 'Nhập tên của bạn?', 'baivong', function () {
cosole.log(this.data);
// Nhấn Ok : 'baivong'
// Nhấn Cancel : null
});
2. Cách dùng 3 loại box với plugin rePopup:
- Code:
mode(arg1[, arg2], callback);
- Ví dụ:
- Code:
alert('Đây là thông báo cho bạn.', function () {
cosole.log(this.data);
// Nhấn Ok : undefined
});
confirm('Nhấn một nút bất kỳ!', function () {
cosole.log(this.data);
// Nhấn Ok : true
// Nhấn Cancel : false
});
prompt('Nhập tên của bạn?', 'baivong', function () {
cosole.log(this.data);
// Nhấn Ok : 'baivong'
// Nhấn Cancel : null
});
Trong đó:
- mode: Là tên 3 loại box alert, confirm, prompt.
- arg1: Là nội dung bạn muốn hiển thị.
- arg2: Chỉ dùng trong Prompt box, là từ gợi ý trong input nhập liệu.
- callback: Là hàm hồi quy, nó sẽ trả về kết quả tương ứng khi bạn nhấn button Xác nhận(Ok) hoặc Hủy bỏ(Cancel).
Kết quả này được lưu vào this.data, giá trị cụ thể như sau: - Alert : undefined
- Confirm : true hoặc false
- Prompt : value(nhập trong input) hoặc null
3. Sử dụng plugin boxes với các tham số:
- Code:
$.boxes({
param: value
});
- Code:
$(selector).boxes({
param: value
});
Tham số
THAM SỐ | PHÂN LOẠI | MẶC ĐỊNH | GHI CHÚ |
mode | String | "" | Chế độ sử dụng, có 3 chế độ riêng: alert, confirm, prompt Tham số này đồng thời cũng là class cho boxes được tạo, nên bạn có thể dùng nó để tạo giao diện riêng bằng CSS. |
title | htmlString | "" | Tiêu đề. |
message | htmlString | "" | Nội dung văn bản. Nếu bạn muốn dùng HTML, bạn phải đặt giá trị false cho tham số messString. |
okBtn | htmlString | "Xác nhận" | Nội dung cho nút Ok. |
cancelBtn | htmlString | "Hủy bỏ" | Nội dung cho nút Cancel. |
closeBtn | htmlString | "Đóng" | Nội dung cho nút Close. |
inputTxt | String | "" | Nội dung mặc định cho Input nhập liệu. |
width | String | "auto" | Chiều rộng. Có thể dùng tất cả đơn vị độ dài. |
height | String | "auto" | Chiều cao. Có thể dùng tất cả đơn vị độ dài. |
minWidth | Integer | 250 | Chiều rộng tối thiểu. Đơn vị px. |
minHeight | Integer | 120 | Chiều cao tối thiểu. Đơn vị px. |
maxWidth | Integer | 800 | Chiều rộng tối đa. Đơn vị px. |
maxHeight | Integer | 600 | Chiều cao tối đa. Đơn vị px. |
padding | Array | [25, 20] | Khoảng đệm quanh nội dung Trên/dưới và Trái/phải. |
border | Array | [3, 3] | Độ dày của viền quanh nội dung Trên/dưới và Trái/phải. |
autoClose | Integer | 0 | Thời gian(mili giây) boxes tự đóng. Tham số này phải có giá trị lớn hơn 500. |
noClose | Boolean | false | Không đóng boxes khi click vào Ok hoặc Cancel. |
clickOut | Boolean | false | Cho phép đóng boxes khi click ra ngoài nền. |
messString | Boolean | true | Chuyển nội dung message về dạng String. Nếu bạn muốn sử dụng HTML phải đặt nó giá trị false. |
autoResize | Boolean | true | Tự điều chỉnh vị trí và kích cỡ boxes khi trình duyệt thay đổi kích thước. |
okBtnShow | Boolean | false | Hiển thị nút Ok. |
cancelBtnShow | Boolean | false | Hiển thị nút Cancel. |
closeBtnShow | Boolean | false | Hiển thị nút Close. |
inputTxtShow | Boolean | false | Hiển thị Input nhập liệu. |
ok | function | function() {} | Hàm chạy khi nhấn vào nút Ok. |
Cancel | function | function() {} | Hàm chạy khi nhấn vào nút Cancel. |
Close | function | function() {} | Hàm chạy khi nhấn vào nút Close. |
Input | function | function() {} | Hàm chạy giá trị Input thay đổi. |
button | function | function() {} | Hàm chạy khi nhấn vào nút Ok hoặc Cancel, giá trị trả về tương ứng là true và false. |
helper | function | function() {} | Hàm chạy sau khi boxes được tạo xong. |
temp | PlainObject | {} | Cấu trúc templates cho boxes, chỉ nên thay đổi trong trường hợp bị trùng class hoặc cần tạo thêm giao diện đặc biệt.
|
(Còn tiếp...)
Zzbaivong