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:

1. Alert box: Dùng cho các thông báo nhanh
   
2. Confirm box: Dùng cho việc xác nhận đúng/sai, có/không...
   
3. 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/



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:

1. Cách dùng 3 loại boxes riêng:

Code:

$.boxes(mode, arg1[, arg2], callback);

Ví dụ:

2. Cách dùng 3 loại box với plugin rePopup:

Code:

mode(arg1[, arg2], callback);

Ví dụ:

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
});

Hoặc:

Code:

$(selector).boxes({
   param: value
});

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. Code: {    boxes: '<div class="zzBoxes"></div>',    overlay: '<div class="zzBoxes_overlay"></div>',    inner: '<div class="zzBoxes_inner"></div>',    title: '<h2 class="zzBoxes_title"></h2>',    close: '<div class="zzBoxes_close"></div>',    content: '<div class="zzBoxes_content"></div>',    mess: '<div class="zzBoxes_mess"></div>',    input: '<input class="zzBoxes_input" type="text" />',    button: '<div class="zzBoxes_button"></div>',    ok: '<div class="zzBoxes_ok"></div>',    cancel: '<div class="zzBoxes_cancel"></div>' }

(Còn tiếp...)

---

Tags: #jq-plugin