Vērtējums zvaigznīšu veidā ar aprēķinu. Kā mēs sadalām reitinga zvaigznes

Šajā rakstā mēs apskatīsim, kā vietnes rakstiem pievienot zvaigžņu vērtējumu.

Šīs funkcionalitātes pievienošanu CMS MODX Revolution sistēmai var veikt, izmantojot FiveStarRating papildinājumu.

FiveStarRating papildinājums

FiveStarRating ir papildinājums, kas pievieno elementus MODX Revolution sistēmai, ar kuru palīdzību varat veikt resursu priekšgala vērtējumu, izmantojot zvaigznītes.

FiveStarRating pievienojumprogrammas instalēšana

FiveStarRating papildinājums atrodas modx.com repozitorijā.

To var instalēt MODX Revolution sistēmā lapā "Manage Packages".


Izmantojot FiveStarRating papildinājumu

Zvaigznīšu vērtēšanas sistēmas pievienošana resursam tiek veikta, izsaucot SimpleRating fragmentu resursa veidnē vai saturā.

[[!SimpleRating]]

SimpleRating fragmenta parametri:

  • &id — tā resursa ID, kuram vēlaties parādīt vērtējumu (pašreizējais pēc noklusējuma).
  • &tpl — gabals, kas satur HTML zvaigžņu vērtējuma atzīmi (noklusējuma tplSimpleRating).

Piemērs SimpleRating fragmenta izsaukšanai, norādot resursa ID:

[[!SimpleRating? &id = `3` ]]

Piemērs SimpleRating fragmenta izsaukšanai, norādot gabala nosaukumu:

[[!SimpleRating? &tpl = `tplSimpleRating1` ]]

SimpleRating fragments veic šādas darbības:

  • reģistrē nepieciešamos stilus un skriptus priekšpusē;
  • saņem pašreizējā vai norādītā resursa vērtējumu un parāda to lapā;
  • iestata vērtējumu aktīvu vai nē, atkarībā no tā, vai lietotājs jau ir novērtējis šo resursu vai nē.

Novērtējums tiek nosūtīts caur ajax. Ajax pieprasījumu serverī apstrādā fails action.php. Šis fails pārbauda iespēju konkrētam lietotājam novērtēt resursu, iestata vērtējumu (ierakstot nepieciešamo informāciju datu bāzē) un atgriež rezultātu. Pēc rezultāta saņemšanas no action.php JavaScript skripts to parāda lapā.

Aizsardzība pret reitingu krāpšanos tiek veikta, izmantojot LocalStorage un IP adresi.

Ja nepieciešams, IP adreses aizsardzību var atspējot. Tas tiek darīts, iestatot sistēmas parametru simplerating_ip uz "Nē".


Tiek rādīti resursi ar visaugstākajiem vērtējumiem

Nobeigumā apskatīsim, kā lapā var attēlot 10 visaugstāk novērtētos resursus. Lai veiktu šo uzdevumu, mēs izmantosim pdoResources fragmentu no pdoTools pakotnes.

[[!pdoResources? &loadModels=`simplerating` &parents=`0` &innerJoin=`( "SimpleRating": ( "class":"SimpleRating", "on": "modResource.id = SimpleRating.resource" ) )` &sortby = `("SimpleRating. rating_value":"DESC")` &select=`( "modResource":"id,pagetitle", "SimpleRating":"rating_value" )` &tpl=`@INLINE

[[+id]]. [[+lapas nosaukums]] — [[+vērtējuma_vērtība]]

` ]]

Ir standarta funkcionalitāte, lai kaut ko novērtētu tīmeklī, un to var atrast daudzās vietnēs. Parasti to tehniski veic vairākos veidos:

1. Radio tipa ievades elementu kopums, no kuriem katrs atbilst vienam vai otram reitingam

2. Daudz nevajadzīgu un nesemantisku html iezīmējumu + javascript.

Nesen, veidojot projektu, man nācās saskarties ar līdzīgu uzdevumu. Nedaudz padomājot, es izvēlējos pirmo variantu vairāku iemeslu dēļ:

– funkcionalitāte, kuras pamatā ir ievades, jau ir ieviesta cms, tāpēc labāk pie tās pieturēties, nevis piespiest programmētāju izdomāt jūsu skripta “kruķus”;

– Esmu slinks, un dažreiz man ir vieglāk uzburt CSS, nekā meklēt visā internetā JavaScript spraudni, kas atbilstu vajadzībām konkrētajā situācijā;

– Vienu reizi jau biju redzējis līdzīga mehānisma ieviešanu un biju pārliecināts, ka tas ir iespējams.

