Mãi Không Quên

cộng đồng teen

  • Thống kê diễn đàn


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

 :: PHẦN MỀM- MÁY TÍNH- INTERNET :: Web- Forumotion :: Hướng dẫn- Code

View previous topic View next topic Go down

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

Post by Bui Minh Phong™ 28/5/2014, 9:08 pm

[You must be registered and logged in to see this link.]

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: [You must be registered and logged in to see this link.]

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

[You must be registered and logged in to see this link.]


Ứ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
Bui Minh Phong™
Bui Minh Phong™
Quản Trị Cấp Cao
Quản Trị Cấp Cao

Posts : 3260
Points : 370812
Thanked : 1927
Birthday : 1994-12-18
Status Hãy Lặng Yên Để Cảm Nhận Tình Yêu Xung Quanh Bạn :x
Giới tính : Male Rất dễ thương

Back to top Go down

View previous topic View next topic Back to top

- Similar topics

Mãi Không Quên :: PHẦN MỀM- MÁY TÍNH- INTERNET :: Web- Forumotion :: Hướng dẫn- Code

 
Permissions in this forum:
You cannot reply to topics in this forum