Cred că tot ce se vede pe multe site-uri de rang în formă de stele, cu posibilitatea de a părăsi votul. Asta e doar ceea ce vom face în această lecție. Scrieți script-ul va fi de la zero, folosind cunoștințele lor, dar ce se întâmplă dacă am uitat ceva, puteți arunca o privire mereu în cribs pe Ruseller.com
Nerăbdător poate vedea în demo, rezultatul final;)
HTML - Cadrul de script-ul
Schematic Evaluarea noastră viitoare ar trebui să arate astfel:
În #raiting_star nostru de rating - este de 2 blocuri. În primul rând - #raiting - vor trăi stelele noastre și același utilizator va face o evaluare. În al doilea rând - #raiting_info - aici vom pune icoana ajax-loader la trimiterea de date la server, și de aici deducem răspunsul de la server.
În #raiting blocul de care avem nevoie pentru a arăta stelele în trei state - care arată actualul rating, alegerea de stele, atunci când prezentați și stelele goale. Așa că blocul #raiting trebuie să conțină în sine 3 blocuri. Pentru blocul #raiting_info la El ne vom întoarce mai târziu, dar acum doar pentru a pune un text al cincilea titlu. Aici se obține un cadru simplu:
CSS - atașați de rating de aspect
Arată stele va fi în același fișier. Iată o poză pe care am găsit pentru scenariul nostru:
prima serie vom folosi la #raiting_blank. al doilea la rezultatul #raiting_votes vot. pentru a treia oară #raiting_hover de vot. Că blocurile noastre sunt aranjate unul deasupra celuilalt, care au nevoie să ceară aceeași poziționare cu respect #raiting. Și cel mai #raiting cere folie, astfel încât să nu #raiting_info lăsat sub ea. Bazat pe cele de mai sus pentru a crea un stil:
Deci, în momentul în care aveți nevoie de un browser pentru a fi plictisitoare gri 5 stele și un text. Pe baza celor de mai sus, vom corecta problema.
ruseller.com avertizează - :) dependență jquery Nu uitați să-l conectați, atunci vom lucra cu el.
În momentul de față, prima noastră sarcină - în funcție de rating-ul articolului pentru a seta lățimea blocului cu #raiting_votes stele aurii. care blochează parțial (sau complet) blochează stelele gri. În viitor, vom primi rating-ul din baza de date și de a salva rezultatul votului acolo, care se calculează pe baza evaluării pur și simplu prin calcularea punctajului mediu. Și, în timp ce noi predstvait ca și în cazul în care în articolul nostru 4.5-:
pentru că lățimea unei singure stele este 16px, respectiv #raiting_votes lățimea blocului este egal cu 17px * nominal (plus 1 pixel golurile dintre stele). Astfel, o star_widht variabilă skid dorită Lățimea blocului. Salvare, verificați. Deja ceva similar. Puteți afișa rating ca numere din blocul #raiting_info:
Sarcina noastră acum este atunci când treceți cu mouse-ul pe rezultatele de rating pentru a ascunde și arată stelele pentru a selecta estimarea mișcării cu mouse-ul:
Există, de asemenea, nimic fantezie. Când treceți peste #raiting comuta #raiting_votes „vizibilitate“ și blocuri #raiting_hover. Același lucru se face atunci când mouse-ul părăsește zona #raiting. Acum, când te-a lovit zona Mîșkin #raiting, #raiting_votes unitate vom dispărea, și va fi înlocuit cu un #raiting_hover bloc, adevărul este încă lățimea de zero, deci suntem în această etapă se va vedea blocul de stele gri #raiting_blank.
Acum este timpul pentru a bloca #raiting_hover.
Avem nevoie pentru a obține #raiting_hover lățime aliniată cu mouse-ul pe reytenge. Odată ce codul, și apoi voi explica:
Valoarea inițială margin_doc Evaluarea padding derapare în raport cu documentul. Apoi, atunci când se execută un mouse de evaluare a determina poziția curentă a mouse-ului. Widht_votes diferență este distanța până la care mouse-ul a fugit de la #raiting marginea din stânga. Mai multe funcții sunt descrise în jQuery pat de copil
Acum, știind distanța că mouse-ul a scăpat, calcula utilizatorul estimare user_votes. widht_votes / 17 - aici 17 - 1 este latimea Star (pe distanța interstelar.). Math.ceil rotunjirea rezultatul până la cel mai apropiat întreg. Astfel, în cazul în care utilizatorul este în orice parte a stelelor, vom fi luate în considerare pentru întreaga evaluare. Și, în ultimul rând înmulțim estimarea utilizatorului 17, în scopul de a obține lățimea unității de afișare #raiting_hover.
În continuare avem nevoie pentru a aranja pentru a trimite utilizatorului la evaluarea serverului. În acest articol nu vor fi luate în considerare php-mysql parte, ca Obiectivul acestei lecții - punerea în aplicare a widget-ului „Star Rating“. Va fi necesar - scriere)
Deci, în acest tutorial, vom crea doar un raiting.php handler fișier cu câteva linii de cod:
Aici dormi (1) întârzie executarea HA1 script-al doilea - trebuie doar pentru a testa serverul local (voi explica mai târziu de ce). $ _GET [ "user_votes"] și $ _GET [ "id_arc"] acest lucru, vom veni variabile, evaluarea și, respectiv, articolul id.
Handler-am lăsat să trimită un aviz de identitate și a articolului. pentru că avem orice articole specifice în această lecție nu este, variabila id_arc atribuie orice valoare întreagă-numerică, de exemplu 55. Pentru a trimite date către server va fi făcând clic pe clasament, în același timp, trebuie să arătăm pictograma tradițională ajax de încărcare, astfel încât unitatea de schimbare primul bit #raiting_info:
Aici am adăugat doar Ajax-icon. Pentru stiluri ei Prescrie:
Ei bine, acum handler efectiv în jQuery:
Este destul de simplu. Permiteți-mi să explic o linie de $ ( „# raiting_votes“) Lățimea ((total_reiting + user_votes) * 17/2.) - făcând clic, ar trebui să setați o nouă lățime unitate de valoare cu stele aurii.
Pentru a adăuga până la această estimare disponibilă din evaluarea de utilizator și împărțit la 2 (adică, vom găsi media). astfel găsi noi de rating de valoare prin înmulțirea cu 17, obținem lățime, ceea ce este necesar pentru a arăta unitatea de stele aurii.
Și, în sfârșit, să introducă un control pe cookie-uri, utilizatorul a votat sau nu pentru acest articol.
Noi vindem prin jquery.cookies plug-in:
Nu uitați să conectați plugin-ul la pagina dvs. (disponibil în arhivă) și asigurați-vă că pentru a introduce sarcina id_arc variabila = 55; în samoenachalo. Toate js cod de verificare (explicate mai jos):
Publicat: $ ( "# Evaluare") unbind () ;. - dezlega toate stivuitoare eveniment din clasament, după vot de rating-ul arată doar rezultatele.
Așa la zero, am scris scenariul „evaluare cu stele“. După cum puteți vedea punerea în aplicare este foarte simplu. Dacă nu înțeleg valoarea unei funcții (metoda) jquery, puteți face referire la o foaie de ieftin. postat pe site-ul nostru.
Dorințe și sugestii în comentarii. Vă mulțumesc pentru atenție, un week-end frumos!
5 lecții coloana ultima „jQuery“
Astăzi am dori să vă spun despre TypeIt bibliotecă - gratuit jQuery plugin. Puteți să-l utilizați pentru a simula tastare. Dacă totul este configurat corect, acesta este un efect foarte realist poate fi atins.
jQuery plug-in pentru a crea o cronologie.
jQuery plugin pentru a crea o diagramă Gantt.
Un exemplu despre cum să pună în aplicare fișierul de descărcare prin intermediul PHP și jQuery ajax.
codul sursă nu este de lucru
AndreyZhdanov
Sunt întru totul de acord cu Alexander, dacă faci bine, în caz contrar este mai bine să nu facă.
Păstrați Andrew și Alexander! Eugene Stytsenkov vă rugăm să add-on pentru acest articol. Aș dori să văd soluția completă. Arată cum să-l facă pe acest site.
EvgeniyStytsenkov
Alexander, somn (1) stabilește performanța de întârziere php-script pentru o secundă în exemplul trebuie doar pentru a testa la un mashtne local, a se vedea cererea de trimitere. această linie poate fi îndepărtat deloc. Scopul acestui articol - punerea în aplicare partea de client. Acestea au venit la server-ul dvs., apoi face cu ei ceea ce vrei, deși scrie baze de date, cel puțin în fișierele. Există clase anterioare în cazul în care de rating (vot) sa ocupat cu un record în baza de date, partea de server poate fi scos, nu este dificil.
Multumesc pentru raspuns! Eu cu siguranță ar dori să încerc script-ul în acțiune, dar am găsit adevărul este deja o alta cu o conexiune la baza de date, dar fără jquery, și funcționează mare.
AndreyZhdanov
Alexander, vă rugăm să nu ezitați să arunce de pe link-ul de la script-ul, sau săpun [email protected] Multumesc
Nu pot prekripit aceste stele pentru site-ul lor. Sunt folosind fișierele PHP, și acolo Jquery nu lucrează :( ce să fac.
Am o problemă atunci când am lăudat Statte lui, evaluare și a adus numărul Statte dar, de asemenea, informații cu privire la cât de mult utilizatorul și va vota în evaluarea sumarno nici un număr de identitate cade.
iformatsii acest lucru nu intra in baza mea de date.
#raiting_star deduce în buclă PHP. De ce raiting_votes blocuri și raiting_hover, gestionate de jQuery funcționează numai în prima iterație a buclei?
a pus manual, lățime în CSS - lucru și jQuery pentru un motiv oarecare nu ia?
Deși site-ul ruseller.com constantă în codul php, stele jQuery locul de muncă, și multe altele, dar site-ul meu php nr. Deja, pur și simplu nu a făcut :(
Vă rugăm să adăugați extensia în cazul în care partea de conectare la baza de date!
Și ce valoare am adăuga rating de ansamblu numai rating selectat?
EvgeniyStytsenkov
EvgeniyStytsenkov
P.S. Pentru Andrew. Atunci când articolele sunt afișate într-o buclă în acest mod, script-ul de rating nu este conectat aici, pentru că În acest mod nu este necesară
Nifiga nu funcționează așa cum ar trebui vrodevse făcut doar 5-citit sau sunt prost sau ceva e în neregulă aici: (((
Confruntați cu problema: Pe serverul local, funcționează bine, dar pe un server de la distanță numai în IE și Chrome. În Opera și Firefox nu plugul viața mea. Am încercat să fac identic ca ruseller - una smochine. Poate, cine știe, ce e captura?
zhenya_polyakov
// actualizarea bazei de date (estimare și se adaugă o singură persoană) interogare $ = "user_votes conținut UPDATE SET = '$ user_votez', user_num = (user_num + 1), unde id_arc =" $ _ GET [ 'id_arc'] .; mysql_query (interogare $); somn (2); // pentru testarea pe un calculator ecou local "Vă mulțumim pentru evaluarea permițându" $ _ GET [ "user_votes"] "pentru articol №" $ _ GET [ "id_arc"]; ... >> ALL?! A intrat în baza de date și nu au nevoie de mai multe mese! Nu a fost doar o chestiune de securitate! Pentru a sparge un astfel de rating, probabil, :-( elementar și sistemul de podschetov așa cum a fost scris nu este foarte corect! Și scrie corect, în cazul în care articolul a răspândit deja pentru a termina înainte de sfârșitul anului. Desigur, există un stimulent de a explora, dar dacă el a vrut să facă sau să citească articole în general ! și vă mulțumesc pentru site-ul și lecții foarte mult distractiv toate!
zhenya_polyakov
Prin obținerea de informații de la două canale (vedere si auz) eficacitatea instruirii de învățare departe superioare de cărți. O temele pentru acasă și teste on-line vă va permite să se gândească în mod constant în limba țintă și imediat verifica cunoștințele!
Dacă doriți o lungă perioadă de timp pentru a studia modul în HTML, mi-ai, pentru ai vesti bune!
Dacă ați învățat deja HTML și doresc să avanseze, următorul pas va fi de a studia tehnologia CSS.
Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!