1. Gửi bài viết mới (new topic)

Code:

$.post("/post", {
   mode: "newtopic",
   f: "<forum_id>",
   subject: "<Tiêu_đề>",
   message: "<Nội_dung>",
   post: "Ok"
}).done(function (data) {
   // Xử lý các lỗi từ chối như giới hạn thời gian, chưa đăng nhập, chuyên mục khóa...
   // Xử lý khi gửi thành công
}).fail(function () {
   // Xử lý khi lỗi do sever như rớt mạng, quá tải...
}).always(function () {
   // Xử lý khi kết thúc tiến trình
});

2. Trả lời bài viết (reply)

Code:

$.post("/post", {
   mode: "reply",
   t: "<topic_id>",
   message: "<Nội_dung>",
   post: "Ok"
}).done(function (data) {
   // Xử lý các lỗi từ chối như có người vừa gửi trước đó, giới hạn thời gian, chưa đăng nhập, chủ đề khóa...
   // Xử lý khi gửi thành công
}).fail(function () {
   // Xử lý khi lỗi do sever như rớt mạng, quá tải...
}).always(function () {
   // Xử lý khi kết thúc tiến trình
});

3. Gửi tin nhắn riêng (pm)

Code:

$.post("/privmsg", {
   mode: "post",
   subject: "<Tiêu_đề>",
   message: "<Nội_dung>",
   "username[]": "<Tên_người_nhận>",
   u: "user_id_người_nhận",
   folder: "inbox",
   post: "Ok"
}).done(function (data) {
   // Xử lý các lỗi từ chối như giới hạn thời gian, chưa đăng nhập, sai thông tin người nhận, cấm gửi thư...
   // Xử lý khi gửi thành công
}).fail(function () {
   // Xử lý khi lỗi do sever như rớt mạng, quá tải...
}).always(function () {
   // Xử lý khi kết thúc tiến trình
});

4. Viết lên tường (wall)

Code:

$.post("/privmsg", {
   subject: "<Tiêu_đề>",
   message: "<Nội_dung>",
   username: "<Tên_người_nhận>",
   u: "user_id_người_nhận",
   mode: "post_profile",
   folder: "profile",
   post: "Ok"
}).done(function (data) {
   // Xử lý các lỗi từ chối như giới hạn thời gian, chưa đăng nhập, sai thông tin người nhận, cấm đăng tin...
   // Xử lý khi gửi thành công
}).fail(function () {
   // Xử lý khi lỗi do sever như rớt mạng, quá tải...
}).always(function () {
   // Xử lý khi kết thúc tiến trình
});

5. Liên hệ (contact)

Code:

$.post("/contact", {
   subject: "<Tiêu_đề>",
   message: "<Nội_dung>",
   reg_key: "<Mã_captcha>", // Mã này người dùng nhập từ ảnh: <img src="/antirobot_pic.forum?a=1" alt="regkey" />
   action: "submit"
}).done(function (data) {
   // Xử lý các lỗi từ chối như cấm đăng liên kết, sai mã captcha, cấm liên hệ...
   // Xử lý khi gửi thành công
}).fail(function () {
   // Xử lý khi lỗi do sever như rớt mạng, quá tải...
}).always(function () {
   // Xử lý khi kết thúc tiến trình
})

6. Tìm kiếm thành viên (search user)

Code:

$.get("/search?mode=searchuser&fieldname=username", {
   search_username: "<Từ_Khóa>",
   time: timestamp()
}).done(function (data) {
   // Kết quả tìm kiếm sẽ được liệt kê trong danh sách: $(data).find("#username_list")
   // Xử lý khi tìm kiếm thành công với các trường hợp không tìm thấy, tìm thấy 1 kết quả, tìm thấy nhiều kết quả
}).fail(function () {
   // Xử lý khi lỗi do sever như rớt mạng, quá tải...
}).always(function () {
   // Xử lý khi kết thúc tiến trình
});

7. Sửa thông tin cá nhân (edit profile)

Code:

$.post("/ajax_profile.forum?jsoncallback=?", {
   id: "<field_ID>",
   user: "<user_ID>",
   active: "1",
   content: '[["<field_name>","<Nội dung>"]]',
   tid: $("#qjump input[name='tid']").val()
}, {}, "json").done(function (data) {
   // Xử lý các lỗi từ chối như sai field ID, sai field name, chưa đăng nhập, cấm sửa field...
   // Xử lý khi gửi thành công, kết quả lấy từ: data["<field_ID>"]
}).fail(function () {
   // Xử lý khi lỗi do sever như rớt mạng, quá tải...
}).always(function () {
   // Xử lý khi kết thúc tiến trình
});

8. Bỏ phiếu (vote)

Code:

$.post("<Liên_kết_bỏ_phiếu>").done(function (data) {
   // Xử lý các lỗi từ chối như chưa đăng nhập, đã bỏ phiếu, cấm bỏ phiếu...
   // Xử lý khi bỏ phiếu thành công
}).fail(function () {
   // Xử lý khi lỗi do sever như rớt mạng, quá tải...
}).always(function () {
   // Xử lý khi kết thúc tiến trình
});

Xem ví dụ: http://www.devs.cf/t329-hoi-dap-cach-lam-nut-vote-khong-chuyen-trang?showpost=p2121

9. Bình chọn (poll)

Code:

$.post("/post", {
   t: "<topic_id>",
   topic_id: "<topic_id>",
   "vote_id[]": "<vote_id>",
   mode: "vote",
   tid: $("#qjump input[name='tid']").val(),
   submit: "Ok"
}).done(function (data) {
   // Xử lý các lỗi từ chối như sai topic ID, sai vote id, chưa đăng nhập, cấm bình chọn...
   // Xử lý khi gửi thành công
}).fail(function () {
   // Xử lý khi lỗi do sever như rớt mạng, quá tải...
}).always(function () {
   // Xử lý khi kết thúc tiến trình
});

Xem ví dụ: http://www.devs.cf/t345-code-zzpoll-binh-chon-khong-chuyen-trang?showpost=p2159

Chú ý: Đối với 1, 2, 3, 4 phải tắt chức năng chống ủy quyền, nếu không bạn sẽ cần phải bổ sung tham số auth[]
ACP >> QLTT >> Forum >> Security:
Unauthorize unofficial forms to post messages and private messages on the forum : No

Bước 1: Thêm vào CSS:

Code:

/* zzvote by Zzbaivong - devs.forumvi.com */
div.vote-zzvote{float:left;margin-left:2em}
div.vote-zzvote > a.vote-plus{background:url(//i.imgur.com/1XX8Bz1.png) no-repeat 0/100% transparent;display:inline-block;float:left;width:20px;height:20px;transition:background .3s;-webkit-transition:background .3s;-moz-transition:background .3s}
div.vote-zzvote > a.vote-plus[href=""]{background-image:url(//i.imgur.com/NpqDrus.png);cursor:default}
div.vote-zzvote > a.vote-plus[href="javascript:;"]{cursor:not-allowed;opacity:0.5}
div.vote-zzvote > a.vote-plus[href="javascript:;"] + span.vote-time{opacity:0.5}
div.vote-zzvote > span.vote-time{background:#FFF;display:inline-block;position:relative;line-height:20px;margin-left:10px;border:1px solid #333;border-radius:3px;font-size:12px;padding:0 6px}
div.vote-zzvote > span.vote-time:before{content:" ";display:block;position:absolute;left:-4px;top:50%;margin-top:-4px;width:6px;height:6px;background:#FFF;transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);border-color:#333;border-style:solid;border-width:0 0 1px 1px}
div.vote-zzvote > a.vote-plus[href=""] + span.vote-time{background:#0052FF;color:#FFF;border-color:#0347D6}
div.vote-zzvote > a.vote-plus[href=""] + span.vote-time:before{background:#0052FF;border-color:#0347D6}

Mẫu nút like:

Bước 2: Sửa temp viewtopic_body

Xóa code nút vote mặc định

Code:

<!-- BEGIN switch_vote_active -->
...
<!-- END switch_vote_active -->

Đặt code này ở div.post-options

Code:

<!-- zzvote by Zzbaivong - devs.forumvi.com -->
<div class="vote-zzvote">
   <!-- BEGIN switch_vote_active -->
   <a class="vote-plus" href="<!-- BEGIN switch_vote -->{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}<!-- END switch_vote -->"></a>
   <span class="vote-time" data-vote="<!-- BEGIN switch_bar -->{postrow.displayed.switch_vote_active.L_VOTE_TITLE}<!-- END switch_bar --><!-- BEGIN switch_no_bar -->{postrow.displayed.switch_vote_active.L_VOTE_TITLE}<!-- END switch_no_bar -->">0</span>
   <!-- END switch_vote_active -->
</div>

Đặt code này ở trước div.main-foot

Code:

<!-- zzvote by Zzbaivong - devs.forumvi.com -->
<script type="text/javascript">
//<![CDATA[
$(".vote-zzvote:empty").html('<a class="vote-plus" href="javascript:;"></a><span class="vote-time" data-vote="Message not voted">0</span>'); /* Nút vote rỗng cho trường hợp không có người vote bài của bạn */
$(".vote-time").text(function () {
   var info = $(this).data("vote"); /* Lấy thông tin nút vote */
   if ("Message not voted" != info) { /* Nếu đã có người vote  */
      info = info.split(/\W/),
      time = parseInt(info[7], 10), /* Số lần click vote */
      percent = parseInt(info[4], 10), /* Tỉ lệ %  */
      plus = Math.round(percent / 100 * time); /* Số lần vote cộng */
      /* minus = time - plus; *//* Số lần vote trừ */
      return plus;
   }
});
$(".vote-plus").on("click", function (event) {
   event.preventDefault(); /* Chặn chuyển trang khi nhấn vào nút vote */
   var $this = $(this),
      plus = $this.next();
   if (this.href.indexOf("eval=plus&p_vote") != -1) { /* Nếu nút vote cộng chưa nhấn */
      $this.css("background-image", "url(http://i57.servimg.com/u/f57/17/05/17/70/preloa10.gif)"); /* Hiệu ứng chờ tải dữ liệu */
      $.post(this.href, function () { /* Gửi thông tin vote cộng */
         plus.text(parseInt(plus.text(), 10) + 1); /* Khi gửi thành công thì thêm 1 đơn vị */
         $this.removeAttr("style"); /* Xóa hiệu ứng chờ tải */
      });
      this.href = ""; /* Xóa liên kết vote cộng để không nhấn được nữa */
   }
});
//]]>
</script>

Javascript rút gọn:

zzPoll ^{ver 1.2} đem đến một giao diện bình chọn hiện đại và tiện lợi cho forumotion.

Chức năng

1. Hiệu ứng tăng dần cho biểu đồ khi bình chọn và khi xem kết quả.
   
2. Không chuyển trang khi bình chọn hoặc xem trước.
   
3. Giao diện đáp ứng cho nhiều kích thước diễn đàn, và ổn định cả khi tắt javascript.
   
4. Sửa một số lỗi giao diện ở diễn đàn hẹp ^{ver 1.0}.
   

Demo

Hướng dẫn

Bước 1

CSS:

Code:

/* zzPoll by zzbaivong */
.zzPoll{border:1px solid #DDD;margin-bottom:50px;padding:10px 20px 0 20px}
.zzPoll h3{font-size:16px;height:34px;line-height:31px;position:relative;background:url(//i83.servimg.com/u/f83/16/58/89/73/combo10.png) no-repeat scroll left top transparent;border-bottom:1px solid #DDD;padding-left:40px}
.zzPoll ul{list-style:none outside none;padding:10px 0}
.zzPoll li,#messedit{position:relative;line-height:30px;height:30px}
#poll_result .poll_t{position:absolute;width:24%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;left:0;top:0}
#poll_result .poll_m{height:25px;margin-left:25%;width:60%;float:left}
#poll_result .poll_w{background-color:red;border:5px solid #e6e6e6;float:left;line-height:18px;margin-top:3px;box-shadow:0 0 1px #000;padding:3px 1px}
#poll_result .percent{right:10%!important}
#poll_ballot .poll-c, #poll_ballot .poll-c label{display:block;height:30px;line-height:30px}
#poll_ballot .c_vote{background:url(//i78.servimg.com/u/f78/17/70/81/78/sinchr10.png) no-repeat left center transparent;padding-left:35px;height:30px;display:inline-block;line-height:30px}
#poll_ballot input[type="radio"],#poll_ballot input[type="checkbox"]{display:none!important}
#poll_ballot input[type="checkbox"] + label,#poll_ballot input[type="radio"] + label{cursor:pointer;padding-left:30px;background:url(//i78.servimg.com/u/f78/17/70/81/78/minus10.png) no-repeat left center transparent;height:26px;line-height:26px}
#poll_ballot input[type="checkbox"] + label{background-image:url(//i78.servimg.com/u/f78/17/70/81/78/minus11.png)}
#poll_ballot input[type="checkbox"]:checked + label,#poll_ballot input[type="radio"]:checked + label{background-image:url(//i78.servimg.com/u/f78/17/70/81/78/checkm10.png)!important;color:#0092d5}
#poll_ballot input[type="checkbox"]:disabled + label,#poll_ballot input[type="radio"]:disabled + label{background-image:url(//i79.servimg.com/u/f79/16/48/23/13/delete10.png)!important;color:#999}
.zzPoll .totalvote,#poll_result .poll_m span{position:absolute;right:0}
.zzPoll .frm-buttons{text-align:center;border-top:3px double #DDD;height:50px;line-height:25px;margin:0;padding:10px 0}
.zzPoll .frm-buttons a{margin:0 10px;font-weight:bold;height:30px;line-height:22px;vertical-align:top}

Bước 2

viewtopic_poll_ballot:

Code:

<!-- zzPoll by Zzbaivong - devs.forumvi.com -->
<form id="poll_ballot" class="zzPoll" method="post" action="{S_POLL_ACTION}">
   <h3>
      {POLL_QUESTION} {CLOSE_POLL}
      <span class="totalvote">
      </span>
   </h3>
   <ul>
      <!-- BEGIN poll_option -->
      <li>
         <p class="poll-c">
            <input id="poll{poll_option.POLL_OPTION_ID}" type="{poll_option.POLL_TYPE_BUTTON}" name="vote_id[]" value="{poll_option.POLL_OPTION_ID}" />
            <label for="poll{poll_option.POLL_OPTION_ID}">{poll_option.POLL_OPTION_CAPTION}</label>
         </p>
      </li>
      <!-- END poll_option -->
   </ul>
   <div class="frm-buttons">
      <input type="submit" name="submit" value="Bầu chọn" /> 
      <a href="{U_VIEW_RESULTS}" class="view_vote">Xem kết quả</a>
      {S_HIDDEN_FIELDS}
   </div>
</form>
<script type="text/javascript">
   //<![CDATA[
   function zzPoll(a) {
      $("#poll_ballot .totalvote").empty();
      $("#poll_ballot").hide().after(a.children().hide().fadeIn());
      $("#poll_result .poll_w").attr("data-width", function() {
         return $(this).outerWidth()
      }).width(0);
      $("#poll_result .poll_w").each(function() {
         $(this).animate({
            width: $(this).data("width")
         }, 1500)
      })
   }
   function fixClick() {
      $("#poll_ballot .frm-buttons *").hide();
      $("#poll_ballot .frm-buttons").css("background", "url(http://i57.servimg.com/u/f57/17/05/17/70/preloa10.gif) no-repeat center transparent")
   }
   $("#poll_ballot .view_vote").click(function(a) {
      a.preventDefault();
      fixClick();
      history.replaceState(null, null, "?vote=viewresult");
      $("#poll_ballot .totalvote").html('[ <span style="color:#0056D8">Đang cập nhật...</span> ]');
      $("<div />").load(this.href + " #poll_result", function() {
         zzPoll($(this));
         $("#poll_result .frm-buttons").html('<a class="pClose" href="javascript:;">Quay lại bình chọn</a>');
         $("#poll_result .pClose").click(function() {
            history.replaceState(null, null, location.pathname);
            $("#poll_result").remove();
            $("#poll_ballot").fadeIn();
            $("#poll_ballot .frm-buttons *").show();
            $("#poll_ballot .frm-buttons").removeAttr("style")
         })
      })
   });
   $("#poll_ballot").submit(function(a) {
      var b = $(this).serializeArray(),
         c = $(this).attr("action");
      $.ajax({
         url: c,
         type: "POST",
         data: b,
         success: function(a, d, b) {
            $("<div />").load(location.origin + location.pathname + " #poll_result", function() {
               zzPoll($(this))
            })
         },
         error: function(a, b, c) {
            console.error(b)
         }
      });
      a.preventDefault();
      a.off()
   });
   $("#poll_ballot input[name='submit']").click(function(a) {
      a.preventDefault();
      history.replaceState(null, null, location.pathname);
      $("#poll_ballot .poll-c input:checked").length ? (fixClick(), $("#poll_ballot .totalvote").html('[ <span style="color:#0056D8">Đang cập nhật...</span> ]'), $("#poll_ballot").submit()) : $("#poll_ballot .totalvote").html('[ <span style="color:red">Bạn chưa chọn!</span> ]')
   });
   $(window).one("resize", function() {
      $(".zzPoll .poll_w").css("width", function() {
         return $(this).next().next().text()
      })
   });
   //]]>
</script>

Bước 3

viewtopic_poll_result:

Code:

<!-- zzPoll by Zzbaivong - devs.forumvi.com -->
<div id="poll_result" class="zzPoll">
   <h3>
      {POLL_QUESTION} {CLOSE_POLL}
      <span class="totalvote">
         [
         <strong>{TOTAL_VOTES}</strong>phiếu ]
      </span>
   </h3>
   <ul>
      <!-- BEGIN poll_option -->
      <li>
         <p class="poll_t" title="{poll_option.POLL_OPTION_CAPTION}">{poll_option.POLL_OPTION_CAPTION}</p>
         <div class="poll_m">
            <p class="poll_w" style="width:{poll_option.POLL_OPTION_PERCENT}"></p>
            <span class="result">{poll_option.POLL_OPTION_RESULT}</span>
            <span class="percent">{poll_option.POLL_OPTION_PERCENT}</span>
         </div>
      </li>
      <!-- END poll_option -->
   </ul>
   <!-- BEGIN switch_hide_result -->
   <dl>
      <dt> </dt>
      <dd>{L_POLL_HIDE_RESULT}</dd>
   </dl>
   <!-- END switch_hide_result -->
   <div class="frm-buttons">
      <!-- BEGIN cancel_vote -->
      <a class="c_vote" href="{U_CANCEL_VOTE}">Bỏ bầu chọn</a>
      <!-- END cancel_vote -->
      <!-- BEGIN switch_user_logged_out -->
      <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
      <!-- END switch_user_logged_out -->
   </div>
</div>
<script type="text/javascript">
   //<![CDATA[
   $("#poll_result .poll_w").attr("data-width", function() {
      return $(this).outerWidth()
   }).width(0);
   $(window).on("load scroll", function() {
      $("#poll_result").height() + $("#poll_result").offset().top < $(window).scrollTop() + $(window).height() && ($("#poll_result:not(.displayed) .poll_w").each(function() {
         $(this).animate({
            "width": $(this).data("width")
         }, 1500)
      }), $("#poll_result").addClass("displayed"))
   });
   $("#poll_result .frm-buttons:empty").remove();
   $(window).one("resize", function() {
      $(".zzPoll .poll_w").css("width", function() {
         return $(this).next().next().text()
      })
   });
   //]]>
</script>