Loading…
Vui lòng chờ chút nhé.
-‘๑’ Gamethu.7Forum.Net -‘๑’

-‘๑’ Gamethu.7Forum.Net -‘๑’

+Đăng Nhập

Đăng Ký

Tin game mới


Bạn đang tìm game gì? hãy gõ vào khung tìm kiếm bên dưới nhé!

Go downThông điệp [Trang 1 trong tổng số 1 trang]

nkoxdl

#1 [Share] nút like và dislike on Wed Mar 16, 2016 10:36 am

avatar
avatar
Danh hiệuQuản lý cao cấp

Quản lý cao cấp

Demo:


Hướng dẫn:
- Tạo 1 trang javascript mới
ACP >> Modules >> JavaScript codes management
Title: Like and Dislike
Placement: In all the pages
Code:
$(function() {[size=14][/size]
  // General Configuration of the plugin[size=14][/size]
  var config = {[size=14][/size]
    position_left : true, // true for left || false for right[size=14][/size]
    negative_vote : true, // true for negative votes || false for positive only[size=14][/size]
    vote_bar : true, // display a small bar under the vote buttons[size=14][/size]
   [size=14][/size]
    // button config[size=14][/size]
    icon_plus : '<img src="http://i18.servimg.com/u/f18/18/21/41/30/plus10.png" alt="+"/>',[size=14][/size]
    icon_minus : '<img src="http://i18.servimg.com/u/f18/18/21/41/30/minus10.png" alt="-"/>',[size=14][/size]
   [size=14][/size]
    // language config[size=14][/size]
    title_plus : 'Like %{USERNAME}\'s post',[size=14][/size]
    title_minus : 'Dislike %{USERNAME}\'s post',[size=14][/size]
   [size=14][/size]
    title_like_singular : '%{VOTES} person likes %{USERNAME}\'s post',[size=14][/size]
    title_like_plural : '%{VOTES} people like %{USERNAME}\'s post',[size=14][/size]
   [size=14][/size]
    title_dislike_singular : '%{VOTES} person dislikes %{USERNAME}\'s post',[size=14][/size]
    title_dislike_plural : '%{VOTES} people dislike %{USERNAME}\'s post',[size=14][/size]
   [size=14][/size]
    title_vote_bar : '%{VOTES} people liked %{USERNAME}\'s post %{PERCENT}'[size=14][/size]
  },[size=14][/size]
     [size=14][/size]
     [size=14][/size]
  // function bound to the onclick handler of the vote buttons[size=14][/size]
  submit_vote = function() {[size=14][/size]
    var next = this.nextSibling, // the counter next to the vote button that was clicked[size=14][/size]
        box = this.parentNode,[size=14][/size]
        bar = box.getElementsByTagName('DIV'),[size=14][/size]
        vote = box.getElementsByTagName('A'),[size=14][/size]
        mode = /eval=plus/.test(this.href) ? 1 : 0,[size=14][/size]
        i = 0, j = vote.length, pos, neg, percent;[size=14][/size]
   [size=14][/size]
    // submit the vote asynchronously[size=14][/size]
    $.get(this.href, function() {[size=14][/size]
      next.innerHTML = +next.innerHTML + 1; // add to the vote count[size=14][/size]
      next.title = next.title.replace(/(\d+)/, function(M, $1) { return +$1 + 1 });[size=14][/size]
     [size=14][/size]
      pos = +vote[0].nextSibling.innerHTML;[size=14][/size]
      neg = vote[1] ? +vote[1].nextSibling.innerHTML : 0;[size=14][/size]
      percent = pos == 0 ? '0%' : pos == neg ? '50%' : Math.round(pos / (pos + neg) * 100) + '%';[size=14][/size]
     [size=14][/size]
      if (bar[0]) {[size=14][/size]
        bar[0].style.display = '';[size=14][/size]
        bar[0].firstChild.style.width = percent;[size=14][/size]
        box.title = box.title.replace(/\d+\/\d+/, pos + '/' + ( pos + neg )).replace(/\(\d+%\)/, '(' + percent + ')');[size=14][/size]
      }[size=14][/size]
    });[size=14][/size]
   [size=14][/size]
    // revoke voting capabilities on the post once the vote is cast[size=14][/size]
    for (; i < j; i++) {[size=14][/size]
      vote[i].href = '#';[size=14][/size]
      vote[i].className = vote[i].className.replace(/fa_vote/, 'fa_voted');[size=14][/size]
      vote[i].onclick = function() { return false };[size=14][/size]
    }[size=14][/size]
   [size=14][/size]
    return false;[size=14][/size]
  },[size=14][/size]
     [size=14][/size]
  vote = $('.vote'), i = 0, j = vote.length,[size=14][/size]
  version = $('.bodylinewidth')[0] ? 0 : document.getElementById('wrap') ? 1 : $('.pun')[0] ? 2 : document.getElementById('ipbwrapper') ? 3 : 'badapple', // version check[size=14][/size]
 [size=14][/size]
  // version data so we don't have to redefine these arrays during the loop[size=14][/size]
  vdata = {[size=14][/size]
    tag : ['SPAN', 'LI', 'SPAN', 'LI'][version],[size=14][/size]
    name : ['.name', '.postprofile dt > strong', '.username', '.popmenubutton'][version],[size=14][/size]
    actions : ['.post-options', '.profile-icons', '.post-options', '.posting-icons'][version],[size=14][/size]
  },[size=14][/size]
 [size=14][/size]
  post, plus, minus, n_pos, n_neg, title_pos, title_neg, li, ul, bar, button, total, percent, span, pseudo, vote_bar; // startup variables for later use in the loop[size=14][/size]
 [size=14][/size]
  // prevent execution if the version cannot be determined[size=14][/size]
  if (version == 'badapple') {[size=14][/size]
    if (window.console) console.warn('This plugin is not optimized for your forum version. Please contact the support for further assistance.');[size=14][/size]
    return;[size=14][/size]
  }[size=14][/size]
 [size=14][/size]
  for (; i < j; i++) {[size=14][/size]
    post = $(vote[i]).parentsUntil('.post').parent()[0];[size=14][/size]
    bar = $('.vote-bar', vote[i])[0]; // vote bar[size=14][/size]
    button = $('.vote-button', vote[i]); // plus and minus buttons[size=14][/size]
    pseudo = $(vdata.name, post).text() || 'MISSING_STRING'; // username of the poster[size=14][/size]
    ul = $(vdata.actions, post)[0]; // post actions[size=14][/size]
    li = document.createElement(vdata.tag); // vote system container[size=14][/size]
    li.className = 'fa_reputation';[size=14][/size]
   [size=14][/size]
    if (li.tagName == 'SPAN') li.style.display = 'inline-block';[size=14][/size]
   [size=14][/size]
    // calculate votes[size=14][/size]
    if (bar) {[size=14][/size]
      total = +bar.title.replace(/.*?\((\d+).*/, '$1');[size=14][/size]
      percent = +bar.title.replace(/.*?(\d+)%.*/, '$1');[size=14][/size]
     [size=14][/size]
      n_pos = Math.round(total * (percent / 100));[size=14][/size]
      n_neg = total - n_pos;[size=14][/size]
    } else {[size=14][/size]
      n_pos = 0;[size=14][/size]
      n_neg = 0;[size=14][/size]
    }[size=14][/size]
   [size=14][/size]
    // set up negative and positive titles with the correct grammar, votes, and usernames[size=14][/size]
    title_pos = (n_pos == 1 ? config.title_like_singular : config.title_like_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_pos);[size=14][/size]
    title_neg = (n_neg == 1 ? config.title_dislike_singular : config.title_dislike_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_neg);[size=14][/size]
   [size=14][/size]
    // define the vote counts[size=14][/size]
    li.innerHTML = '<span class="fa_count fa_positive" title="' + title_pos + '">' + n_pos + '</span>' + (config.negative_vote ? '&nbsp;<span class="fa_count fa_negative" title="' + title_neg + '">' + n_neg + '</span>' : '');[size=14][/size]
    span = li.getElementsByTagName('SPAN'); // get the vote count containers for use as insertion points[size=14][/size]
   [size=14][/size]
    // create positive vote button[size=14][/size]
    plus = document.createElement('A');[size=14][/size]
    plus.href = button[0] ? button[0].firstChild.href : '#';[size=14][/size]
    plus.onclick = button[0] ? submit_vote : function() { return false };[size=14][/size]
    plus.className = 'fa_vote' + (button[0] ? '' : 'd') + ' fa_plus';[size=14][/size]
    plus.innerHTML = config.icon_plus;[size=14][/size]
    plus.title = (button[0] ? config.title_plus : title_pos).replace(/%\{USERNAME\}/g, pseudo);[size=14][/size]
   [size=14][/size]
    span[0] && li.insertBefore(plus, span[0]);[size=14][/size]
   [size=14][/size]
    // create negative vote button[size=14][/size]
    if (config.negative_vote) {[size=14][/size]
      minus = document.createElement('A');[size=14][/size]
      minus.href = button[1] ? button[1].firstChild.href : '#';[size=14][/size]
      minus.onclick = button[1] ? submit_vote : function() { return false };[size=14][/size]
      minus.className = 'fa_vote' + (button[1] ? '' : 'd') + ' fa_minus';[size=14][/size]
      minus.innerHTML = config.icon_minus;[size=14][/size]
      minus.title = (button[1] ? config.title_minus : title_neg).replace(/%\{USERNAME\}/g, pseudo);[size=14][/size]
     [size=14][/size]
      span[1] && li.insertBefore(minus, span[1]);[size=14][/size]
    }[size=14][/size]
   [size=14][/size]
    // create vote bar[size=14][/size]
    if (config.vote_bar) {[size=14][/size]
      vote_bar = document.createElement('DIV');[size=14][/size]
      vote_bar.className = 'fa_votebar';[size=14][/size]
      vote_bar.innerHTML = '<div class="fa_votebar_inner" style="width:' + percent + '%;"></div>';[size=14][/size]
      vote_bar.style.display = bar ? '' : 'none';[size=14][/size]
      li.title = config.title_vote_bar.replace(/%\{USERNAME\}/, pseudo).replace(/%\{VOTES\}/, n_pos + '/' + (n_pos + n_neg)).replace(/%\{PERCENT\}/, '(' + percent + '%)');[size=14][/size]
      li.appendChild(vote_bar);[size=14][/size]
    }[size=14][/size]
   [size=14][/size]
    // finally insert the vote system and remove the default one[size=14][/size]
    config.position_left ? ul.insertBefore(li, ul.firstChild) : ul.appendChild(li);[size=14][/size]
    vote[i].parentNode.removeChild(vote[i]);[size=14][/size]
  }[size=14][/size]
});

- Thêm đoạn này vào CSS:
Code:
.fa_vote, .fa_voted, .fa_count {[size=14][/size]
  font-size:12px;[size=14][/size]
  font-family:Verdana, Arial, Helvetica, Sans-serif;[size=14][/size]
  display:inline-block !important;[size=14][/size]
  width:auto !important;[size=14][/size]
  transition:300ms;[size=14][/size]
}[size=14][/size]
 [size=14][/size]
.fa_voted, .fa_vote:hover { opacity:0.4 }[size=14][/size]
.fa_voted { cursor:default }[size=14][/size]
 [size=14][/size]
.fa_count {[size=14][/size]
  font-weight:bold;[size=14][/size]
  margin:0 3px;[size=14][/size]
  cursor:default;[size=14][/size]
}[size=14][/size]
 [size=14][/size]
.fa_positive { color:#4A0 }[size=14][/size]
.fa_negative { color:#A44 }[size=14][/size]
 [size=14][/size]
.fa_votebar, .fa_votebar_inner {[size=14][/size]
  background:#C44;[size=14][/size]
  height:3px;[size=14][/size]
}[size=14][/size]
 [size=14][/size]
.fa_votebar_inner {[size=14][/size]
  background:#4A0;[size=14][/size]
  transition:300ms;[size=14][/size]
}

Tùy biến Code:
Trong đoạn JS trên:

Code:
position_left : true, // true for left || false for right
   negative_vote : true, // true for negative votes || false for positive only
   vote_bar : true, // display a small bar under the vote buttons

Có chú thích trong code
position_left : các bạn dùng lệnh true để nút nằm bên trái và ngược lại lệnh false để di chuyển nút sang phải

negative_vote : khi các bạn sử dụng lệnh true thì sẽ xuất hiện cả 2 nút Like và Dislike ngược lại nếu nếu các bạn dùng lệnh false thì sẽ bỏ đi Dislike


vote_bar : true để mở vote (Like và Dislike), ngược lại false để tắt



- Thay đổi nút Like và Dislike:
Tìm đoạn này trong js:



Code:
// button config
   icon_plus : '<img src="http://i18.servimg.com/u/f18/18/21/41/30/plus10.png" alt="+"/>',
   icon_minus : '<img src="http://i18.servimg.com/u/f18/18/21/41/30/minus10.png" alt="-"/>',

Thay link ảnh trong đoạn code này




Code:
 icon_plus : '<img src="http://i18.servimg.com/u/f18/18/21/41/30/plus10.png" alt="+"/>',
    icon_minus : '<img src="http://i18.servimg.com/u/f18/18/21/41/30/minus10.png" alt="-"/>',

- Thay đổi tooltip 
Tìm đoạn code này:




Code:
    // language config
  title_plus : 'Like %{USERNAME}\'s post',
    title_minus : 'Dislike %{USERNAME}\'s post',
  
    title_like_singular : '%{VOTES} person likes %{USERNAME}\'s post',
    title_like_plural : '%{VOTES} people like %{USERNAME}\'s post',
  
    title_dislike_singular : '%{VOTES} person dislikes %{USERNAME}\'s post',
    title_dislike_plural : '%{VOTES} people dislike %{USERNAME}\'s post',
  
    title_vote_bar : '%{VOTES} people liked %{USERNAME}\'s post %{PERCENT}'
},

sửa thành:


Code:
   // language config
    title_plus : 'Like %{USERNAME}\'s post',
    title_minus : 'Dislike %{USERNAME}\'s post',
  
    title_like_singular : '%{VOTES} người thích bài của %{USERNAME}\'s',
    title_like_plural : '%{VOTES} người thích bài của %{USERNAME}\'s',
  
    title_dislike_singular : '%{VOTES} người không thích bài của %{USERNAME}\'s',
    title_dislike_plural : '%{VOTES} người không thích bài của %{USERNAME}\'s',
  
    title_vote_bar : '%{VOTES} người thích bài của %{USERNAME}\'s %{PERCENT}'
  },

Các bạn có thể tùy biến theo ý mình :D

Về Đầu TrangThông điệp [Trang 1 trong tổng số 1 trang]


« Xem bài truớc | Xem bài kế tiếp »

Facebook comment