Salutare tuturor,
In acest tutorial am sa va arat cum puteti obtine un pop-up spre detaliile utilizatorilor atunci cand faceti click pe nume. Acest tutorial se aplica pentru toate versiunile, deci haideti sa incepem.
Demonstratie:
 1. Activarea profilului avansat
Pentru ca acest script sa functioneze trebuie ca profilul avansat sa fie activat pe forumul dvs. Daca utilizati acest tutorial fara profilul avansat, s-ar putea sa apara cateva buguri.
Activarea profilului avansat se face intrand in:
 | Panoul de Administrare~> Utilizatori & Grupuri ~> Utilizatori ~> Profiluri ~> Optiuni generale |
Activare profil avansat: Da
In cazul in care este deja bifata, omiteti acest pas. Daca nu, bifati si apasati pe inregistrare.
2. Instalarea scriptului
Adaugati urmatorul cod in:
| P.A ~> Module ~> HTML & JAVASCRIPT ~> Gestiunea codurilor javascript ~> Creati un nou javascript |
Nume: Profil
Amplasare: Toate paginile
Codul Javascript:
- Cod:
jQuery(function () {
jQuery('li.row a[href*="/u"], .img-whois+p a[href*="/u"], .page-bottom a[href*="/u"], .postprofile a[href*="/u"], p.author a[href*="/u"], form:has(.vf_jumpbox)~a[href*="/u"], .tcr a[href*="/u"], #stats a[href*="/u"], #onlinelist a[href*="/u"], .tcl.tdtopics a[href*="/u"], .pun .user a[href*="/u"], .ipbtable .row1 a[href*="/u"], #fo_stat a[href*="/u"], .activeusers-box a[href*="/u"], td.row3.over a[href*="/u"], .forumline:has(#i_whosonline) a[href*="/u"], span.name a[href*="/u"], span.postdetails a[href*="/u"], #info_open a[href*="/u"]').attr('id', 'profilePopup').click(function(){return false});
jQuery('a[href*="/u"]:has(img)').removeAttr('id').click( function(){window.open(jQuery(this).attr('href'),'_self');});
jQuery('a#profilePopup').click(function(){
var UID = jQuery(this).attr('href');
var UNM = jQuery(this).text();
jQuery('body').append('<div id="profilefilter" style="position:fixed;top:0px;left:0px;right:0px;bottom:0px;background:rgba(0,0,0, 0.5);cursor:pointer;z-index:10;"></div>
<div id="profcont-container" style="background:#ffffff;top:20%;left:15%;right:15%;padding:4px;position:fixed;font-size:12px;border-radius:5px;z-index:50;">
<div id="userprofile" style="max-height:400px;overflow-y:auto;">
<center><span class="profileLoading" style="font-weight:bold;font-size:18px;">Se incarca...<br/><br/></span>
</center>
</div><br/><style type="text/css">#profileLinks a{background: #f1f1f1;padding: 5px;border: 1px solid #d7d7d7;text-decoration: none;color: #222; margin-left: 4px;font-weight: bold;font-size: 11px;box-shadow:inset 1px 1px 1px white, 1px 1px 1px #d7d7d7;}</style><span id="profileLinks"><a href="'+UID+'">Vizualizare profil</a><span id="interactionLinks"> <a href="/privmsg?mode=post&u='+UID.replace('/u', '')+'">Trimite un mesaj privat</a> <a href="/privmsg?mode=post_profile&u='+UID.replace('/u', '')+'">Posteaza in profilul utilizatorului</a><span style="float:right;"><a href="/profile?friend='+UNM.replace(/ /, "+")+'&mode=editprofile&page_profil=friendsfoes">Adauga ca prieten</a></span><br/><br/></span></div>');
jQuery('#userprofile').load(UID + '#cp-main .panel, .forumline:has(#profile-advanced-details), .clear + #profile-advanced-details');
if (!document.getElementById('logout')){jQuery('#interactionLinks').remove();}
jQuery('#profilefilter').click(function () {jQuery('#profilefilter, #profcont-container').remove();});
});
});
Pentru cei care doresc sa editeze aspectul popup-ului, voi expica in detaliu ce clase va trebui sa utilizati.
#profilefilter - Schimbarea culorii de fundal
- Cod:
#profilefilter {
background: #culoare !important;
}
.profileLoading - Schimbarea stilului pentru textul "Se incarca..."
- Cod:
.profileLoading {
background: #culoare !important;
font-size: 16px !important;
}
#profileLinks a - Schimbarea culorii link-urilor din subsol
- Cod:
#profileLinks a{
color: #culoare !important
}
Inlocuiti #culoare cu culoarea dorita.
Si asta a fost tot! 
|
Acasa
Detaliile unui profil intr-un pop-up
Scris de Zeus Vin Mar 07, 2014 8:13 pm
Subiecte similare