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

  Bài viết hay nhất1
First topic message reminder :

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.


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 okcancel:
  • 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:
KirigayaKazuto wrote:
Code:
/* jQuery plugin zzConfirm v0.2 by zzbaivong (http://devs.forumvi.com) */
#zzConfirm_wrap{background:none repeat scroll 0 0 #222;border:1px solid #555;min-width:140px;position:absolute;text-align:center;z-index:100;padding:7px 13px}
#zzConfirm_content{border-bottom:1px solid #555;color:#DDD;margin-bottom:7px;padding-bottom:5px}
#zzConfirm_btn > div{background:none repeat scroll 0 0 #04B;color:#FFF;display:inline-block;margin-left:10%;width:45%;padding:3px 0}
#zzConfirm_btn > div:last-child{background:none repeat scroll 0 0 #F33}
#zzConfirm_btn > div:first-child{margin-left:0}
#zzConfirm_btn > div:hover{background:none repeat scroll 0 0 #555;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:#444;border-bottom-width:0}
#zzConfirm_wrap.top:after{bottom:-10px;left:50%;margin-left:-10px;border-top-color:#222;border-bottom-width:0}
#zzConfirm_wrap.right:before{top:50%;left:-11px;margin-top:-11px;border-right-color:#444;border-left-width:0}
#zzConfirm_wrap.right:after{top:50%;margin-top:-10px;left:-10px;border-right-color:#222;border-left-width:0}
#zzConfirm_wrap.bottom:before{top:-11px;left:50%;margin-left:-11px;border-bottom-color:#444;border-top-width:0}
#zzConfirm_wrap.bottom:after{top:-10px;left:50%;margin-left:-10px;border-bottom-color:#222;border-top-width:0}
#zzConfirm_wrap.left:before{top:50%;right:-11px;margin-top:-11px;border-left-color:#444;border-right-width:0}
#zzConfirm_wrap.left:after{top:50%;right:-10px;margin-top:-10px;border-left-color:#222;border-right-width:0}

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
  Bài viết hay nhất26
Của mình chỉ có 4 script zzRedirect; jQuery Plugin zzConfirm v0.1; Spoiler; Sửa URL liên kết; Twemoji mà chỉ có Twemoji, zzConfirm với Sửa URL liên kết là đặt In all the pages à, em thấy nó vẫn kết thúc bằng }); nhưng vẫn lỗi, nếu có thể em sẽ gửi nick admin cho anh xem thử
  Bài viết hay nhất27
Xóa cái Twemoji xem.
  Bài viết hay nhất28
Vẫn bị anh ơi
  Bài viết hay nhất29
Tìm trong footer_begin, xóa:
Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  Bài viết hay nhất30
Cảm ơn @Zzbaivong em đã làm được. Cảm ơn anh
You cannot reply to topics in this forum