Đă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] zzConfirm - confirmation bubble - Tạo bong bóng xác nhận khi click

    baivong

    Quản trị viên

    baivong

    Bài viết : 89

    Tài sản : 275

    Uy tín : 7

    #1

     21.08.15 13:44 

    jQ plugin: zzConfirm Ver 0.1
    Tác giả: Zzbaivong


    Chức năng: zzConfirm giúp bạn tạo một bong bóng xác nhận khi click vào một đối tượng.

    [jQ plugin] zzConfirm - confirmation bubble - Tạo bong bóng xác nhận khi click N66sEMf
    Giao diện zzConfirm

    Cài đặt: Xem thông tin và cập nhật mới nhất tại: https://github.com/baivong/zzConfirm

    Code:
    <!-- 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 zzConfirm -->
    <link rel="stylesheet" href="./jquery.zzconfirm.min.css" type="text/css" />
    <script type="text/javascript" src="./jquery.zzconfirm.min.js"></script>


    Cách dùng:

    Code:
    $(selector).zzConfirm({
       param: value
    });

    THAM SỐ PHÂN LOẠIMẶC ĐỊNH GHI CHÚ
    content htmlString "Bạn chắc chứ?" Nội dung câu hỏi, lời nhắc, ghi chú...
    Ví dụ: "Are you sure?"
    lang Array ["Có", "Không"] Mảng chứa nội dung cho 2 nút lựa chọn, có thể dùng htmlString.
    Ví dụ: ["Ok", "Cancel"]
    width String "auto" Thiết lập chiều rộng mặc định cho bong bóng.
    Ví dụ: "150px"
    dir String "top" Vị trí hiển thị của bong bóng so với đối tượng.
    Có 4 lựa chọn: "top", "bottom", "left", "right"
    toggle Boolean false Ẩn/Hiện bong bóng khi click trở lại đối tượng.
    Có 2 lựa chọn: true, false
    clickOut Boolean false Ẩn bong bóng khi click ra vùng ngoài bong bóng và đối tượng.
    Có 2 lựa chọn: true, false
    ok Function function(ele, bubble) {} Hàm chạy khi xác nhận Có (Ok).
    Ví dụ:  function(ele, bubble) {alert("Ok");}
    cancel Function function(ele, bubble) {} Hàm chạy khi xác nhận Không (Cancel).
    Ví dụ:  function(ele, bubble) {alert("Cancel");}
    Chú ý: Trong 2 hàm ok và cancel:

    • ele là đối tượng vừa click.
    • bubble là bong bóng xác nhận hiện tại.


    Demo: Click vào các liên kết dưới đây

    http://jsfiddle.net/baivong/gpvsm/show/


    Ứng dụng trong forumotion

    ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet:
    Code:
    /* jQuery plugin zzConfirm v0.2 by zzbaivong (http://devs.forumvi.com) */
    #zzConfirm_wrap{background:none repeat scroll 0 0 #FFF;border:1px solid #DDD;min-width:140px;position:absolute;text-align:center;z-index:100;padding:7px 13px}
    #zzConfirm_content{border-bottom:1px solid #DDD;color:#444;margin-bottom:7px;padding-bottom:5px}
    #zzConfirm_btn > div{background:none repeat scroll 0 0 #004FBC;color:#FFF;display:inline-block;margin-left:10%;width:45%;padding:3px 0}
    #zzConfirm_btn > div:last-child{background:none repeat scroll 0 0 #FF3D3D}
    #zzConfirm_btn > div:first-child{margin-left:0}
    #zzConfirm_btn > div:hover{background:none repeat scroll 0 0 #333;cursor:pointer}
    #zzConfirm_wrap:before,#zzConfirm_wrap:after{position:absolute;display:block;width:0;height:0;content:"";border-color:transparent;border-style:solid}
    #zzConfirm_wrap:before{border-width:11px}
    #zzConfirm_wrap:after{border-width:10px}
    #zzConfirm_wrap.top:before{bottom:-11px;left:50%;margin-left:-11px;border-top-color:#ccc;border-bottom-width:0}
    #zzConfirm_wrap.top:after{bottom:-10px;left:50%;margin-left:-10px;border-top-color:#fff;border-bottom-width:0}
    #zzConfirm_wrap.right:before{top:50%;left:-11px;margin-top:-11px;border-right-color:#ccc;border-left-width:0}
    #zzConfirm_wrap.right:after{top:50%;margin-top:-10px;left:-10px;border-right-color:#fff;border-left-width:0}
    #zzConfirm_wrap.bottom:before{top:-11px;left:50%;margin-left:-11px;border-bottom-color:#ccc;border-top-width:0}
    #zzConfirm_wrap.bottom:after{top:-10px;left:50%;margin-left:-10px;border-bottom-color:#fff;border-top-width:0}
    #zzConfirm_wrap.left:before{top:50%;right:-11px;margin-top:-11px;border-left-color:#ccc;border-right-width:0}
    #zzConfirm_wrap.left:after{top:50%;right:-10px;margin-top:-10px;border-left-color:#fff;border-right-width:0}
    Black Style by KirigayaKazuto:

    ACP >> Modules >> HTML & JAVASCRIPT >> Javascript Codes >> Create a new javascript:
    Title: jQuery Plugin zzConfirm v0.1
    Placement: In all the pages
    Javascript Code * :
    Code:
    /*!
     * jQuery Plugin zzConfirm v0.2
     *
     * by zzbaivong
     * http://devs.forumvi.com/
     */
    (function (a) {
       var h = [];
       jQuery.fn.zzConfirm = function (b) {
          var d = jQuery.extend({
                content: "Bạn chắc chứ?",
                lang: ["Có", "Không"],
                width: "auto",
                dir: "top",
                toggle: !1,
                clickOut: !1,
                ok: function (a, d) {},
                cancel: function (a, d) {}
             }, b),
             e, c, r = function (a, c) {
                var e = a.outerWidth(),
                   q = a.outerHeight(),
                   m = a.offset().top,
                   b = a.offset().left,
                   f = c.outerWidth(),
                   g = c.outerHeight(),
                   n = m + (q - g) / 2,
                   p = b + (e - f) / 2,
                   h = d.dir;
                switch (h) {
                case "top":
                   n = m - g - 10;
                   break;
                case "bottom":
                   n = m + q + 10;
                   break;
                case "left":
                   p = b - f - 10;
                   break;
                case "right":
                   p = b + e + 10
                }
                c.attr("class", h).show().animate({
                   left: p,
                   top: n,
                   opacity: 1
                })
             };
          b = a(this);
          var f = b.selector,
             g;
          h.push(f);
          return b.on("click", function (b) {
             b.preventDefault();
             e = a(this);
             var k = function (c) {
                var b = a("#zzConfirm_wrap");
                c && (b = a('#zzConfirm_wrap[data-selector="' + c + '"]'));
                e.removeClass("zzConfirm_active");
                b.hide().css({
                   left: g,
                   top: "-100px",
                   opacity: 0
                })
             };
             a(".zzConfirm_active").not(e).removeClass("zzConfirm_active");
             if ((b = e.hasClass("zzConfirm_active")) && d.toggle) k();
             else if (!b) {
                e.addClass("zzConfirm_active");
                a("#zzConfirm_wrap").length ? c = a("#zzConfirm_wrap") : (a("body").append('<div id="zzConfirm_wrap" style="width:' + d.width + ';left:50%;top:-100px;display:none"><div id="zzConfirm_content"></div><div id="zzConfirm_btn"><div id="zzConfirm_yes"></div><div id="zzConfirm_cancel"></div></div></div>'), c = a("#zzConfirm_wrap"), g = (a(window).width() - c.outerWidth()) / 2, c.css("left", g));
                a("#zzConfirm_content").html(d.content);
                a("div", "#zzConfirm_btn").off("click").on("click", function () {
                   k()
                });
                a("#zzConfirm_yes").html(d.lang[0]).on("click", function () {
                   d.ok(e, c)
                });
                a("#zzConfirm_cancel").html(d.lang[1]).on("click", function () {
                   d.cancel(e, c)
                });
                c.attr("data-selector", f).css("width", d.width);
                r(e, c);
                var l = !0;
                a(window).resize(function () {
                   l && (setTimeout(function () {
                      r(e.filter(".zzConfirm_active"), c);
                      l = !0
                   }, 100), l = !1)
                });
                d.clickOut && a(document).click(function (b) {
                   a(b.target).closest(c).length || a(b.target).closest(h.join()).length || k(f)
                })
             }
          })
       }
    })(jQuery);

    1. Xóa bài viết không chuyển trang:

    Code:
    $(function () {
       $("a[href*='mode=delete']").zzConfirm({
          content: "Bạn muốn xóa bài viết này?",
          // dir: "left",
          ok: function (ele) {
             var b = ele.closest(".post");
             b.css("opacity", 0.3);
             $.post(ele[0].href, {
                confirm: 1
             }, function (a) {
                b.slideUp(function () {
                   b.remove();
                   $(".post").length || location.replace($(".nav[href^='/f']:last")[0].href)
                })
             });
          }
       });
    });

    2. Xác nhận trước khi thoát:

    Code:
    $(function () {
       $("#logout").zzConfirm({
          content: "Bạn thực sự muốn thoát?",
          // dir: "bottom",
          ok: function (ele) {
             location.replace(ele[0].href);
          }
       });
    });

    Chú ý: Nếu bong bóng bị lệch ra ngoài phạm vi diễn đàn bạn có thể chỉnh hướng cho nó bằng thông số dir (Xóa 2 gạch chéo phía trước).

    Phiên bản áp dụng: phpBB2, phpBB3, punBB, Invision


    Zzbaivong
    Tags: #jq-plugin
      Bài trước | Bài sau
      You cannot reply to topics in this forum

      Similar topics