Forum dei Forum: Aiuto per Forumattivo
Benvenuti sul forum di supporto di Forumattivo.




Per trarre il massimo vantaggio da tutti i servizi offerti dal nostro forum, effettua il login se sei già un nostro utente oppure registrati per far parte della nostra grande comunità. Il tutto, gratuitamente!

Crea anche tu un forum gratuitamente come questo! Clicca qui

Mi piace: sistema di voto nei messaggi


Tutorial Mi piace: sistema di voto nei messaggi

Messaggio Da MattiaDes il Gio 06 Ago 2015, 22:28

Mi piace: sistema di voto nei messaggi


Buongiorno! Con questo tutorial vedremo come inserire un sistema di voto nei messaggi del proprio forum.  Come prima cosa, come sempre, bisognerà aggiungere un codice CSS nel foglio di stile del proprio forum.

Pannello di amministrazione Visualizzazione Colori "Foglio di stile CSS"


Codice:

      #rep_post .reput_vote {
      background-color: #daedfb;
      color: #666;
      -khtml-user-select: none;
      -moz-transition: all,0.15s;
      -moz-user-select: none;
      -ms-user-select: none;
      -o-transition: all,0.15s;
      -webkit-touch-callout: none;
      -webkit-transition: all,0.15s;
      -webkit-user-select: none;
      background: #f0f0f0 url(https://cdn1.iconfinder.com/data/icons/social-media-13/24/Like-16.png) no-repeat 6px center;
      background-size: 12px;
      clear: both;
      color: #666;
      cursor: pointer;
      display: table;
      font-size: 11px;
      font-weight: 400;
      line-height: 18px;
      margin: 5px;
      padding: 3px 5px 3px 25px;
      text-align: right;
      transition: all,0.15s;
    }
    .reput_vote.zero {
      background-color: #6a6a6a;
    }
      
      
      .BS_like:hover {
      background-color: #daedfb;
      color: #666;
    }
    .BS_like {
      -khtml-user-select: none;
      -moz-transition: all,0.15s;
      -moz-user-select: none;
      -ms-user-select: none;
      -o-transition: all,0.15s;
      -webkit-touch-callout: none;
      -webkit-transition: all,0.15s;
      -webkit-user-select: none;
      background: #f0f0f0 url(https://cdn1.iconfinder.com/data/icons/social-media-13/24/Like-16.png) no-repeat 6px center;
      background-size: 12px;
      clear: both;
      color: #666;
      cursor: pointer;
      display: table;
      font-size: 11px;
      font-weight: 400;
      line-height: 18px;
      margin: 5px;
      padding: 3px 5px 3px 25px;
      text-align: right;
      transition: all,0.15s;
      user-select: none;
    }

    .BS_like:before {
      content: "Mi piace!";
    }
      
      #rep_post .bs_inline {
      list-style: none;
    }
      
      .BS_like:hover {
      background-color: #daedfb;
      color: #666;
    }
      
      #rep_post {white-space: nowrap;margin: 6px 4px;float: right;}
    #rep_post .bs_inline {list-style: none;}
    #rep_post .bs_inline > li {display: inline-block;margin: 0 3px;}
    #rep_post .bs_inline > li:first-child {margin-left: 0;}
    #rep_post .bs_inline img {display: none;}
    #rep_post span img {cursor: pointer;}


    .reput_vote.positive {background-color: #8db13e;}
    .reput_vote.zero {background-color: #6a6a6a;}

    #rep_post .reput_vote:before {
      content: "Likes: ";
    }

Ora, bisognerà aggiungere un nuovo codice javascript. Recati nella seguente pagina:

Pannello di amministrazione Moduli Gestione del codice javascript


- Titolo: Quello che si vuole;

- Posizione: Gli argomenti;

- *Codice: (*Per tutte le versioni dei forum, tratte che per PunBB)

Codice:
  function bestskins_ls() {
       for(var x = $('.vote'), i = 0, vote; (vote = x[i++]); ) {
                    var count = 0,
                          qtd = 0,
                          barra = $('.vote-bar', vote)[0],
                          botao = $('.vote-button', vote)[0];                      
                    if (barra) {
                            var numbarra = barra.title.match(/\d+/g);
                            qtd = Math.round(parseInt( numbarra[1] ) * parseInt( numbarra[0] )) / 100;
                    }
                  
                    //Imagem de reputação
                    var reputation_UP = 'http://www.agrotube.com.br/images/seta_baixo.png';
    
                    botao = botao ? '<li><span onclick="bestskinsVoto(\'' + botao.firstChild.href + '\',this);" class="BS_like"><img src="' + reputation_UP + '" alt="+" class="rep_up"></span></li>' : '<li style="display: none;"><img src="' + reputation_UP + '" alt="+" class="rep_up"></li>';
                    var numrep = '<li>' + (qtd == 0 ? '<span class="reput_vote zero">' + qtd + '</span>' : '<span class="reput_vote positive">' + qtd + '</span>') + '</li>';
                    var htmlFinal =
                    '<div class="rep_bar clearfix" id="rep_post">' +
                    '       <ul class="bs_inline">' + botao + numrep  + '</ul>' +
                    '</div>';
    $('.postbody', vote.parentNode.parentNode.parentNode).append( htmlFinal );
       }
       x.remove();
    };
    function bestskinsVoto(b,a) {
      a.onclick = '#';
        $.get(b, function() {
         a.parentNode.style.display = 'none';
         var verify = a.parentNode.nextSibling.firstChild.innerHTML;
         if(verify == 0) {
         a.parentNode.nextSibling.firstChild.classList.remove('zero'),
         a.parentNode.nextSibling.firstChild.classList.add('positive');
         }
         var c = a.parentNode.nextSibling.firstChild, b = parseInt(/\d+/.exec(c.innerHTML)[0])+1;
         c.innerHTML = c.innerHTML.replace(/\d+/,b);
        });
    };
    if (document.readyState ===  'complete') {
             bestskins_ls();
    } else {
           document.addEventListener('DOMContentLoaded', function() {
             bestskins_ls();
           });
    }

- *Codice: (*Per i forum che hanno come versione PunBB)

Codice:
  function bestskins_ls() {
       for(var x = $('.vote'), i = 0, vote; (vote = x[i++]); ) {
                    var count = 0,
                          qtd = 0,
                          barra = $('.vote-bar', vote)[0],
                          botao = $('.vote-button', vote)[0];                      
                    if (barra) {
                            var numbarra = barra.title.match(/\d+/g);
                            qtd = Math.round(parseInt( numbarra[1] ) * parseInt( numbarra[0] )) / 100;
                    }
                  
                    //Imagem de reputação
                    var reputation_UP = 'http://www.agrotube.com.br/images/seta_baixo.png';
    
                    botao = botao ? '<li><span onclick="bestskinsVoto(\'' + botao.firstChild.href + '\',this);" class="BS_like"><img src="' + reputation_UP + '" alt="+" class="rep_up"></span></li>' : '<li style="display: none;"><img src="' + reputation_UP + '" alt="+" class="rep_up"></li>';
                    var numrep = '<li>' + (qtd == 0 ? '<span class="reput_vote zero">' + qtd + '</span>' : '<span class="reput_vote positive">' + qtd + '</span>') + '</li>';
                    var htmlFinal =
                    '<div class="rep_bar clearfix" id="rep_post">' +
                    '       <ul class="bs_inline">' + botao + numrep  + '</ul>' +
                    '</div>';
         $('.postfoot', vote.parentNode.parentNode.parentNode.parentNode).before( htmlFinal );
       }
       x.remove();
    };
    function bestskinsVoto(b,a) {
      a.onclick = '#';
        $.get(b, function() {
         a.parentNode.style.display = 'none';
         var verify = a.parentNode.nextSibling.firstChild.innerHTML;
         if(verify == 0) {
         a.parentNode.nextSibling.firstChild.classList.remove('zero'),
         a.parentNode.nextSibling.firstChild.classList.add('positive');
         }
         var c = a.parentNode.nextSibling.firstChild, b = parseInt(/\d+/.exec(c.innerHTML)[0])+1;
         c.innerHTML = c.innerHTML.replace(/\d+/,b);
        });
    };
    if (document.readyState ===  'complete') {
             bestskins_ls();
    } else {
           document.addEventListener('DOMContentLoaded', function() {
             bestskins_ls();
           });
    }

- Risultato:


Buona giornata!  :zen:






MattiaDes
Moderattivo
Moderattivo

Sesso : Maschile
Età : 20
Messaggi : 2333
Località : Modena, Italy


Vedere il profilo dell'utente http://www.habbolifeforum.com
MattiaDes è stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto

- Argomenti simili

 
Permesso di questo forum:
Non puoi rispondere agli argomenti in questo forum