CSS zvaigžņu vērtējums

Tātad, mehānisms radio ievades veidošanai, izmantojot CSS, nav jauns, un es to, protams, neizgudroju. Bet kādu iemeslu dēļ, meklējot “CSS reitings”, es neatradu gatavu risinājumu, kas man būtu piemērots. Tāpēc es uzrakstīju savu.

1. Mums vajag attēlus (vēlams sprite) zvaigžņu formā (saules, kaķēni, pūces un kas jums patīk vislabāk).

2. Izlemsim par marķējumu (zemāk esošais marķējums ir pilnībā uzrakstīts piemērā, šeit es aprakstīšu galveno ideju): mums ir iesaiņošanas elements, tas mainās un . Turklāt tie mainās atpakaļgaitā (tas ir ļoti svarīgi, lai, noklikšķinot, jūs varētu stilizēt visas atlasītās zvaigznes, un tas ir nepieciešams arī lidojuma efektam, skatiet piemēru). Ievadi nāk no augšas, caurspīdīgi, lai būtu redzama tikai zvaigznīšu etiķete.

3. Atlasot vienu vai otru ievadi, visu zem marķējuma esošie stili mainās (izmantojot css atlasītāju ~). Faktiski formā, tāpat kā parasti atlasītā radiopoga, tā kļūst atzīmēta.

Es sveicu ikvienu nākamajā nodarbībā par interesantu tēmu JQuery zvaigžņu reitings, tas ir nosaukums, kam, manuprāt, vajadzētu precīzāk raksturot šo skriptu. Un tāpēc, pirmkārt, sāksim ar to, kāpēc reitings ir vajadzīgs un kāda ir tā izmantošanas nozīme vietnēs. Pirmkārt, tas ir sociālais statuss reakcijai uz jebkuru materiālu, kas izraisa interesi neatkarīgi no tā, vai tas ir labs vai slikts. Otrkārt, tas ir novērtējums un, teiksim, mini aptauja par to, vai šī tēma vispār ir interesanta vai nē. Treškārt, tāpat kā mūsu vietnē, tēmas sarežģītības līmenis, lai gan šeit mēs jau izejam no sarežģītības, kas ir īpaši paredzēta iesācējiem, ņemiet vērā, nevis no sarežģītības pieredzējušiem izstrādātājiem, jo ​​šādi materiāli viņiem var vienkārši nebūt interesanti. un principā nav interesanti, ar izņēmumu vienkārši iegūstiet gatavo skriptu. Tāpēc man personīgi reitings ir vērtējums materiālam, kas izraisīja interesi. Piemēram, jūs interesējat iegādāties mobilo tālruni vai ko citu, esat ienācis kādā interneta veikalā un pēc tā vērtējuma varat novērtēt tā popularitāti, šeit ir preces popularitātes sociālais statuss.

Tagad parunāsim par scenāriju kopumā un par manām idejām. Būtībā nolēmu skriptu sadalīt divās daļās, domāju, ka daudziem interesēs gan pirmā, gan otrā daļa, bet es tās nekombinēju, bet izlaidu divos dažādos rakstos. Pirmkārt, tāpēc, ka abas daļas kopā izrādīsies diezgan nozīmīgas, otrkārt, es vēlētos redzēt jūsu komentārus, vai varbūt padomu vai jautājumus par otro daļu, un, treškārt, otrajā daļā tas noteikti tiks izmantots ne tikai JQuery. Vispār pirmajā daļā es vēlos jums izveidot stāstu par vietni, kurā varat nokļūt JQuery spraudnis šim skriptam un otrajā daļā vērtējuma ievadīšana, kad noklikšķināt uz zvaigznītes datu bāzē bez pārstartēšanas. Tāpēc, ja jums ir interese par otro daļu, gaidīšu jūsu simpātiju un komentārus.

Nu, sāksim. Pirmkārt, jums noteikti jāapmeklē šī spraudņa oficiālā vietne un jālejupielādē tas. Tāpat rūpīgi izpētiet dokumentāciju par paša spraudņa iestatīšanu un tā optimizēšanu normālai skripta darbībai. Pēc pārskatīšanas jums ir jābūt failam jquery.raty.js, ja iespējams jquery.raty.css, ja tas ir nepieciešams un ir noklusējuma attēli, tie ir tikai trīs. Atkal, es teikšu, tas viss ir pēc noklusējuma un saskaņā ar standartu!

Pirmā daļa. Js un css failu savienošana. HTML. Attēli.

Saskaņā ar standartu mēs iekļaujam stila failu demo.css un darbam nepieciešamā bibliotēka jquery.min.js, iespraust jquery.raty.js un mūsu skripts rate.js.

