Kuidas jagame reitingu tärnid. Tärnireiting CSS-is Html-hinnangu väljastamine tärnide kujul
Tärni kuvamiseks kasutame HTML-is tähe sümboli kümnendkoodi, nimelt: ☆.
HTML ☆☆☆☆☆Kui hõljutate hiirekursorit vastava tähe kohal, peame lükkama tahke kollase tähe "õõnsa" tähe sisse. Lihtne: lihtsalt asetage pseudoelemendi abil tahke täht õõnsa tähe peale.
CSS .rating > span:hover:before ( sisu: "\2605"; asukoht: absoluutne; )Me asetame absoluutselt tahke tähe ja seega katab meie täht õõnsa tähe.
Kuid seni töötab kõik meie jaoks ainult iga konkreetse tähe puhul. Ja meie ülesanne on parema kasutajakogemuse huvides täita kõik tähed (mille alusel hiir näitab). Näiteks kui kasutaja viib hiirekursori 4. tärni kohale, siis on vaja kuvada 4 tärni, kui 5., siis 5 jne.
Eelmist külgnevat elementi ei saa CSS-i kaudu valida. Siiski on võimalus valida järgmised alamelemendid, kasutades .
Kui muudame tähemärgid sõna otseses mõttes ümber (jupp aitab meid selles - ), saame seejärel kasutada seotud kombinaatorit, et valida kõik tähed, mis ilmuvad enne hiirekursori kohal asuvat tärni, kuid HTML-is pärast seda.
CSS .rating ( unicode-bidi: bidi-override; direction: rtl; ) .rating > span:hover:before, .rating >Seetõttu oleme loonud kasutajasõbraliku tärnide hindamise malli, kasutades väikest koodi. Allpool on täielik CSS-kood reitingu toimimiseks:
CSS .rating ( unicode-bidi: bidi-override; direction: rtl; ) .rating > span ( kuva: inline-block; asukoht: suhteline; laius: 1,1 em; ) .rating > span:hover:enne, .rating > span:hover ~ span:before ( sisu: "\2605"; asukoht: absoluutne; ) Tegelik kasutusTõenäoliselt ei saa see ilma javascripti osaluseta hakkama. Kui kasutaja klõpsab tärnile, saadetakse ajaxi päring serverisse ja vidin saab klassi, mille kaudu kuvatakse valitud arv tähti. Kas tõesti on võimatu loota javascriptile, kui seda saidil kõikjal kasutatakse, et sellist tähtsüsteemi rakendada? Kui teie rakendus sõltub täielikult javascriptist, sobib see valik kindlasti. Kuid kui teie sait peab töötama ilma JavaScriptita, nõuab selle tärnide reitingu saamine palju rohkem tööd. Näete Lea Verous näidet, mis kasutab vormi osana raadionuppe ega kasuta JavaScripti.
Selles õpetuses õpime tundma CSS-i muljetavaldavat jõudu ja loome puhta CSS-i abil tärnide reitingu. Kahjuks ei tööta see pingerida mõnes vanemas Webkit-toega brauseris, kuna õdede-vendade ja naabervalijaid on valesti käsitletud. Kuid see töötab kõigis kaasaegsetes brauserites hästi.
Reitingut luues tekkis meil küsimus: kas selles on võimalik JavaScripti üldse mitte kasutada, piirdudes ainult CSS-iga. Ja see on võimalik. Kasutades Ryan Seddoni meetodit CSS-i abil kohandatud raadionuppude loomiseks, saate muuta mitu raadionuppu värvi muutvateks tähtedeks. Meie õpetuses on need vaid unicode'i tähemärgid, mis muudavad värvi, kuid saate kasutada pilte ning kasutada õdede-vendade ja naabrite valijaid. tehtud töö värvid tähtedele.
Tärnireitingude loomiseks kasutatakse sageli raadionuppe, nii et märgistus ei pruugi teile ebatavaline tunduda. Ainuke asi, mida tuleb teisiti teha, on tärnide vastupidine järjekord: kõrgeim hinnang peab olema CSS3 selektorite tööviisi tõttu esimene, CSS4-s võidakse see piirang eemaldada, kuid see on veel kaugel.
Muidugi on sündmuste käitleja määramiseks vaja JavaScripti, kui hääletustulemused tuleb registreerida AJAX-i abil, kuid see ei kehti reitingu enda kohta, mis võib töötada tavalise vormi osana.
Brauserites, mis ei toeta :checked pseudoklassi (kontrollitud), eriti Internet Exploreri versiooni 9 all, peaks reiting ilmuma raadionuppudena, kuid me pole testinud.
Niisiis, mis juhtub:
HTML kood
Palun hinnake: 5 tärni 4 tärni 3 tärni 2 tärni 1 tärn
CSS-kood
Reiting ( float:left ; ) /* Konstruktsioon :not(:checked) toimib filtrina, mis takistab brausereid, mis ei toeta pseudoklassi :checked, nende atribuutide rakendamist. Kõik brauserid, mis toetavad pseudoklassi :checked, toetavad ka pseudoklassi :not(), seega peaks filter korralikult töötama. */ .rating :not (:checked ) > input ( position:absolute ; top:-9999px ; clip:rect (0 ,0 ,0 ,0 ) ; ) .rating :not (:checked ) > label ( float:right ; laius: 1 em ; täidis: 0 ,1 em ; ületäitmine: peidetud ; tühik: nowrap ; kursor: osuti ; fondi suurus: 200%; rea kõrgus: 1 ,2 ; värv: # ddd ; teksti vari: 1 pikslit 1px #bbb , 2px 2px #666 , .1em .1em .2em rgba(0 ,0 ,0 ,.5 ) ; ) .rating :not (:checked ) > label:before ( sisu : "★" ; ) .rating > input:checked ~ label ( color : #f70 ; text-shadow:1px 1px #c60 , 2px 2px #940 , .1em .1em .2em rgba(0 ,0 ,0 ,.5 ) ; ) .rating :not ( :checked ) > label:hover , .rating :not (:checked ) > label:hover ~ silt ( värv : kuldne; text-shadow:1px .1em .1em .2em rgba(0 ,0 ,0 ,.5 ) ; ) .reiting > input:checked + label:hover , .rating > input:checked + label:hover ~ label, .rating > input:checked ~ label:hover , .rating > input:checked ~ label:hover ~ silt, . hinnang > silt:hover ~ input:checked ~ silt ( värv : #ea0 ; text-shadow:1px 1px goldenrod, 2px 2px #B57340 , .1em .1em .2em rgba(0 ,0 ,0 ,.5 ) ; ) .rating > label:active ( position:relative ; top:2px ; left:2px ; )
Selles artiklis vaatleme, kuidas saidi artiklitele tärnide hinnangut lisada.
Selle funktsiooni saab lisada CMS MODX Revolution süsteemile lisandmooduli FiveStarRating abil.
FiveStarRatingi lisandmoodulFiveStarRating on lisandmoodul, mis lisab MODX Revolutioni süsteemi elemente, mille abil saate ressursse tärnide abil esiotsa hinnata.
FiveStarRatingi lisandmooduli installimineFiveStarRatingi lisandmoodul asub modx.com-i hoidlas.
Selle saab installida MODX Revolutioni süsteemi lehel "Halda pakette".
FiveStarRatingi lisandmooduli kasutamine Tärnihinnangu süsteemi ühendamine ressursiga toimub ressursi mallis või sisus oleva SimpleRatingi koodilõigu väljakutse kaudu.
[[!SimpleRating]]
SimpleRatingi koodilõigu parameetrid:
- &id – selle ressursi ID, mille hinnangut soovite kuvada (vaikimisi praegune).
- &tpl – HTML-i tärnihinnangu märgistust sisaldav tükk (vaikimisi tplSimpleRating).
Näide ressursi ID-d näitava SimpleRatingi koodilõigu kutsumisest:
[[!SimpleRating? &id = `3` ]]
Näide SimpleRatingi koodilõigu kutsumisest, mis näitab tüki nime:
[[!SimpleRating? &tpl = `tplSimpleRating1` ]]
SimpleRatingi koodilõik teeb järgmist.
- registreerib esiotsas vajalikud stiilid ja skriptid;
- saab praeguse või määratud ressursi hinnangu ja kuvab selle lehel;
- määrab reitingu aktiivseks või mitte, olenevalt sellest, kas kasutaja on seda ressurssi juba hinnanud või mitte.
Hinnang saadetakse ajaxi kaudu. Ajaxi päringut töötleb serveris fail action.php. See fail kontrollib ressursi hindamise võimalust antud kasutaja poolt, määrab reitingu (kirjutades andmebaasi vajaliku teabe) ja tagastab tulemuse. Pärast action.php-lt tulemuse saamist kuvab JavaScripti skript selle lehel.
Reitingupettuste eest kaitsmine toimub LocalStorage'i ja IP-aadressi kaudu.
Vajadusel saab IP-aadressi kaitse keelata. Seda tehakse, määrates süsteemiparameetri simplerating_ip väärtuseks "Ei".
Kuvatakse kõrgeimate hinnangutega ressursse Kokkuvõtteks vaatame, kuidas saate lehel kuvada 10 kõrgeima reitinguga ressurssi. Selle ülesande täitmiseks kasutame pdoResources koodilõiku paketist pdoTools.
[[!pdoResources? &loadModels=`simplerating` &parents=`0` &innerJoin=`( "SimpleRating": ( "class":"SimpleRating", "on": "modResource.id = SimpleRating.resource" ) )` &sortby = `("SimpleRating. rating_value":"DESC")` &select=`( "modResource":"id,pagetitle", "SimpleRating":"hinnangu_väärtus" )` &tpl=`@INLINE
[[+id]]. [[+lehe pealkiri]] – [[+hinnangu_väärtus]]
` ]]Kõik sai alguse sellest, et otsustasin oma blogis postituste hinnangut muuta.
Peamine põhjus reitingu muutmisel oli see, et hinnang kuvati "täisarvuliste" tärnidena, noh, maksimaalselt võis kuvada pool tärni. See tähendab, et kui artikli hinnang oli 4,75, siis oli vaja kuvada kas 4,5 tärni või 5, mis mulle väga ei sobinud.
Seetõttu otsustati kirjutada jQuerysse oma pistikprogramm, et luua hinnang tärnide kujul.
Põhinõuded pistikprogrammile:
- Hinne oleks pidanud olema õigesti kuvatud, st kui minu hinnang oli 4,78, siis varjutatud tärnide arv peaks olema sobiv.
- Võimalus valida efekti, kui hõljute kursorit tähe kohal. See tähendab, millise hinnangu saab kasutaja anda. st hiirekursorit tähtede kohal hõljutades oleks tulnud need üle värvida kas tervete tähtedega või poole tähega või absoluutväärtustes hiirekursori järel
- Võimalus püstitada oma tähed
- Võimalus määrata URL, kuhu hääletustulemus saadetakse
- Võimalus määrata hinnangus kuvatavate tärnide arv
- Hääletustulemuste automaatne langus. (Näiteks: 1 hääl, 2 häält, 5 häält)
- Võimalus määrata hääletustulemuste jaoks oma nimisõnu
- Võimalus määrata minimaalne reiting, millest allapoole ei saa kasutaja hääletada
- Võimalus täita tärnil klõpsamisel kohandatud funktsiooni
Pärast pistikprogrammi nõuete väljatöötamist hakkasin programmeerima. Selle tulemusel leidsin minu arvates päris hea jQuery pistikprogrammi tärnide kujul olevate hindamismärkmete jaoks, mida mul on hea meel teiega jagada.
Selle pistikprogrammi kasutamiseks oma veebisaidil peate esmalt ühendama jQuery teegi ja pistikprogrammi enda. Me ühendame jQuery teegi mitte tavapärasel viisil, vaid Google'i hoidlast.
aken.jQuery || document.write("");
See kood tuleb paigutada teie saidi siltide vahele.
Selle kohta, miks peate jQueryga ühendama, saate lugeda Google'i hoidlast.
Samuti peate pistikprogrammi korrektseks tööks ühendama järgmised stiilid:
Kõik see leiate lähtekoodist.
Kui kõik vajalikud stiilid ja teegid on ühendatud, saate helistada pistikprogrammile endale. Selleks peate sisestama oma lehel õigesse kohta div, näiteks koos reitinguklassiga:
Nüüd saate selle elemendi pistikprogrammi kutsuda järgmiselt:
$("div.reiting").reiting();
Sel juhul kutsutakse pistikprogramm välja vaikesätetega, mille tulemuseks on 5 täitmata tärni.
Teatud arvu varjutatud tärnide määramiseks peate meie elemendi sisse sisestama peidetud sisestusvälja, kus on val klass, mis sisaldab teie hinnangu väärtust:
Kui helistate nüüd pistikprogrammile, luuakse järgmine hinnang:
Pärast seda, kui kasutaja klõpsab soovitud tärnil, arvutatakse hinnang automaatselt ümber (varjutatud tärnide arv muutub) võttes arvesse tehtud valikut ning muutub ka häälte arv.
Kui ühel lehel on mitu hinnangut ja peate saatma andmed serverisse, siis kasutatakse reitingu tuvastamiseks teist peidetud sisestusvälja koos hääle ID klassiga:
Selle välja väärtus saadetakse serverisse koos hääletustulemusega. Nii saate reitingu tuvastada ja vajaliku hinnangu väärtust värskendada!
Nüüd räägime sellest, millised seaded pistikprogrammil on ja kuidas neid muuta!
| fx | ujuk | Efekt, kui hõljute kursorit tähe kohal.
|
| pilt | tee tähepildini. Tuleb märkida, et pilt peab olema tehtud spraidi kujul, st. Pildi ülaosas on täht, mis kuvatakse täitmata tähtede jaoks. Selle all on täht, mis kuvatakse hiirekursori hõljutamisel. Ja päris allosas on täht, mis kuvatakse varjutatud tähtede jaoks. Kui otsustate tähti muuta, tuleks seda järjestust säilitada. Juhin teie tähelepanu ka sellele, et ühe tähe kõrgus ja laius peavad olema võrdsed. Vastasel juhul ei kuvata reitingut õigesti |
|
| laius | 32 | Ühe tähe laius |
| tähed | 5 | Hinnangus kuvatud tärnide arv |
| pealkirjad | [ "hääl", "hääletada", "hääled" ] |
Nimisõnade massiiv, mis kuvatakse häälte lugemiseks |
| Loe ainult | vale | Reitingu töörežiim. Vaikimisi on vale. Tõene määramisel ei saa hääletada |
| minimaalne | 0 | Minimaalne reiting, millest allapoole ei saa kasutaja hääletada |
| url | Selle lehe aadress, kuhu saadetakse AJAX päring koos hääletustulemusega |
|
| tüüp | postitus | AJAX-i päringu tüüp. Vaikimisi on postitamine. Kui peate serverile saatma GET-päringu, määrake see väärtus väärtusega - get |
| laadur | Tee pildile, mis kuvatakse AJAX-i päringu serverisse saatmise ajal |
|
| klõpsa | Kohandatud funktsioon, mis kutsutakse välja, kui kasutaja klõpsab tärnil. Funktsiooni esimene parameeter on reitinguobjekt ise ja teine kasutaja hääletustulemus |
Kohandatud sõnumi väljundvorming
Oletame, et töötlete serveris päringut ja värskendate märkme reitingut. Sel juhul saate kuvada sõnumi "Aitäh. Teie hääl on loetud,” koostage tärnide reiting uuesti ja värskendage hääletajate arvu kasutaja brauseris.
Kuid enamasti peate enne reitingu värskendamist kontrollima, kas see inimene hääletas selle artikli poolt või mitte. Ja kui inimene on selle märkme poolt juba hääletanud, tuleks kasutaja brauseris kuvada hoiatus, mitte värskendada reitingu väärtust ja hääletajate arvu.
Seetõttu peab server pistikprogrammi korrektseks tööks tagastama järgmise vormiga json-objekti:
Kui staatus on võrdne väärtusega - OK, uuendatakse tärnide arvu ja arvutatakse hääletajate arv ümber, vastasel juhul kuvatakse lihtsalt hoiatusteade.
See on universaalne pistikprogramm, mille ma mõtlesin välja nootide reitingu tärnide kujul kuvamiseks.
Demo on näha
