jQ plugin: boxes ^{Ver 0.3}
Tác giả: Zzbaivong


Chức năng: jQ plugin boxes giúp bạn tạo các Inline popup một cách dễ dàng, bạn có thể dùng để tạo các lightbox đơn như popup đăng nhập, đăng ký, thông báo, quảng cáo, xem video youtube...
3 kiểu box tương tự javascript popup của trình duyệt:

1. Alert box: Dùng cho các thông báo nhanh
   
2. Confirm box: Dùng cho việc xác nhận đúng/sai, có/không...
   
3. Prompt box: Dùng cho các nhập liệu ngắn, như đăng status, thay avatar,...
   

Alert box


Confirm box


Prompt box

Code:

<!-- style boxes -->
<link rel="stylesheet" type="text/css" href="stylesheets/jquery.boxes.min.css" media="screen" />
<!-- 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 boxes -->
<script type="text/javascript" src="javascripts/jquery.boxes.min.js"></script>
<!-- jQuery plugin boxes repopup -->
<script type="text/javascript" src="javascripts/jquery.boxes.repopup.min.js"></script>

Thông tin cập nhật:

Code:

$.boxes(mode, arg1[, arg2], callback);

Ví dụ:

Code:

mode(arg1[, arg2], callback);

Ví dụ:

• mode: Là tên 3 loại box alert, confirm, prompt.
  
• arg1: Là nội dung bạn muốn hiển thị.
  
• arg2: Chỉ dùng trong Prompt box, là từ gợi ý trong input nhập liệu.
  
• callback: Là hàm hồi quy, nó sẽ trả về kết quả tương ứng khi bạn nhấn button Xác nhận(Ok) hoặc Hủy bỏ(Cancel).
  Kết quả này được lưu vào this.data, giá trị cụ thể như sau:
  
  
  
  • Alert
    
  •       : undefined
    
  • Confirm : true hoặc false
    
  • Prompt  : value(nhập trong input) hoặc null
    
  
  
  

Code:

$.boxes({
   param: value
});

Code:

$(selector).boxes({
   param: value
});

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

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>

Code:

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

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:

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);

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)
            })
         });
      }
   });
});

Code:

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

zzImgUr ^{Ver 1.6}
Tác giả: Zzbaivong

Chức năng:

1. Tải ảnh không giảm chất lượng nhờ dùng host ImgUr.
   
2. Không sử dụng PHP, chỉ dùng HTML5 và javascript, CSS để định dạng.
   
3. Sử dụng dễ dàng 7 định dạng BBcode mặc định, hoặc có thể tùy biến dữ liệu với 7 định dạng link.
   
4. Ảnh sau khi tải lên có thể cập nhật trực tiếp vào khung soạn thảo.
   
5. Có thể xóa ảnh, và loại bỏ dữ liệu trong khung soạn thảo dễ dàng.
   
6. Dễ dàng chuyển đổi 2 phương pháp tải ảnh thông dụng từ máy tính và từ liên kết.
   
7. Giao diện hiện đại với đầy đủ thông tin tiến trình tải ảnh.
   
8. Tự chuyển về giao diện mini khi chiều rộng hẹp hơn 220px.
   
9. Kiểm soát định dạng, các ảnh trùng lặp và giới hạn 10 ảnh tối đa mỗi lượt, giúp tiết kiệm băng thông (vì mỗi app đăng ký trên ImgUr bị giới hạn).
   

Thông tin cập nhật:

• Application name: Đặt tên app tùy ý
  
• Authorization type: Chọn dòng thứ 2 hoặc 3
  
• Authorization callback URL: /
  
• Application website: Tên miền của diễn đàn bạn
  
• Email: Điền email của bạn
  
• Description: Ghi chú cho app
  

Hướng dẫn bằng ảnh:

Code:

<!-- zzImgUr CSS -->
<link rel="stylesheet" href="./source/zzImgUr.css" type="text/css" media="screen" />
<!-- Thư viện jQuery 1.9.1 hoặc cao hơn -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<!-- zzImgUr plugin -->
<script type="text/javascript" src="./source/zzImgUr.js"></script>

Code:

$(selector).zzImgUr({
 cliendID: "CLIEND-ID"
});

Code:

$(selector).zzImgUr({
 cliendID: "CLIEND-ID",
 mode: "file",
 format: "o,",
 css: {
 width: "100%"
 },
 max: 10,
 loading: "./source/images/loading.gif",
 lang: {
 noID: "Ứng dụng chưa đăng ký",
 addImage: "Chọn ảnh",
 addURL: "Thêm URL",
 reset: "Làm mới",
 upload: "Tải lên",
 choose: "Đã chọn",
 waitConnect: "Đang kết nối...",
 waitUpload: "Đang tải lên...",
 noteURL: "Nhập URL ảnh vào đây:",
 errContact: '<a href="http://devs.forumvi.com/t131-jq-plugin-jquery-plugin-zzimgur#831" rel="nofollow" target="_blank">Nhấn vào đây</a> để báo lỗi.',
 errURL: "URL không truy cập được.",
 errSize: "URL lỗi hoặc kích thước quá nhỏ.",
 errRepeat: "URL không hợp lệ hoặc đã được sử dụng."
 },
 success: function (firstVal, arrVal) {
 },
 input: function (arrInput) {
 arrInput.click(function () {
 this.select();
 });
 },
 remove: function (firstVal, arrVal) {
 }
});

Bảng thống kê định dạng ảnh:

Code:

format = "s" // Ví dụ: [url=http://i.imgur.com/YtCJ2HJs.jpg][img]http://i.imgur.com/YtCJ2HJ.jpg[/img][/url]

Code:

format = "o" // Ví dụ: [img]http://i.imgur.com/YtCJ2HJ.jpg[/img]

Code:

format = "" // Ví dụ: http://i.imgur.com/YtCJ2HJ.jpg

Code:

format = "O" // Ví dụ: [IMG]http://i.imgur.com/YtCJ2HJ.jpg[/IMG]

Code:

format = "s, o" // Ví dụ: [url=http://i.imgur.com/YtCJ2HJs.jpg][img]http://i.imgur.com/YtCJ2HJ.jpg[/img][/url] và [img]http://i.imgur.com/YtCJ2HJ.jpg[/img]

Code:

format = "S, O" // Ví dụ: [URL=http://i.imgur.com/YtCJ2HJs.jpg][IMG]http://i.imgur.com/YtCJ2HJ.jpg[/IMG][/URL] và [IMG]http://i.imgur.com/YtCJ2HJ.jpg[/URL]

Code:

format = "<a class='lightbox' href='{o}'><img src='{l}' alt='640x640' /></a>, <img src='{h}' alt='1024x1024' />"
// Ví dụ: <a class='lightbox' href='http://i.imgur.com/YtCJ2HJ.jpg'><img src='http://i.imgur.com/YtCJ2HJl.jpg' alt='640x640' /></a> và <img src='http://i.imgur.com/YtCJ2HJh.jpg' alt='1024x1024' />

Code:

success: function (firstVal, arrVal) {} // Thực hiện sau khi tải ảnh hoàn tất
remove: function (firstVal, arrVal) {} // Thực hiện sau khi xóa ảnh hoàn tất

• firstVal: Giá trị đầu tiên
  
• arrVal: Mảng (array) chứa tất cả các giá trị. Có nghĩa là:
  

  Code:

  firstVal == arrVal[0]

  
  
  

jQ plugin: replaceText ^{Ver 0.3}
Tác giả: Zzbaivong


Chức năng: replaceText giúp bạn thay thế một hoặc nhiều từ (cụm từ) một cách đơn giản và trả lại nội dung đã cập nhật.


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

Code:

<!-- Thư viện jQuery 1.4.3+ -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<!-- replaceText plugin -->
<script type="text/javascript" src="./source/replacetext.js"></script>

Code:

$(selector).replaceText({
 key: value
});

Code:

$(selector).replaceText({
 "devs.forumvi.com": "devs.forumvi.com",
 "admin": "Zzbaivong"
});

Code:

/* jQuery plugin replaceText v0.3 <http://www.devs.cf/> Copyright (c) 2014+ zzbaivong */
(function ($) {
 $.fn.replaceText = function (a) {
 var c = $.extend({}, a);
 return this.each(function (a, f) {
 $(this).html(function () {
 var b = this.innerHTML;
 $.each(Object.keys(c), function (a, d) {
 var e = RegExp(d.replace(/("|\'|\(|\)|\[|\]|\.|\*|\!|\?|\$|\||\+|\^|\/|\,|\;)/g, "\\$1"), "gi");
 b = b.replace(e, c[d])
 });
 return b
 })
 })
 };
}(jQuery));

Code:

$(function () {
 if (_userdata["user_lang"] == "vi" && /\/u\d+/.test(location.pathname)) {
 $("#tabs a > span").replaceText({
 "Visitor messages": "Tường nhà",
 "Statistics": "Hoạt động",
 "Friends": "Bạn bè",
 "Contact": "Liên hệ"
 });
 $("#profile-advanced-details li > label").replaceText({
 "Points": "Tài sản",
 "Average per post": "Trung bình mỗi bài",
 "Reputation": "Uy tín",
 "Positive votes received": "Số phiếu thuận",
 "Negative votes received": "Số phiếu chống",
 "Thanks received": "Được cảm ơn",
 "Positive votes given": "Bỏ phiếu thuận",
 "Negative votes given ": "Bỏ phiếu chống",
 "Thanks given": "Đã cảm ơn",
 "Latest topic": "Lần tạo chủ đề gần đây",
 "Find all topics where": "Tìm tất cả chủ đề",
 "has posted in": "đã thảo luận",
 "Latest post": "Lần đăng bài gần đây",
 "Find all messages posted by": "Tìm tất cả bài viết đăng bởi",
 "Visitor messages number": "Số tin trên tường",
 "Last visitor message": "Lần đăng tin gần đây",
 "visitor messages": "tường",
 "Send a new message on": "Gửi một tin lên tường của",
 " profile": "",
 "Number of friends": "Số bạn bè",
 "Private messages": "Số tin nhắn riêng",
 "Last visit": "Lần truy cập gần đây"
 });
 $("#profile-advanced-details legend").replaceText({
 "Points": "Tài sản",
 "Reputation": "Uy tín",
 "Visitor messages": "Tường nhà"
 });
 $("#profile-advanced-details li").replaceText({
 "</label> Today at": "</label> Hôm nay",
 "</label> Yesterday at": "</label> Hôm qua",
 "</label> Never": "</label> Chưa có"
 });
 $("#profile-advanced-details .message-header").replaceText({
 'title="Message"> by <': 'title="Message"><'
 });
 $("#profile-advanced-details .message-text").replaceText({
 '</a><br>Rank: ': '</a><br>Cấp bậc: '
 });
 $("#profile-advanced-details .message-date").replaceText({
 "Today at": "Hôm nay",
 "Yesterday at": "Hôm qua"
 });
 $("#profile-advanced-details .subtitle").replaceText({
 "Visitor messages": "Tường nhà",
 "Messages from": "đến",
 " on ": " trong ",
 " to ": " đến ",
 "Statistics": "Thống kê hoạt động",
 "friends": "bạn bè",
 "Contact user": "Liên hệ với"
 });
 $("#profile-advanced-details .main-content:not(fieldset)").replaceText({
 "has no friends yet": "chưa có bạn bè",
 "No message.": "Chưa đăng tin"
 });
 }
});

Code:

$(function () {
 if ((GetParam("search_id") == "draftsearch" || GetParam("search_id") == "favouritesearch" || GetParam("search_id") == "watchsearch" || GetParam("mode") == "editprofile") && _userdata["user_lang"] == "vi") {
 $("#tabs a > span").replaceText({
 "Thông báo": "Thông tin",
 "Giao diện": "Tùy chọn",
 "Friends and foes": "Bạn và thù",
 "Notifications": "Thông báo",
 "Topic(s) being watched": "Đang theo dõi",
 "Favourites": "Ưa thích",
 "Drafts": "Nháp",
 "Facebook invite": "Mời bạn facebook",
 "Attachments": "Tệp đính kèm"
 });
 }
});

Code:

$(function () {
 $(".postbody").replaceText({
 "devs.forumvi.com": "devs.cf"
 });
});

Code:

$(function () {
 $(".postbody").replaceText({
 "CSS": "<a href='http://vi.wikipedia.org/wiki/CSS' title='CSS là từ viết tắt của từ viết tắt của Cascading Style Sheet, được dùng để miêu tả cách trình bày các tài liệu viết bằng ngôn ngữ HTML và XHTML.'>CSS</a>",
 "Zzbaivong": "<strong data-tooltip='Người sáng lập devs forumvi'>Zzbaivong</strong>"
 });
});

jQ plugin: GoogleURLShortener ^{Ver 0.1}
Tác giả: Zzbaivong


Chức năng: Rút gọn hoặc Kiểm tra liên kết sử dụng Google URL Shortener API


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

Code:

<!-- Thư viện jQuery 1.2.0+ -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- replaceText plugin -->
<script type="text/javascript" src="./googleurlshortener.min.js"></script>

Code:

$.GoogleURLShortener({
 key: null,
 mode: "auto",
 url: null,
 success: function (url, response) {},
 error: function (message, response) {}
});

• key: API key - khóa này không bắt buộc - dùng để quản lý ứng dụng.
  
• mode: Chuyển đổi chế độ sử dụng long|short|auto
  
  
  
  • long: Tạo URL rút gọn
    
  • short: Lấy URL gốc
    
  • auto: Tự động chọn chế độ theo URL nhập vào
    
  
  
  
• url: URL sẽ được rút gọn hoặc kiểm tra, nhập tương ứng với thông số mode.
  
• success: Xử lý khi hoàn thành
  
• error: Xử lý nếu xảy ra lỗi
  

Hướng dẫn đăng ký API key:

Code:

<form action="javascript:;">
 <input type="url" value="" placeholder="Nhập URL vào đây" required />
 <p style="color:red">Kết quả</p>
 <button>Click</button>
</form>

Code:

$("button").click(function () {
 $.GoogleURLShortener({
 url: $("input").val(),
 success: function (url, response) {
 $("p").text(url);
 },
 error: function (message, response) {
 $("p").text(message);
 }
 });
});