Pēc tam skripta saknei pievienojiet trīs attēlus, kas tiek rādīti pēc noklusējuma: star-on.png- pilns vērtējums, star-off.png- nav vērtējuma, zvaigzne-puse.png- puse reitinga. Ja jums ir savi attēli un vēlaties tos izmantot, varat tos izveidot, piemēram, kā es to darīju. Es izveidoju mapi img un tur augšupielādēja divus attēlus: rating_activ.png- aktīva zvaigzne, rating_passiv.png- nav aktīva zvaigzne.

Tagad pāriesim pie HTML kodu. Un es vēlos nekavējoties atzīmēt, ka mēs publicēsim tikai trīs standarta piemērus; visus pārējos varat atrast oficiālajā vietnē, kas norādīta materiālu avotā.

Pirmais piemērs.

Noklikšķinot uz zvaigznītes, nekavējoties tiek parādīts logs, ko sauc par metodi brīdinājums (), kurā varam redzēt, uz kuras zvaigznes noklikšķinājām un kādu vērtējumu izvēlējāmies.

Otrais piemērs.

Noklikšķinot uz zvaigznītes, tiek aprēķināts arī vērtējums. Demonstrēšanai manas bildes tika uzstādītas zvaigžņu veidā, kuras atrodas mapē img.

Trešais piemērs.

Ir vērts atzīmēt, ka, noklikšķinot, visas zvaigznītes tiek saglabātas tajā vērtējumā, kurā jūs uz tām noklikšķinājāt, bet nevis datu bāzē, bet gan klienta daļā. Tāpēc nolēmu uztaisīt diskusiju par otro daļu, kur iespējams izstrādāt pilnvērtīgu reitingu taupīšanu un klikšķu skaitīšanu kopumā. Tas ir, kopējais vērtējums tiks saglabāts datu bāzē.

Otrā daļa. JQuery.

Tagad mēs varam apskatīt JQuery daļa par tēmu zvaigžņu vērtējums. Atkal es pieņemšu formulējumu, ka mēs izskatām tikai trīs piemērus, kas it kā ir standarta.

Kā tās darbojas, kas, kā un kāpēc, es jau iepriekš detalizēti aprakstīju, tāpēc pakavēšos tikai pie detaļām, kas jums var nebūt skaidras.

