[jQ plugin] boxes - Thay thế Js popup mặc định của trình duyệt

  Bài viết hay nhất1
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/


Alert box


Confirm box


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


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
});
Hoặc:
Code:
$(selector).boxes({
   param: value
});

Tham số

THAM SỐ PHÂN LOẠIMẶC ĐỊNH GHI CHÚ
modeString""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.
titlehtmlString""Tiêu đề.
messagehtmlString""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.
okBtnhtmlString"Xác nhận"Nội dung cho nút Ok.
cancelBtn htmlString"Hủy bỏ"Nội dung cho nút Cancel.
closeBtnhtmlString"Đóng"Nội dung cho nút Close.
inputTxtString""Nội dung mặc định cho Input nhập liệu.
widthString"auto"Chiều rộng. Có thể dùng tất cả đơn vị độ dài.
heightString"auto"Chiều cao. Có thể dùng tất cả đơn vị độ dài.
minWidthInteger250Chiều rộng tối thiểu. Đơn vị px.
minHeightInteger120Chiều cao tối thiểu. Đơn vị px.
maxWidthInteger800Chiều rộng tối đa. Đơn vị px.
maxHeightInteger600Chiều cao tối đa. Đơn vị px.
paddingArray[25, 20]Khoảng đệm quanh nội dung Trên/dưới và Trái/phải.
borderArray[3, 3]Độ dày của viền quanh nội dung Trên/dưới và Trái/phải.
autoCloseInteger0Thời gian(mili giây) boxes tự đóng. Tham số này phải có giá trị lớn hơn 500.
noCloseBooleanfalseKhông đóng boxes khi click vào Ok hoặc Cancel.
clickOutBooleanfalseCho phép đóng boxes khi click ra ngoài nền.
messStringBooleantrueChuyể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.
autoResizeBooleantrueTự điều chỉnh vị trí và kích cỡ boxes khi trình duyệt thay đổi kích thước.
okBtnShowBooleanfalseHiển thị nút Ok.
cancelBtnShowBooleanfalseHiển thị nút Cancel.
closeBtnShowBooleanfalseHiển thị nút Close.
inputTxtShowBooleanfalseHiển thị Input nhập liệu.
okfunctionfunction() {}Hàm chạy khi nhấn vào nút Ok.
Cancelfunctionfunction() {}Hàm chạy khi nhấn vào nút Cancel.
Closefunctionfunction() {}Hàm chạy khi nhấn vào nút Close.
Inputfunctionfunction() {}Hàm chạy giá trị Input thay đổi.
buttonfunctionfunction() {}Hàm chạy khi nhấn vào nút Ok hoặc Cancel, giá trị trả về tương ứng là truefalse.
helperfunctionfunction() {}Hàm chạy sau khi boxes được tạo xong.
tempPlainObject{}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...)


Zzbaivong
  Bài viết hay nhất2
Xác nhận cho hiện dưới góc đi anh :)
  Bài viết hay nhất3
Gạch, lót sandal hóng tiếp a!
  Bài viết hay nhất4
Bài dài quá nên anh dọn mấy bài tem, gạch nhé (^^^)
  Bài viết hay nhất5
cho phép đào mộ :3, cho hỏi cái code này chèn ở đâu
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>
PS:chờ lâu quá nên nhét đại vào chỗ javascript ròi
  Bài viết hay nhất6
Đây là jQuery Plugin, không phải một Tutorial. Không phải cứ thích là nhét vào được nhé. jQuery Plugin yêu cầu người sử dụng phải có kiến thức về jQuery mới có thể tùy biến và sử dụng.
  Bài viết hay nhất7
vâng, vậy chắc là nó đi kèm vs mỗi sản phẩm mình muốn tạo ra, cảm ơn huynh đã trả lời :3
You cannot reply to topics in this forum