Cred că toată lumea a văzut un rating pe multe site-uri sub formă de asteriscuri, cu posibilitatea de a-și lăsa vocea. Acesta este exact ceea ce vom face în această lecție. Vom scrie scenariul de la zero, folosind cunoștințele noastre, dar dacă uităm ceva, putem să ne uităm întotdeauna la pătuțurile de la Ruseller.com
Cel mai nerăbdător poate vedea rezultatul final în demo;)
HTML - Cadrul scenariului nostru
Schematic, evaluarea noastră viitoare ar trebui să arate astfel:
În evaluarea noastră #raiting_star - vor exista 2 blocuri. Primul este #reiting - stelele noastre vor locui acolo și utilizatorul va pune o estimare acolo. Al doilea este #raiting_info - aici vom pune pictograma ajax-loader la trimiterea datelor către server, aici vom afișa răspunsul de la server.
În blocul #reiting în sine, trebuie să afișăm stele în trei stări - să afișăm evaluarea curentă, să selectăm stele când stelele se deplasează și stelele goale. Deci, blocul de blocare ar trebui să aibă 3 blocuri în interiorul nostru. În ceea ce privește blocul #raiting_info, vom reveni la el în viitor, dar pentru moment vom pune doar un text acolo în al cincilea titlu. Iată un simplu schelet:
CSS - dați aspectul unui rating
Vom afișa stele dintr-un fișier. Iată imaginea pe care am găsit-o pentru scriptul nostru:
Primul rând pe care îl vom folosi pentru #raiting_blank. Al doilea rezultat al votării #reiting_votes. A treia oară pentru votarea #raiting_hover. Pentru a ne asigura că blocurile noastre nu se stivează unul sub altul, trebuie să se stabilească aceeași poziție față de #reiting. Și cele mai multe #reiting am setat fluxul, astfel încât #raiting_info nu pleacă sub el. Plecând de la cele de mai sus, creăm stiluri:
Deci, în momentul de față ar trebui să aveți 5 stele gri, plictisitoare în browser și câteva texte. Plecând de la cele de mai sus, vom corecta această chestiune.
ruseller.com avertizeaza - jquery cauzeaza dependenta :) Nu uita sa o conectezi, atunci vom lucra cu ea.
În momentul de față, prima noastră sarcină este să setăm lățimea blocului cu stelele de aur #reiting_votes, în funcție de clasificarea articolului. care va bloca parțial (sau complet) un bloc de stele gri. În viitor, vom primi ratingul din baza de date și vom stoca rezultatul votului, pe baza căruia vom calcula evaluarea prin simpla calcule a ratingului mediu. Între timp, prezentăm, ca și cum articolul nostru are un rating de 4,5:
pentru că lățimea unei stele este de 16px, atunci lățimea blocului #reiting_votes va fi egală cu 17px * pentru evaluare (plus 1 pixel pentru spațiile dintre stele). Astfel, introducem lățimea blocului dorită în variabila star_widht. Salvați, verificați. Deja ceva similar. Puteți afișa o evaluare sub formă de numere în blocul #raiting_info:
Acum, sarcina noastră este atunci când plasăm cursorul în rating pentru a ascunde rezultatele și pentru a arăta stelelor pentru a alege o estimare a mișcării mouse-ului:
Și aici, nimic complicat. Când treceți peste #raiting comuta #raiting_votes „vizibilitate“ și blocuri #raiting_hover. Același lucru se întâmplă când mouse-ul părăsește zona de redare. 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 momentul să abordați blocul #raiting_hover.
Avem nevoie de lățimea #raiting_hover pentru a se potrivi cu poziția mouse-ului pe ratan. O dată voi obține codul, iar apoi voi explica:
În margin_doc, introducem valoarea inițială a indiciilor de rating relative la document. Apoi, atunci când mouse-ul rulează în jurul ratingului, determinăm poziția curentă a mouse-ului. Diferența widht_votes este distanța la care mouse-ul a fugit de la marginea din stânga #raiting. Mai multe funcții sunt descrise în patul jquery
Acum, cunoscând distanța parcursă de mouse-ul, calculează evaluarea utilizatorilor de utilizator_vote. widht_votes / 17 - aici 17 este lățimea de 1 stea (inclusiv distanța interstelară). Math.ceil rotunjește rezultatul spre partea superioară la un număr întreg. Astfel, dacă utilizatorul este în orice parte a stelei, îl vom număra pentru întreaga evaluare. Și în ultima linie, multiplicăm ratingul de utilizator cu 17, pentru a obține lărgimea afișării blocului #raiting_hover.
Apoi, trebuie să trimitem evaluarea utilizatorului pe server. În cadrul acestui articol, php-mysql nu va fi luat în considerare. sarcina acestei lecții este implementarea widgetului Star Rating. Va avea nevoie - scrie)
Deci, în cadrul acestei lecții, vom crea un fișier raiting.php cu mai multe rânduri de cod:
Aici, somnul (1) întârzie executarea scriptului timp de 1 secundă - este necesar doar pentru testul de pe serverul local (mai târziu voi explica de ce). $ _GET ["user_votes"] și $ _GET ["id_arc"], vom avea variabile care conțin o estimare și id a articolului respectiv.
Operatorul care le are, rămâne pentru el să trimită evaluarea și id-ul 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 o pictogramă ajax. Pentru ea, să prescriem stilurile:
Ei bine, și acum, de fapt, jurnalist pe jquery:
Aici totul este 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 face acest lucru, adăugați estimarea existentă cu evaluarea utilizatorului și împărțiți-o cu 2 (adică găsim media aritmetică). astfel găsiți noua valoare a ratingului, înmulțind-o cu 17, obținem lățimea la care doriți să afișați un bloc de stele de aur.
În cele din urmă, să introducem o verificare a cookie-urilor, utilizatori votați sau nu pentru acest articol.
Implementați folosind pluginul jquery.cookies:
Nu uitați să includeți pluginul (există în arhivă) pe pagina dvs. și asigurați-vă că ați transferat lucrarea id_arc = 55; în samoenachalo. Toate codurile js cu verificare (explicația de mai jos):
Adăugat: $ ("# raiting"). Dezactivați (); - dezabonează toți ordonatorii de evenimente din clasament, astfel încât după votare ratingul să prezinte pur și simplu rezultatul.
Așa am scris de la zero scripturile "votare stea". După cum puteți vedea, implementarea este destul de simplă. Dacă nu înțelegeți semnificația oricărei funcții (metodă) de jquery, puteți face referire la foile de înșelătorie. postat pe site-ul nostru.
Dorințele și sugestiile lasă în comentarii. Vă mulțumim pentru atenție, weekend frumos!
Ultimele 5 lecții din rubrica "jQuery"
Astăzi dorim să vă spunem despre biblioteca TypeIt - un plugin jQuery gratuit. Cu aceasta, puteți simula tastarea. Dacă totul este ajustat corect, puteți obține un efect foarte realist.
jQuery plugin pentru crearea unei cronologii.
jQuery plugin pentru crearea unei diagrame Gantt.
Un exemplu de încărcare a unui fișier prin PHP și jQuery ajax.
sursele nu funcționează
Andrey Zhdanov
Sunt de acord cu Alexander, dacă faci asta bine, altfel e mai bine să nu faci asta deloc.
Sprijin Andrei și Alexandru! Eugen Stycenkov vă rugăm să faceți un supliment pentru acest articol. Vreau să văd o soluție complet pregătită. Arată cum a fost făcut pe acest site.
Eugen Stytsenkov
Alexandru, somnul (1) stabilește întârzierea pentru rularea scriptului php timp de o secundă, în exemplul pe care trebuie doar să îl vedeți când trimiteți o cerere la catargul local. această linie poate fi înlăturată cu totul. Scopul acestui articol este implementarea părții client. Datele au venit la tine pe server, apoi fă ce vrei cu ei, cel puțin scrie în baza de date, chiar și în fișiere. Există lecții anterioare, în care evaluarea (votarea) a fost considerată cu o înregistrare în baza de date, partea de server poate fi luată de acolo, nu este dificilă.
Vă mulțumim pentru răspuns! Cu siguranță aș vrea să încerc scenariul tău în acțiune, dar deja am găsit deja celălalt deja legătura cu baza de date, adevărul fără jquery și rulează super.
Andrey Zhdanov
Alexander, skinte te rog sa te conectezi la script, sau sapun [email protected] Multumesc
Nu pot să-i critic pe aceste stele pe site-ul tău. Folosesc fișiere php și JQuery nu funcționează acolo :( ce ar trebui să fac.
Am o astfel de problemă atunci când mi-am evaluat statul, numărul de rating și numărul statiilor, dar informațiile despre cât de multe voturi utilizatorul și scorul total nu includ nici un număr.
Aceste informații nu intră în baza mea de date.
#output_star în buclă PHP. De ce sunt blocurile raiting_votes și raiting_hover pe care jQuery le gestionează numai în prima iterație a buclei?
Am pus manual, lățimea în CSS - lucrări, și jQuery din anumite motive nu ia?
Deși site-ul ruseller.com este în mod constant pe codul php, stelele Jquery funcționează și multe altele, dar pe site-ul meu php acolo. Deja, nu numai că :(
Adăugați unde este acea parte cu conexiunea la baza de date!
Și în ce valoare adăugăm evaluarea pe care tocmai am selectat-o pentru evaluarea globală?
Eugen Stytsenkov
Eugen Stytsenkov
P.S. Pentru Andrew. Când articolele sunt afișate într-o buclă, în acest mod scriptul de rating nu este conectat aici; în acest mod nu este necesar
Nifiga nu funcționează ca totul, așa cum ar fi trebuit făcut de 5 ori, sau sunt proastă sau ceva greșit: (((
Confruntat cu o problemă: pe serverul local, totul funcționează bine, iar pe serverul de la distanță numai în IE și Chrome. În Opera și Firefox nu arata cel puțin să omoare. Am încercat să o fac identic ca la ruseller - un FIG. Poate, cine știe, ce captură?
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 ($ query); 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?! Acesta este introdus în baza de date și nu este nevoie de o masă suplimentară! A fost doar o întrebare cu siguranță! 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 și lecții, este foarte cool!
zhenya_polyakov
Prin obținerea de informații imediat prin două canale (vedere și auz), eficiența predării este mult mai mare decât învățarea din cărți. Și temele și testele online vă vor permite să gândiți în mod constant în limba pe care o învățați și să vă verificați imediat cunoștințele!
Dacă doriți să învățați HTML mult timp, atunci am o veste bună pentru dvs.!
Dacă ați învățat deja HTML și doriți să treceți mai departe, următorul pas este să învățați 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!
Trimiteți-le prietenilor: