Forum gratuit: forum de suport al utilizatorilor
Doriți să reacționați la acest mesaj? Creați un cont în câteva clickuri sau conectați-vă pentru a continua.

Imi place: Un nou sistem de votare

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Imi place: Un nou sistem de votare

Mesaj Scris de Teodor Lun Mai 11, 2020 12:55 pm

Imi place: Un nou sistem de votare

Salutari  La revedere ,

Cu ajutorul acestui tutorial putem adauga un nou sistem de votare. In primul rand, ca intotdeauna, va trebui sa adaugam un cod CSS in foaia de stil a forumului.

Imi place: Un nou sistem de votare PucePanou de Administrare Imi place: Un nou sistem de votare Arrow10 Afisare Imi place: Un nou sistem de votare Arrow10 Imagini si culori Imi place: Un nou sistem de votare Arrow10 Culori Imi place: Un nou sistem de votare Arrow10 Foaie de stil CSS

Cod:

      #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: "Imi place!";
    }
      
      #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: "Imi place: ";
    }


Acum, urmeaza adaugarea unui cod javascript.
Imi place: Un nou sistem de votare PucePanou de Administrare Imi place: Un nou sistem de votare Arrow10 Module Imi place: Un nou sistem de votare Arrow10 HTML & JAVASCRIPT Imi place: Un nou sistem de votare Arrow10 Gestiunea codurilor JavaScript

Pentru versiunile de forum PunBB


  • Titlu: La alegere
  • Amplasare:Topicuri
  • Cod:

    Cod:

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



Pentru restul versiunilor (Invision, PhpBB2 si phpbb3).


  • Titlu: La alegere
  • Amplasare: Topicuri
  • Cod:

    Cod:

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



Rezultat:

Imi place: Un nou sistem de votare Scherm45Imi place: Un nou sistem de votare Scherm46

Asta a fost tot.  Magie

Teodor

Teodor
Membru onorific
Membru onorific

Mesaje : 371
Varsta : 26
Localizare : Italia
Data înscrierii : 28/03/2016
Mulțumiri : 48
Internet Explorer punBB

http://Lestreghebuone.net
Teodor a fost mulțumit de autorul acestui subiect.

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum