Đăng Nhập

Vui lòng khai báo chính xác tên truy cập và mật khẩu!

Quên mật khẩu?

Đăng Ký

Bạn phải điền đầy đủ thông tin đăng ký!

  


Search found 5 matches for jq-plugin

[jQ plugin] boxes - Thay thế Js popup mặc định của trình duyệt - 21.08.15 13:45

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,...

* Từ giờ mình sẽ gọi inline popup được tạo ra, theo tên của plugin, là boxes.


Demo: http://baivong.github.io/boxes/

Topics tagged under jq-plugin on Zzbaivong forumvi TmxH2V8
Alert box

Topics tagged under jq-plugin on Zzbaivong forumvi 0XqbKCn
Confirm box

Topics tagged under jq-plugin on Zzbaivong forumvi P1pRO5k
Prompt box


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

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:



Hướng dẫn

1. Cách dùng 3 loại boxes riêng:
Code:
$.boxes(mode, arg1[, arg2], callback);

Ví dụ:


2. Cách dùng 3 loại box với plugin rePopup:
Code:
mode(arg1[, arg2], callback);

Ví dụ:


Trong đó:

  • 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




3. Sử dụng plugin boxes với các tham số:
Code:
$.boxes({
   param: value
});

Hoặc:
Code:
$(selector).boxes({
   param: value
});


Tham số

THAM SỐ PHÂN LOẠIMẶC ĐỊNH GHI CHÚ
modeString""Chế độ sử dụng, có 3 chế độ riêng: alert, confirm, prompt
Tham số này đồng thời cũng là class cho boxes được tạo, nên bạn có thể dùng nó để tạo giao diện riêng bằng CSS.
titlehtmlString""Tiêu đề.
messagehtmlString""Nội dung văn bản.
Nếu bạn muốn dùng HTML, bạn phải đặt giá trị false cho tham số messString.
okBtnhtmlString"Xác nhận"Nội dung cho nút Ok.
cancelBtn htmlString"Hủy bỏ"Nội dung cho nút Cancel.
closeBtnhtmlString"Đóng"Nội dung cho nút Close.
inputTxtString""Nội dung mặc định cho Input nhập liệu.
widthString"auto"Chiều rộng. Có thể dùng tất cả đơn vị độ dài.
heightString"auto"Chiều cao. Có thể dùng tất cả đơn vị độ dài.
minWidthInteger250Chiều rộng tối thiểu. Đơn vị px.
minHeightInteger120Chiều cao tối thiểu. Đơn vị px.
maxWidthInteger800Chiều rộng tối đa. Đơn vị px.
maxHeightInteger600Chiều cao tối đa. Đơn vị px.
paddingArray[25, 20]Khoảng đệm quanh nội dung Trên/dưới và Trái/phải.
borderArray[3, 3]Độ dày của viền quanh nội dung Trên/dưới và Trái/phải.
autoCloseInteger0Thời gian(mili giây) boxes tự đóng. Tham số này phải có giá trị lớn hơn 500.
noCloseBooleanfalseKhông đóng boxes khi click vào Ok hoặc Cancel.
clickOutBooleanfalseCho phép đóng boxes khi click ra ngoài nền.
messStringBooleantrueChuyển nội dung message về dạng String. Nếu bạn muốn sử dụng HTML phải đặt nó giá trị false.
autoResizeBooleantrueTự điều chỉnh vị trí và kích cỡ boxes khi trình duyệt thay đổi kích thước.
okBtnShowBooleanfalseHiển thị nút Ok.
cancelBtnShowBooleanfalseHiển thị nút Cancel.
closeBtnShowBooleanfalseHiển thị nút Close.
inputTxtShowBooleanfalseHiển thị Input nhập liệu.
okfunctionfunction() {}Hàm chạy khi nhấn vào nút Ok.
Cancelfunctionfunction() {}Hàm chạy khi nhấn vào nút Cancel.
Closefunctionfunction() {}Hàm chạy khi nhấn vào nút Close.
Inputfunctionfunction() {}Hàm chạy giá trị Input thay đổi.
buttonfunctionfunction() {}Hàm chạy khi nhấn vào nút Ok hoặc Cancel, giá trị trả về tương ứng là truefalse.
helperfunctionfunction() {}Hàm chạy sau khi boxes được tạo xong.
tempPlainObject{}Cấu trúc templates cho boxes, chỉ nên thay đổi trong trường hợp bị trùng class hoặc cần tạo thêm giao diện đặc biệt.
Code:
{
   boxes: '<div class="zzBoxes"></div>',
   overlay: '<div class="zzBoxes_overlay"></div>',
   inner: '<div class="zzBoxes_inner"></div>',
   title: '<h2 class="zzBoxes_title"></h2>',
   close: '<div class="zzBoxes_close"></div>',
   content: '<div class="zzBoxes_content"></div>',
   mess: '<div class="zzBoxes_mess"></div>',
   input: '<input class="zzBoxes_input" type="text" />',
   button: '<div class="zzBoxes_button"></div>',
   ok: '<div class="zzBoxes_ok"></div>',
   cancel: '<div class="zzBoxes_cancel"></div>'
}



(Còn tiếp...)

Zzbaivong

Tags: #jq-plugin

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

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.

Topics tagged under jq-plugin on Zzbaivong forumvi N66sEMf
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:


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

Tags: #jq-plugin

[jQ Plugin] zzImgUr 1.6 - Upload ảnh lên ImgUr dùng HTML5 - 21.08.15 13:43

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:


http://jsfiddle.net/baivong/NvrQX/embedded/result,js,html/

Demo: http://goo.gl/mjYR0fDownload: http://goo.gl/fLc7Yp


Hướng dẫn:

