Đăng Nhập

Vui lòng khai báo chính xác tên truy cập và mật khẩu!

Quên mật khẩu?

Đăng Ký

Bạn phải điền đầy đủ thông tin đăng ký!

  

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

    Quản trị viên

    avatar

    Bài viết : 89

    Tài sản : 275

    Uy tín : 7

    #1

     on 21.08.15 13:45 

    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

    Tags: #jq-plugin
    You cannot reply to topics in this forum