Un nou phpBB3 Memberlist

Un nou phpBB3 Memberlist
(phpBB3 numai)

Pentru un demo, vizitaţi acest [You must be registered and logged in to see this link.]. Acest lucru vă va oferi o similare.

În primul rând vizita CSS-ul pentru stilul şi adăugaţi acest lucru:

Code:

.membox {
  float: left;
  padding: 5px;
  border: 1px solid #105289;
  background: #e1ebf2;
  margin: 10px;
  height: 115px;
  width: 165px;
  border-radius: 3px;
  box-shadow: 2px 2px 2px #105289;
}
.membox:hover {  border: 1px solid #c05; }
.membox .showinfo>a img {
  display: block;
  height: 90px;
  width: 90px;
}
.membox .showinfo td {  float: right; }
.membox .showinfo a {  font-weight: bold;  font-size: 11px;}
#memberlist { padding: 15px 5px; margin-bottom: 30px; }
#memberlist .row1, #memberlist .row2, #memberlist tbody, #memberlist thead {display:none}
.memopt {  display: block; }
.memopthead {  text-decoration: underline;  display: block; }
.meminner {
  position: absolute;
  z-index: 999;
  border: 1px solid #c05;
  background: #e1ebf2;
  box-shadow: 2px 2px 2px #666;
  border-radius: 3px;
  padding: 5px;
  width: 120px;
  margin-left: 15px;
}

Aceasta este exact acelaşi stil utilizat ca in imagine [You must be registered and logged in to see this image.] Editaţi-l cum vă rog, totuşi câteva lucruri de acolo ar putea strica complet Up Display, aşa că mai bine doar să te pui cu culori într-adevăr.

Intrati in (PA > Module > HTML & JAVASCRIPT > Gestiunea codurilor JavaScript > Coduri JavaScript > Creeaza un cod JavaScript)
Şi apoi se adaugă in Cod JavaScript :

Code:

$(function(){if(document.getElementById('memberlist')){sortMemlist();}});
function sortMemlist() {
  var x=document.getElementById('memberlist'),
      y=x.getElementsByTagName('tr'),
      headers=y[0].getElementsByTagName('th');
  for(i=1;i<y.length;i++) {
    var outer=document.createElement('div'); outer.className="membox";
    var td=y[i].getElementsByTagName('td');
    outer.innerHTML+="<div onmouseover=\"$('#meminfo"+i+"').show();\" onmouseout=\"$('#meminfo"+i+"').hide();\" class=\"showinfo\">"+ td[1].innerHTML+ "</div>";
    var inner=document.createElement('div'); inner.className="meminner";
    inner.id="meminfo"+i; inner.style.display="none";
    for(j=3;j<td.length-2;j++) {
          if(td[j].innerHTML!='' && td[j].innerHTML!='  ') {
              inner.innerHTML+="<span class='memopthead'>"+headers[j].innerHTML+":</span>";
          }
        inner.innerHTML+="<span class='memopt'>"+td[j].innerHTML+"</span><br>";
    }
    outer.appendChild(inner);
    x.appendChild(outer);
    $($('.showinfo')[i-1]).append(td[td.length-2]).append(td[td.length-1]);
  }
}

Şi ar trebui să fie făcut Wink.
Aşa cum am spune vizita Membri de pe forum, pentru o demonstraţie a ceea ce pare a fi.

---

Tutorial relizat de InFeRn0 | Extream-Suport
Reproducerea acestui tutorial nu este posibila fara acordul nostru, in conformitate cu articolul L122-1 apartinand ICC.

Sursa: [You must be registered and logged in to see this link.]
Translated with Google Translate[/quote]