Bước 1: Đăng ký Client ID tại https://api.imgur.com/oauth2/addclient


  • 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:


Bước 2: Cài đặt:
jQuery plugin zzImgUr hoạt động tốt với thư viện jQuery phiên bản 1.9.1 hoặc cao hơn.
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>


Bước 3: Sử dụng

Gọi hàm zzImgUr với tham số tối thiểu là Client ID đã đăng ký ở Bước 1.

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


Trong code trên selector sẽ là nơi công cụ upload được gắn vào.

THAM SỐ PHÂN LOẠIGHI CHÚ
cliendID stringĐây là tham số bắt buộc. Đăng ký tại https://api.imgur.com/oauth2/addclient
mode stringChế độ tải ảnh mặc định, người dùng vẫn có thể chuyển đổi chế độ tải ảnh bằng nút chức năng. Dùng "url" cho chế độ tải ảnh từ liên kết.
format stringCó 7 định dạng BBcode mặc định o|s|b|t|m|l|h và null. Xem thêm hướng dẫn tùy biến bên dưới.
css objectThiết đặt css cho công cụ upload.
max numberGiới hạn số lượng ảnh tải lên trong 1 lượt.
loading image URLBiểu tượng đang tải, hiển thị khi đang tải ảnh.
lang objectTùy chỉnh ngôn ngữ cho các thông báo
success functionHàm chạy sau khi tải ảnh xong
input functionHàm chạy sau khi tạo input
remove functionHàm chạy sau khi ảnh xóa thành công


Các tham số mặc định:

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



Hướng dẫn tùy biến định dạng ảnh:

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


Có 7 giá trị BBcode mặc định tương ứng với 7 hậu tố.
Khi bạn sử dụng riêng từng tên hậu tố, định dạng ảnh sẽ là BBcode với URL là ảnh gốc, còn IMG tương ứng với hậu tố, trừ hậu tố o.
Code:
format = "s" // Ví dụ: [url=http://i.imgur.com/YtCJ2HJs.jpg][img]http://i.imgur.com/YtCJ2HJ.jpg[/img][/url]

Hậu tố o, định dạng ảnh sẽ là BBcode IMG cho ảnh gốc.
Code:
format = "o" // Ví dụ: [img]http://i.imgur.com/YtCJ2HJ.jpg[/img]

Nếu bạn không đặt hậu tố, tức là null, thì định dạng sẽ là URL ảnh gốc.
Code:
format = "" // Ví dụ: http://i.imgur.com/YtCJ2HJ.jpg

Sử dụng hậu tố IN HOA để xuất định dạng BBcode IN HOA.
Code:
format = "O" // Ví dụ: [IMG]http://i.imgur.com/YtCJ2HJ.jpg[/IMG]


Để xuất ra nhiều định dạng ảnh, bạn dùng dấu , để ngăn cách giữa các định dạng.
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]


Để tùy biến, bạn đặt hậu tố vào giữa 2 dấu ngoặc nhọn. Lúc này nó sẽ là URL tương ứng với hậu tố đó.
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' />


Lưu ý: Khi bạn sử dụng từ 2 định dạng ở lên, khi tải xong, sẽ hiển thị 2 định dạng đầu tiên, rê chuột vào để hiện toàn bộ.


Hướng dẫn truy xuất dữ liệu:

Bạn cần quan tâm đến 2 function successremove.
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

Dữ liệu ảnh sau khi tải và sau khi xóa sẽ tương ứng với tùy biến định dạng (format).

  • 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]




Xem ví dụ: http://jsfiddle.net/baivong/cSLgW/
Tags: #jq-plugin

[jQ plugin] replaceText - Thay thế từ một cách đơn giản - 21.08.15 13:42

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>



Cách dùng: Gọi hàm replaceText tại phần tử chứa từ (cụm từ) cần chuyển.

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

Trong đó:
key: Từ (cụm từ) cần thay thế.
value: nội dung sẽ thay thế, có thể sử dụng HTML.
Thêm các cặp key - value tương ứng số từ (cụm từ) cần chuyển, cách nhau bằng dấu phẩy (,) trừ cặp cuối cùng. Ví dụ:
Code:
$(selector).replaceText({
 "devs.forumvi.com": "devs.forumvi.com",
 "admin": "Zzbaivong"
});





Ứng dụng trong forumotion

ACP >> Modules >> HTML & JAVASCRIPT >> Javascript Codes >> Create a new javascript:
Title: replaceText - devs.forumvi.com
Placement: In all the pages
Javascript Code * :
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));


[*]: Để sử dụng những ứng dụng dưới đây, bạn thêm code vào cuối file javascript replaceText đã tạo ở trên.

1 - Việt hóa trang cá nhân:
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"
 });
 }
});


2 - Việt hóa tab trong UCP:
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"
 });
 }
});


3 - Thay thế tên miền cũ trong bài viết:
Code:
$(function () {
 $(".postbody").replaceText({
 "devs.forumvi.com": "devs.cf"
 });
});

Lưu ý: Sử dụng tên miền của bạn.

4 - Đánh dấu các từ khóa quan trọng trong bài viết:
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>"
 });
});

Lưu ý: Trên đây chỉ là ví dụ mẫu, hãy sử dụng những từ khóa của bạn.


Zzbaivong

Tags: #jq-plugin

[jQ plugin] GoogleURLShortener - Rút gọn liên kết sử dụng Google URL Shortener API - 21.08.15 13:41

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>



Cách dùng:

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

Trong đó:

  • 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:



Ví dụ cách sử dụng với thông số cơ bản

HTML
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>

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


http://jsfiddle.net/baivong/LZyr9/embedded/result%2Ccss%2Chtml%2Cjs/


Zzbaivong

Tags: #jq-plugin


Back to top