$(document).ready(function())( $(.rate1").raty(( klikšķis: funkcija(score, evt) ( alert("ID: " + this.id + "\nscore: " + score) ) ; ) )); $(.rate2").raty(( skaitlis: 10, starOff: "img/rating_passiv.png", starOn: "img/rating_activ.png" )); $(.rate3") . rate(( skaitlis: 4, mērķis: ".nosaukums", mājieni: ["ļoti slikti", "slikti", "labi", "labi", "ļoti labi"], )); ));

Zem klases likme1, mēs palaižam funkciju ar parametriem rezultāts Un evt. Pirmajā no kurām mēs iegūstam ar metodi brīdinājums () nosaukums, un, otrkārt ID, mūsu izvēlētais vērtējums. Zem klases likme2, mēs iestatām parādīto zvaigžņu skaitu vai drīzāk to būs desmit, un mēs padarām attēlus piemērojamus nevis pēc noklusējuma, bet gan pēc saviem ieskatiem, kur starOff- ir zvaigznīte, kas nav aktīva, bet StarOn- aktīvs. Zem klases likme3, mēs iestatām parādīto zvaigžņu skaitu un paslēpjam noklusējuma zvaigzni no vispārējā displeja - ļoti slikti, iestatot kopējo statusa vērtību uz pieci.

Trešā daļa. Bibliotēka jquery.raty.js.

Īsi apspriedīsim pašu spraudni. Ja šī tēma jums kļūst ļoti interesanta vai nevarat to pilnībā saprast, mēs to analizēsim atsevišķi un detalizēti, varbūt pēc otrās daļas, ja tāda ir, vai varbūt kā atsevišķu spraudņa daļu. Nu, godīgi sakot, pietiek pat palasīt nelielu dokumentāciju, un viss uzreiz kļūs skaidrs. Galvenais, kam jāpievērš uzmanība, ir noklusējuma iestatījumi.

Atcelt: false, cancelClass: "raty-cancel", cancelPadoms: "Atcelt šo vērtējumu!", cancelOff: "cancel-off.png", cancelOn: "cancel-on.png", cancelPlace: "left", noklikšķiniet: undefined , puse: nepatiess, puseRādīt: patiess, mājieni: ["slikti", "slikti", "parasti", "labi", "krāšņi"], iconRange: nedefinēts, peles izvilkums: nedefinēts, peles kursors: undefined, noRatedMsg: "Nav novērtēts vēl!", skaits: 5, skaitsMaks.: 20, ceļš: nenoteikts, precizitāte: nepatiess, tikai lasāms: nepatiess, apaļš: ( uz leju: 0,25, pilns: 0,6, uz augšu: 0,76 ), rezultāts: nenoteikts, rezultātsNosaukums: "score", singls: false, atstarpe: patiess, starHalf: "star-half.png", starOff: "star-off.png", starOn: "star-on.png", starType: "img", mērķis: nedefinēts, mērķa formāts: "(score)", targetKeep: false, targetScore: undefined, targetText: "", targetType: "hint"

Kā redzat, es jau izmantoju dažus no šiem iestatījumiem savā skriptā, pievērsiet tam uzmanību! Ja kaut ko nesaprotat, varat to ierakstīt komentāros. Paldies par uzmanību, veiksmi visiem attīstībā!

Sveiki visiem hakeriem!
Kādu dienu aukstā ziemas vakarā es nolēmu vietnei veselu vērtējuma zvaigžņu vietā pievienot daļēju aizpildījumu daļskaitļiem (4,5, 3,85 utt.). Tātad tas ir vieglāk acīm un informatīvāk - kura iestāde ir labāka un kura ir sliktāka. Tāpēc es un mana komanda apsēdāmies, lai domātu un minētu.
Kā mēs atradām ceļu Tā kā mums galvenokārt ir labākās iestādes un 3+ vērtējumi, veselas zvaigznes ievērojami izjauc uztveri. Bet šeit radās dažas nianses. Visizplatītākā prakse ir attēlu pārklāšana vienu virs otra. Jau no paša sākuma domājām visu darīt, izmantojot maskas attēlu, bet diemžēl dizains nenozīmēja, ka zvaigznes varētu būt blakus, un nav īpaši ērti kontrolēt aizpildījuma bloka platumu un zvaigznes izmērs.

Šeit Kinopoisk ir visas 10 zvaigznes - viena bilde, kur tās arī pielīmētas viena pie otras. Tādējādi viņiem ir ļoti viegli krāsot tik daudz oranžas krāsas, cik sirds vēlas.



.starbar .outer ( fons: url(/images/starz.gif) no-repeat; platums: 219 pikseļi; augstums: 30 pikseļi; pozīcija: absolūts; ) .starbar_w ( displejs: bloks; platums: 167,09 pikseļi; fons: url(/ images/starz.gif) 0 -62 pikseļi bez atkārtošanās; augstums: 30 pikseļi; pozīcija: absolūta; ) Vienmēr ir kur klīst! Tomēr mēs vēlējāmies universālu un mērogojamu iespēju, kas pilnībā pakļauta BEM metodoloģijai. Turklāt projektā nav neviena spraita, un visas ikonas ir ieviestas, izmantojot mūsu pašu ikonu komplektu, kas rūpīgi salikts fontā. Bet es domāju, ka mēs par to runāsim citos rakstos;)

Kopumā mēs nonācām pie eksperimenta: kāpēc gan nelikt mūsu fonta ikonu virs citas? Tāpēc mēs to izdarījām.

Katra zvaigzne tika izgatavota par atsevišķu objektu, kas sastāv no .stars__out kā konteiners un .stars__in kā pildījums.


Un šeit ir CSS:

Cfi.cfi--star ( /* ... */ ) /* mūsu Font Awesome analogs, kas zīmē zvaigzni */ .stars__out ( pozīcija: relatīvā; mala pa labi: 5 pikseļi; /* izveido atkāpi starp zvaigznēm */ krāsa: pelēka; z-indekss: 1; ) .stars__in ( /* ievietosim savu aizpildījumu kā galvenās ikonas bērnu un uzmetīsim to augšpusē */ pozīcija: absolūta; z-indekss: 2; krāsa: oranža; /* piešķiriet tai saulainu krāsu */ font -size: inherit; /* un fonts ir vecākā lielums */ /* mēs piešķirsim bloka atskaites punktus, pamatojoties uz nullēm attiecībā pret vecāku */ displejs: bloks ; augšā: 0; pa kreisi: 0; apakšā: 0; /* labi, mēs ierobežosim redzamības apgabalu, kā arī pēc noklusējuma iestatīsim platumu uz 0 */ pārpilde: paslēpta; platums: 0; )

Visi. Pēc tam, kad tas ir jāaizpilda līdz 100% (pilna zvaigznīte), mēs vienkārši piešķiram tam CSS rekvizītu platums: 100%.
Bet nepilnīgām zvaigznēm mēs izmantojām citu triku. Mēs nenoteicām platumu x*100%, un vērtību pēc īpaši aprēķinātas formulas.
Tas viss ir par psiholoģiju. Mums ir tendence vizuāli uztvert aizpildījuma procentuālo daudzumu tilpumā, nevis platumā, un, tā kā zvaigznei kreisajā un labajā pusē ir ļoti mazs laukums, kas apgrūtina uztveri, mēs nāca klajā ar ideju aizpildīt to platumā ne. - lineāri:


Nelineārajam modelim mēs paņēmām sinusoīdu. Tas lieliski raksturo strauju augšanas sākumu un beigas, un vienmērīgu augšanu vidū.
Mēs to atlocām, iegūstot arssin, iespiedām to rāmī (0; 1) uz abām asīm un ieguvām labu un vienkāršu formulu zvaigznes “psiholoģiskā pilnuma” aprēķināšanai.

JavaScript kods:
var y = Math.asin(2 * x - 1) / Math.PI + 0,5;

Kā izrādās, šis princips labi darbojas vecākās pārlūkprogrammās, un pat IE9 nekas nedarbojas. Visi bija apmierināti: dizaineri, klienti un pat mans Ego, kas pamudināja mani uzrakstīt rakstu.

Lai parādītu zvaigznīti, mēs izmantosim decimālo kodu zvaigznītes simbolam HTML, proti: ☆.

HTML ☆☆☆☆☆

Novietojot peles kursoru virs atbilstošās zvaigznes, mums ir jāiestumj cietā dzeltenā zvaigzne “dobajā” zvaigznē. Vienkārši: vienkārši novietojiet cietu zvaigzni, izmantojot pseidoelementu, virs dobās zvaigznes.

CSS .rating > span:hover:before ( saturs: "\2605"; pozīcija: absolūts; )

Mēs absolūti novietojam cieto zvaigzni, un tādējādi mūsu zvaigzne aizsegs dobo zvaigzni.

Bet pagaidām mums viss strādā tikai katrai konkrētai zvaigznei. Un mūsu uzdevums, lai nodrošinātu labāku lietotāja pieredzi, ir aizpildīt visas zvaigznes (pamatojoties uz to, uz kuru zvaigzni norāda pele). Piemēram, ja lietotājs virza peli virs 4. zvaigznes, tad ir jāparāda 4 zvaigznes, ja uz 5., tad 5 utt.

Iepriekšējo blakus esošo elementu nevar atlasīt, izmantojot CSS. Tomēr ir veids, kā atlasīt nākamos pakārtotos elementus, izmantojot .

Ja mēs burtiski mainām rakstzīmes (fragments mums palīdzēs ar šo - ), mēs varam izmantot saistītu kombinatoru, lai atlasītu visas zvaigznes, kas parādās pirms zvaigznītes, kas atrodas virs zvaigznītes, bet pēc tam HTML kodā.

CSS .rating ( unicode-bidi: bidi-override; virziens: rtl; ) .rating > span:hover:before, .rating >

Tāpēc esam izveidojuši lietotājam draudzīgu zvaigžņu vērtējuma veidni, izmantojot nelielu kodu. Tālāk ir sniegts pilns CSS kods, lai reitings darbotos:

CSS .rating ( unicode-bidi: bidi-override; direction: rtl; ) .rating > span ( displejs: inline-block; pozīcija: relatīvais; platums: 1,1 em; ) .rating > span:hover:before, .rating > span:hover ~ span:before ( saturs: "\2605"; pozīcija: absolūts; ) Faktiskais lietojums

Visticamāk, bez javascript līdzdalības neiztiks. Kad lietotājs noklikšķina uz zvaigznītes, serverim tiek nosūtīts ajax pieprasījums, un logrīks saņem klasi, caur kuru tiek parādīts izvēlētais zvaigžņu skaits. Vai tiešām nav iespējams paļauties uz javascript, ja tas tiek izmantots visur vietnē, lai ieviestu šādu zvaigžņu sistēmu? Ja jūsu lietojumprogramma ir pilnībā atkarīga no JavaScript, tad šī opcija noteikti ir piemērota. Taču, ja jūsu vietnei ir jādarbojas bez JavaScript, tad, lai iegūtu šo zvaigžņu vērtējumu, būs jāstrādā daudz vairāk. Varat redzēt Lea Verous piemēru, kurā radio pogas tiek izmantotas kā daļa no veidlapas un netiek izmantots JavaScript.



 

Varētu būt noderīgi izlasīt: