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! 
|
Indice
Mi piace: sistema di voto nei messaggi
Da MattiaDes Gio 6 Ago 2015 - 22:28
Argomenti simili
Facebook
Twitter
Youtube
