Trang Chính
Latest images
Tìm kiếm
Đăng ký
Đăng Nhập
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
Cách dùng:
Demo: Click vào các liên kết dưới đây
http://jsfiddle.net/baivong/gpvsm/show/
ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet:
ACP >> Modules >> HTML & JAVASCRIPT >> Javascript Codes >> Create a new javascript:
Title: jQuery Plugin zzConfirm v0.1
Placement: In all the pages
Javascript Code * :
1. Xóa bài viết không chuyển trang:
2. Xác nhận trước khi thoát:
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
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ẠI | MẶ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:
| |||
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 đã viết:
- 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
