Share
Xem chủ đề cũ hơnGo downXem chủ đề mới hơn
avatar
Sáng lập viên
Sáng lập viên
Posts : 16
Points : 2147483647
Thanked : 36
Xem lý lịch thành viên

[Đóng góp] Zzconfirm - Confirmation bubble - Tạo bong bong xác nhận khi click

on Tue Jun 14, 2016 6:37 pm
Message reputation : 100% (1 vote)
jQ pluginzzConfirm Ver 0.1
Tác giảZzbaivong


Chức năngzzConfirm 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 ĐỊNHGHI CHÚ
contenthtmlString"Bạn chắc chứ?"Nội dung câu hỏi, lời nhắc, ghi chú... 
Ví dụ: "Are you sure?"
langArray["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"]
widthString"auto"Thiết lập chiều rộng mặc định cho bong bóng.
Ví dụ: "150px"
dirString"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"
toggleBooleanfalseẨn/Hiện bong bóng khi click trở lại đối tượng.
Có 2 lựa chọn: true, false
clickOutBooleanfalseẨ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
okFunctionfunction(ele, bubble) {}Hàm chạy khi xác nhận Có (Ok).
Ví dụ: function(ele, bubble) {alert("Ok");}
cancelFunctionfunction(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.

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






Ứ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
Xem chủ đề cũ hơnVề Đầu TrangXem chủ đề mới hơn
Permissions in this forum:
Bạn không có quyền trả lời bài viết