Ինչպես ստեղծել աստղային վարկանիշ html css-ում: CSS աստղային վարկանիշ. FiveStarRating հավելման տեղադրում

Բարի գալուստ բոլորին հաջորդ դասին հետաքրքիր թեմա JQuery աստղային վարկանիշն այն անունն է, որը, իմ կարծիքով, պետք է ավելի ճշգրիտ նկարագրի այս սցենարը։ Եվ այսպես, նախ և առաջ եկեք սկսենք նրանից, թե ինչու է անհրաժեշտ վարկանիշը և դրա օգտագործման իմաստը կայքերում։ Դե, նախ, սա սոցիալական կարգավիճակն է արձագանքի ցանկացած նյութին, որը հետաքրքրություն է առաջացնում, լինի դա լավ, թե վատ: Երկրորդ, սա գնահատական ​​է և, ասենք, մինի հարցում, թե այս թեման ընդհանրապես հետաքրքիր է, թե ոչ։ Երրորդ, ինչպես մեր կայքում, թեմայի բարդության մակարդակը, չնայած այստեղ մենք արդեն ելնում ենք բարդությունից, հատկապես սկսնակների համար, նկատի ունեցեք, և ոչ թե փորձառու մշակողների բարդությունից, քանի որ նման նյութերը կարող են պարզապես հետաքրքիր չլինել նրանց համար: և, սկզբունքորեն, հետաքրքիր չեն, բացառությամբ պարզապես ստացեք պատրաստի սցենարը: Ուստի անձամբ ինձ համար վարկանիշը հետաքրքրություն առաջացրած նյութի գնահատականն է։ Օրինակ, դուք հետաքրքրված եք գնումներով Բջջային հեռախոսկամ այլ բան, դուք գնացել եք ինչ-որ առցանց խանութ և կարող եք գնահատել դրա ժողովրդականությունը՝ ելնելով նրա վարկանիշից, հենց այստեղ է ապրանքի հանրաճանաչության սոցիալական կարգավիճակը:

Հիմա խոսենք սցենարի մասին ընդհանրապես և իմ պատկերացումների մասին։ Ըստ էության, ես որոշեցի սցենարը բաժանել երկու մասի, կարծում եմ շատերին կհետաքրքրի թե՛ առաջին, թե՛ երկրորդ մասերը, բայց ես դրանք չհամադրեցի, այլ թողարկեցի երկու տարբեր հոդվածներում։ Նախ, քանի որ երկու մասերը միասին կստացվեն բավականին նշանակալից, և երկրորդ, ես կցանկանայի տեսնել ձեր մեկնաբանությունները, կամ գուցե խորհուրդները կամ հարցերը, երկրորդ մասի վերաբերյալ, և երրորդ, երկրորդ մասում այն ​​անպայման կօգտագործվի ոչ միայն. JQuery. Ընդհանուր առմամբ, առաջին մասում ես ուզում եմ ձեզ պատմություն պատրաստել այն կայքի մասին, որտեղ դուք կարող եք ստանալ JQueryմիացնել այս սցենարի, իսկ երկրորդ մասում՝ մուտքագրելով վարկանիշը տվյալների բազայում աստղի վրա սեղմելիս՝ առանց վերագործարկման։ Ուստի եթե ձեզ հետաքրքրում է երկրորդ մասը, ապա անհամբեր սպասում եմ ձեր հավանություններին և մեկնաբանություններին։

Դե, եկեք սկսենք. Նախ, դուք պետք է անպայման այցելեք այս plugin-ի պաշտոնական կայքը և ներբեռնեք այն: Դե, նաև, ուշադիր ուսումնասիրեք փաստաթղթերը ինքնին plugin-ի ստեղծման և դրա օպտիմալացման վերաբերյալ նորմալ շահագործումսցենար. Վերանայելուց հետո դուք պետք է ունենաք ֆայլ jquery.raty.js, Եթե հնարավոր է jquery.raty.css, եթե դա պահանջվում է, և կան լռելյայն պատկերներ, դրանցից միայն երեքը կան։ Կրկին, ես կասեմ, այս ամենը լռելյայն է և ըստ ստանդարտի:

Առաջին մաս. js և css ֆայլերի միացում: HTML. Պատկերներ.

Ստանդարտի համաձայն, մենք ներառում ենք ոճի ֆայլը demo.cssև աշխատանքի համար անհրաժեշտ գրադարանը jquery.min.js, միացնել jquery.raty.jsև մեր սցենարը տոկոսադրույքը.js.

Այնուհետև, սցենարի արմատին ավելացրեք երեք նկար, որոնք գալիս են լռելյայն. star-on.png- ամբողջական վարկանիշ, star-off.png- ոչ մի վարկանիշ, star-half.png- կես վարկանիշ: Եթե ​​դուք ունեք ձեր սեփական նկարները և ցանկանում եք դրանք օգտագործել, կարող եք դրանք ստեղծել, օրինակ, ինչպես ես արեցի: Ես թղթապանակ եմ ստեղծել imgև այնտեղ վերբեռնեց երկու նկար. rating_activ.png- ակտիվ աստղ, rating_passiv.png- ոչ ակտիվ աստղ:

Հիմա անցնենք HTMLծածկագիրը։ Եվ ես կցանկանայի անմիջապես նշել, որ մենք կհրապարակենք միայն երեք օրինակ ըստ ստանդարտի, մնացածը կարող եք գտնել պաշտոնական կայքում, որը նշված է նյութերի աղբյուրում:

Առաջին օրինակ.

Երբ սեղմում եք աստղանիշի վրա, անմիջապես հայտնվում է մեթոդով կոչվող պատուհան զգուշացում (), որում կարող ենք տեսնել, թե որ աստղի վրա ենք սեղմել և որ վարկանիշն ենք ընտրել։

Երկրորդ օրինակ.

Աստղի վրա սեղմելիս հաշվարկվում է նաև վարկանիշը։ Ցուցադրման համար իմ նկարները տեղադրվել են աստղերի տեսքով, որոնք գտնվում են թղթապանակում img.

Երրորդ օրինակ.

Հարկ է նշել, որ երբ դուք սեղմում եք, բոլոր աստղերը պահվում են այն վարկանիշում, որով դուք սեղմել եք դրանք, բայց ոչ թե տվյալների բազայում, այլ հաճախորդի մասում: Ուստի որոշեցի քննարկում անել երկրորդ մասի մասին, որտեղ հնարավոր է զարգացնել ռեյտինգների լիարժեք խնայողություն և ընդհանրապես սեղմումների հաշվում։ Այսինքն՝ ընդհանուր վարկանիշը կպահվի տվյալների բազայում։

Երկրորդ մաս. JQuery.

Այժմ մենք կարող ենք նայել JQueryմաս թեմայի վերաբերյալ աստղային վարկանիշ: Նորից կվերցնեմ այն ​​ձևակերպումը, որ մենք դիտարկում ենք ընդամենը երեք օրինակ, որոնք, իբրև թե, ստանդարտ են։

Ինչպես են նրանք աշխատում, ինչ, ինչպես և ինչու, ես արդեն մանրամասն նկարագրել եմ վերևում, ուստի ես կանդրադառնամ միայն այն մանրամասներին, որոնք կարող են ձեզ համար անհասկանալի լինել:

$(document).ready(function())($(".rate1").raty(( սեղմեք ֆունկցիան(score, evt) ( alert("ID: " + this.id + "\nscore: " + score ) ;) )); $(".rate2").raty((համարը` 10, starOff: "img/rating_passiv.png", starOn: "img/rating_activ.png" )); $(".rate3") . rate(( համարը՝ 4, թիրախ՝ «.name», հուշումներ՝ [«շատ վատ», «վատ», «լավ», «լավ», «շատ լավ»], )); ));

Դասի տակ դրույքաչափ 1, ֆունկցիան գործարկում ենք պարամետրերով միավորԵվ evt. Դրանցից առաջինում մենք ստանում ենք մեթոդով զգուշացում ()անունը և երկրորդ ID, մեր ընտրած վարկանիշը։ Դասի տակ դրույքաչափ 2, մենք սահմանում ենք ցուցադրվող աստղերի քանակի թիվը, ավելի ճիշտ կլինի տասը, և պատկերները դարձնում ենք կիրառելի ոչ թե լռելյայն, այլ մեր սեփական, որտեղ starOff- աստղանիշ է, որը ակտիվ չէ, բայց StarOn- ակտիվ. Դասի տակ դրույքաչափ 3, մենք սահմանում ենք ցուցադրվող աստղերի քանակը և թաքցնում ենք կանխադրված աստղը ընդհանուր էկրանից. շատ վատ, ընդհանուր կարգավիճակի արժեքը սահմանելով հինգ:

Երրորդ մասը. Գրադարան jquery.raty.js.

Եկեք համառոտ քննարկենք բուն plugin-ը: Եթե ​​այս թեման ձեզ համար շատ հետաքրքիր է դառնում կամ չեք կարողանում այն ​​ամբողջությամբ հասկանալ, ապա մենք այն կվերլուծենք առանձին և մանրամասն, գուցե երկրորդ մասից հետո, եթե կա, կամ գուցե որպես առանձին մաս plugin-ի համար։ Դե, անկեղծ ասած, բավական է նույնիսկ մի փոքր փաստաթուղթ կարդալ, և ամեն ինչ անմիջապես պարզ կդառնա: Հիմնական կետը, որին պետք է ուշադրություն դարձնել, լռելյայն կարգավորումներն են:

Չեղարկել՝ կեղծ, չեղարկելԴաս՝ «raty-cancel», cancelՀուշում՝ «Չեղարկել այս վարկանիշը», cancelOff՝ «cancel-off.png», cancelOn՝ «cancel-on.png», cancelՏեղ՝ «ձախ», սեղմել՝ չսահմանված , կեսը՝ կեղծ, կես Ցույց տալ՝ ճշմարիտ, ակնարկներ՝ [«վատ», «վատ», «կանոնավոր», «լավ», «շքեղ»], պատկերակ Շրջանակ՝ չսահմանված, մկնիկից դուրս՝ չսահմանված, մկնիկի ավելացում՝ չսահմանված, ոչԳնահատվածMsg: «Գնահատված չէ դեռ!", համարը` 5, համարը առավելագույնը` 20, ուղին` չսահմանված, ճշգրտությունը` կեղծ, Միայն կարդալը` կեղծ, կլոր. սինգլ՝ կեղծ, բացատ՝ ճշմարիտ, աստղԿես՝ «star-half.png», starOff՝ «star-off.png», starOn՝ «star-on.png», starType՝ «img», թիրախ՝ չսահմանված, targetFormat: «(score)», targetKeep՝ false, targetScore՝ չսահմանված, targetText՝ «», targetType՝ «ակնարկ»

Ինչպես տեսնում եք, ես արդեն օգտագործել եմ այս կարգավորումներից մի քանիսը իմ սցենարում, ուշադրություն դարձրեք սրան: Եթե ​​ինչ-որ բան չեք հասկանում, կարող եք գրել մեկնաբանություններում։ Շնորհակալություն ուշադրության համար, հաջողություն բոլորին զարգացման գործում:

Եթե ​​դուք իմ բլոգի մշտական ​​ընթերցողն եք, գուցե արդեն նկատել եք, որ ես փոխել եմ հոդվածների վարկանիշը։

Վարկանիշի փոփոխության հիմնական պատճառն այն էր, որ վարկանիշը ցուցադրվում էր որպես «ամբողջ թվով» աստղեր, լավ, առավելագույնը, որ դուք կարող եք ցուցադրել, կես աստղ է: Այսինքն, եթե հոդվածի վարկանիշը 4,75 էր, ապա պետք էր ցուցադրել կամ 4,5 աստղ, կամ 5, որն ինձ այնքան էլ չէր սազում։

Ուստի որոշվեց գրել իմ սեփական փլագինը jQuery-ում՝ աստղերի տեսքով վարկանիշ ստեղծելու համար։

Հավելվածի հիմնական պահանջները.

Գնահատականը պետք է ճիշտ ցուցադրվեր, այսինքն՝ եթե իմ գնահատականը 4,78 էր, ապա ստվերված աստղերի թիվը պետք է համապատասխան լինի։

Մկնիկը աստղի վրա սավառնելիս էֆեկտ ընտրելու ունակություն: Սա նշանակում է, թե ինչ վարկանիշ կարող է տալ օգտատերը։ այսինքն՝ մկնիկի ցուցիչը աստղերի վրա սավառնելիս, դրանք պետք է ներկված լինեին կա՛մ ամբողջ աստղերով, կա՛մ կես աստղով, կա՛մ բացարձակ արժեքներով՝ հետևելով մկնիկի ցուցիչին:

Ձեր սեփական աստղերը դնելու հնարավորություն

URL-ը նշելու հնարավորություն, որին կուղարկվի քվեարկության արդյունքը

Վարկանիշում ցուցադրված աստղերի քանակը նշելու ունակություն

Քվեարկության արդյունքների ավտոմատ անկում. (Օրինակ՝ 1 ձայն, 2 ձայն, 5 ձայն)

Քվեարկության արդյունքների համար սեփական գոյականներ սահմանելու ունակություն

Սահմանելու հնարավորություն նվազագույն արժեքըվարկանիշ, որից ցածր օգտվողը չի կարողանա քվեարկել

Աստղի վրա սեղմելիս հարմարեցված գործառույթ կատարելու ունակություն

Պլագինների պահանջների մշակումից հետո ես սկսեցի ծրագրավորել: Արդյունքում ես գտա այն, ինչ, իմ կարծիքով, բավականին լավ jQuery պլագին է՝ աստղերի տեսքով գնահատականների համար, որը ես ուրախ կլինեմ կիսվել ձեզ հետ:

Այս փլագինը ձեր կայքում օգտագործելու համար նախ և առաջ պետք է միացնել jQuery գրադարանև ինքնին plugin-ը: Մենք jQuery գրադարանը կմիացնենք ոչ թե սովորական եղանակով, այլ Google-ի պահոցից։

window.jQuery || document.write("");

Այս կոդըպետք է տեղադրվի ձեր կայքի պիտակների միջև:

Դուք կարող եք կարդալ այն մասին, թե ինչու պետք է միացնեք jQuery-ն Google-ի պահոցից:

Բացի այդ, որպեսզի plugin-ը ճիշտ աշխատի, դուք պետք է միացնեք հետևյալ ոճերը.

Այս ամենը դուք կգտնեք սկզբնաղբյուրում:

Բոլոր անհրաժեշտ ոճերն ու գրադարանները միացնելուց հետո կարող եք զանգահարել հենց plugin-ին: Դա անելու համար դուք պետք է տեղադրեք div ձեր էջի ճիշտ տեղում, օրինակ, դասի հետ վարկանիշ:

Այժմ դուք կարող եք զանգահարել այս տարրի հավելվածն այսպես.

$("div.rating").rating();

Այս դեպքում plugin-ը կկանչվի լռելյայն կարգավորումներով, ինչի արդյունքում կստեղծվի 5 չլրացված աստղ:

Որոշակի թվով ստվերավորված աստղեր սահմանելու համար դուք պետք է մեր տարրի ներսում տեղադրեք թաքնված մուտքագրման դաշտ անունով անուն = "վալ", որը կպարունակի ձեր վարկանիշի արժեքը.

Եթե ​​այժմ զանգահարեք հավելվածը, կստեղծվի հետևյալ վարկանիշը.

Այն բանից հետո, երբ օգտատերը սեղմում է ցանկալի աստղի վրա, վարկանիշը ավտոմատ կերպով կվերահաշվարկվի (ստվերված աստղերի թիվը կփոխվի)՝ հաշվի առնելով կատարած ընտրությունը, և կփոխվի նաև ձայների քանակը։

Եթե ​​մեկ էջում կան մի քանի վարկանիշներ, և դուք պետք է տվյալներ ուղարկեք սերվերին, ապա անվանմամբ մեկ այլ թաքնված մուտքագրման դաշտ օգտագործվում է գնահատականը նույնականացնելու համար: անուն = =vote-id»:

Իմաստը այս ոլորտինքվեարկության արդյունքների հետ միասին կփոխանցվի սերվերին: Այս կերպ Դուք կարող եք բացահայտել վարկանիշը և թարմացնել Ձեզ անհրաժեշտ վարկանիշի արժեքը:

Հիմա եկեք խոսենք այն մասին, թե ինչ կարգավորումներ ունի plugin-ը և ինչպես կարող եք դրանք փոխել:

Պարամետրի անվանումը Նախնական արժեք Նկարագրություն

fx	լողալ	Էֆեկտ մկնիկը աստղի վրա սավառնելիս: float — մկնիկի կուրսորը սավառնելիս աստղերը աստիճանաբար կնկարվեն՝ հետևելով մկնիկի ցուցիչին կես - Երբ սավառնում եք մկնիկի կուրսորը, աստղերը կնկարվեն աստիճանաբար, միանգամից կես աստղ: լրիվ - Երբ սավառնում եք մկնիկի կուրսորը, ամբողջ աստղը կլցվի
պատկեր		ճանապարհ դեպի աստղի պատկեր: Հարկ է նշել, որ նկարը պետք է արվի սփրայթի տեսքով, այսինքն. Պատկերի հենց վերևում կա աստղ, որը կցուցադրվի չլցված աստղերի համար: Ներքևում աստղ է, որը ցուցադրվում է մկնիկի կուրսորը սավառնելիս: Իսկ ամենաներքևում կա աստղ, որը ցուցադրվում է ստվերավորված աստղերի համար։ Եթե ​​որոշել եք փոխել աստղերը, ապա այս հաջորդականությունը պետք է պահպանվի։ Ձեր ուշադրությունն եմ հրավիրում նաև այն փաստի վրա, որ մեկ աստղի բարձրությունը և լայնությունը պետք է հավասար լինեն։ Հակառակ դեպքում վարկանիշը ճիշտ չի ցուցադրվի
աստղեր	5
նվազագույն	0	Նվազագույն վարկանիշային արժեք, որից ցածր օգտվողը չի կարողանա քվեարկել
վերնագրերը	[ «ձայն», «քվեարկել», «ձայներ» ]	Գոյականների զանգված, որը կցուցադրվի ձայները հաշվելու համար
միայն կարդալու համար	կեղծ
url		Այն էջի հասցեն, որին կուղարկվի AJAX հարցումը քվեարկության արդյունքով
տիպ	գրառում	AJAX հարցման տեսակը. Կանխադրվածը գրառումն է: Եթե ​​Ձեզ անհրաժեշտ է սերվերին ուղարկել GET հարցում, ապա սահմանեք այս արժեքը՝ ստանալ
բեռնիչ		Ճանապարհ դեպի պատկեր, որը կցուցադրվի AJAX հարցումը սերվեր ուղարկելու ընթացքում
սեղմել		Հատուկ գործառույթ, որը կանչվում է, երբ օգտվողը սեղմում է աստղի վրա: Ֆունկցիայի առաջին պարամետրը կլինի բուն վարկանիշային օբյեկտը, իսկ երկրորդը կլինի օգտատիրոջ քվեարկության արդյունքը
ետ Զանգիր		հետ կանչելու գործառույթը. Զանգվում է, երբ AJAX հարցումը հաջողությամբ ավարտվում է: Այն ընդունում է մեկ պատասխան պարամետր՝ որպես մուտքագրում՝ սերվերի պատասխանը

Պատվերով հաղորդագրության ելքային ձևաչափ

Ենթադրենք, դուք մշակում եք հարցումը սերվերի վրա և թարմացնում եք գրառման վարկանիշը: Այս դեպքում կարող եք ցուցադրել «Շնորհակալություն: Ձեր ձայնը հաշվվել է», վերակառուցեք աստղային վարկանիշը և թարմացրեք ընտրողների թիվը օգտվողի դիտարկիչում:

Բայց ամենից հաճախ վարկանիշը թարմացնելուց առաջ պետք է ստուգել՝ այս անձը քվեարկե՞լ է այս հոդվածի օգտին, թե՞ ոչ։ Եվ եթե մարդն արդեն քվեարկել է այս գրառման օգտին, ապա օգտագործողի բրաուզերում պետք է ցուցադրվի զգուշացում և չթարմացվի վարկանիշի արժեքը և ընտրողների թիվը։

Հետևաբար, որպեսզի plugin-ը ճիշտ աշխատի, սերվերը պետք է վերադարձնի հետևյալ ձևի json օբյեկտ.

Եթե կարգավիճակըհավասար կլինի արժեքին - լավ, ապա աստղային վարկանիշը կթարմացվի, և ընտրողների թիվը կվերահաշվարկվի, հակառակ դեպքում պարզապես կցուցադրվի նախազգուշական հաղորդագրություն։

Սա այն ունիվերսալ փլագինն է, որը ես ստեղծել եմ՝ աստղերի տեսքով նշումների վարկանիշը ցուցադրելու համար:

Ես գրել եմ, թե ինչպես ստեղծել վարկանիշային կարգավորիչ աստղերի տեսքով այս հոդվածում:

Եթե ​​դուք գտաք այս հավելվածը օգտակար, կարող եք շնորհակալություն հայտնել ինձ ստորև բերված մեկնաբանություններում: Այսպես ես կիմանամ, որ իմ աշխատանքն իզուր չէ։

Եթե ​​ունեք առաջարկներ այս հավելվածը բարելավելու կամ հարցեր, գրեք մեկնաբանություններում:

Հուսով եմ, որ այն օգտակար է ձեզ համար:

Թարմացում 03/14/2012-ից.

• Բոլոր թաքնված դաշտերը, որոնք ավելացնում եք գնահատման կոնտեյներով, ավտոմատ կերպով կփոխանցվեն սերվեր:
• Հեռացվել է լայնության պարամետրը: Այժմ մեկ աստղի լայնությունը որոշվում է ավտոմատ կերպով:
• Ավելացվեց հետադարձ կապի գործառույթ, որը կանչվում է AJAX հարցումը հաջողությամբ ավարտելու դեպքում:

Ամեն ինչ սկսվեց նրանից, որ ես որոշեցի փոխել իմ բլոգի գրառումների վարկանիշը:

Վարկանիշի փոփոխության հիմնական պատճառն այն էր, որ վարկանիշը ցուցադրվում էր որպես «ամբողջ թվով» աստղեր, լավ, առավելագույնը, որ դուք կարող եք ցուցադրել, կես աստղ է: Այսինքն, եթե հոդվածի վարկանիշը 4,75 էր, ապա պետք էր ցուցադրել կամ 4,5 աստղ, կամ 5, որն ինձ այնքան էլ չէր սազում։

Ուստի որոշվեց գրել իմ սեփական փլագինը jQuery-ում՝ աստղերի տեսքով վարկանիշ ստեղծելու համար։

Հավելվածի հիմնական պահանջները.

• Գնահատականը պետք է ճիշտ ցուցադրվեր, այսինքն՝ եթե իմ գնահատականը 4,78 էր, ապա ստվերված աստղերի թիվը պետք է համապատասխան լինի։
• Մկնիկը աստղի վրա սավառնելիս էֆեկտ ընտրելու ունակություն: Սա նշանակում է, թե ինչ վարկանիշ կարող է տալ օգտատերը։ այսինքն՝ մկնիկի ցուցիչը աստղերի վրա սավառնելիս, դրանք պետք է ներկված լինեին կա՛մ ամբողջ աստղերով, կա՛մ կես աստղով, կա՛մ բացարձակ արժեքներով՝ հետևելով մկնիկի ցուցիչին:
• Ձեր սեփական աստղերը դնելու հնարավորություն
• URL-ը նշելու հնարավորություն, որին կուղարկվի քվեարկության արդյունքը
• Վարկանիշում ցուցադրված աստղերի քանակը նշելու ունակություն
• Քվեարկության արդյունքների ավտոմատ անկում. (Օրինակ՝ 1 ձայն, 2 ձայն, 5 ձայն)
• Քվեարկության արդյունքների համար սեփական գոյականներ սահմանելու ունակություն
• Նվազագույն վարկանիշային արժեք սահմանելու հնարավորություն, որից ցածր օգտվողը չի կարողանա քվեարկել
• Աստղի վրա սեղմելիս հարմարեցված գործառույթ կատարելու ունակություն

Պլագինների պահանջների մշակումից հետո ես սկսեցի ծրագրավորել: Արդյունքում ես գտա այն, ինչ, իմ կարծիքով, բավականին լավ jQuery հավելված է աստղերի տեսքով գնահատականների համար, որը ես ուրախ եմ կիսվել ձեզ հետ:

Այս հավելվածը ձեր կայքում օգտագործելու համար առաջին բանը, որ դուք պետք է անեք, միացնել jQuery գրադարանը և բուն փլագինը: Մենք jQuery գրադարանը կմիացնենք ոչ թե սովորական եղանակով, այլ Google-ի պահոցից։

window.jQuery || document.write("");

Այս կոդը պետք է տեղադրվի ձեր կայքի պիտակների միջև:

Դուք կարող եք կարդալ այն մասին, թե ինչու պետք է միացնեք jQuery-ն Google-ի պահոցից:

Բացի այդ, որպեսզի plugin-ը ճիշտ աշխատի, դուք պետք է միացնեք հետևյալ ոճերը.

Այս ամենը դուք կգտնեք սկզբնաղբյուրում:

Բոլոր անհրաժեշտ ոճերն ու գրադարանները միացնելուց հետո կարող եք զանգահարել հենց plugin-ին: Դա անելու համար դուք պետք է տեղադրեք div ձեր էջի ճիշտ տեղում, օրինակ, վարկանիշային դասով.

Այժմ դուք կարող եք զանգահարել այս տարրի հավելվածն այսպես.

$("div.rating").rating();

Այս դեպքում plugin-ը կկանչվի լռելյայն կարգավորումներով, ինչի արդյունքում կստեղծվի 5 չլրացված աստղ:

Որոշակի թվով ստվերավորված աստղեր սահմանելու համար դուք պետք է մեր տարրի ներսում տեղադրեք թաքնված մուտքագրման դաշտ val դասի հետ, որը կպարունակի ձեր վարկանիշի արժեքը.

Եթե ​​այժմ զանգահարեք հավելվածը, կստեղծվի հետևյալ վարկանիշը.

Այն բանից հետո, երբ օգտատերը սեղմում է ցանկալի աստղի վրա, վարկանիշը ավտոմատ կերպով կվերահաշվարկվի (ստվերված աստղերի թիվը կփոխվի)՝ հաշվի առնելով կատարած ընտրությունը, և կփոխվի նաև ձայների քանակը։

Եթե ​​մեկ էջում կան մի քանի վարկանիշներ, և դուք պետք է տվյալներ ուղարկեք սերվերին, ապա գնահատականը նույնականացնելու համար օգտագործվում է մեկ այլ թաքնված մուտքագրման դաշտ՝ vote-id դասով.

Այս դաշտի արժեքը քվեարկության արդյունքի հետ կուղարկվի սերվեր: Այս կերպ Դուք կարող եք բացահայտել վարկանիշը և թարմացնել Ձեզ անհրաժեշտ վարկանիշի արժեքը:

Հիմա եկեք խոսենք այն մասին, թե ինչ կարգավորումներ ունի plugin-ը և ինչպես կարող եք դրանք փոխել:

fx	լողալ	Էֆեկտ մկնիկը աստղի վրա սավառնելիս: float — մկնիկի կուրսորը սավառնելիս աստղերը աստիճանաբար կնկարվեն՝ հետևելով մկնիկի ցուցիչին կես - Երբ սավառնում եք մկնիկի կուրսորը, աստղերը կնկարվեն աստիճանաբար, միանգամից կես աստղ: լրիվ - Երբ սավառնում եք մկնիկի կուրսորը, ամբողջ աստղը կլցվի
պատկեր		ճանապարհ դեպի աստղի պատկեր: Հարկ է նշել, որ նկարը պետք է արվի սփրայթի տեսքով, այսինքն. Պատկերի հենց վերևում կա աստղ, որը կցուցադրվի չլցված աստղերի համար: Ներքևում աստղ է, որը ցուցադրվում է մկնիկի կուրսորը սավառնելիս: Իսկ ամենաներքևում կա աստղ, որը ցուցադրվում է ստվերավորված աստղերի համար։ Եթե ​​որոշել եք փոխել աստղերը, ապա այս հաջորդականությունը պետք է պահպանվի։ Ձեր ուշադրությունն եմ հրավիրում նաև այն փաստի վրա, որ մեկ աստղի բարձրությունը և լայնությունը պետք է հավասար լինեն։ Հակառակ դեպքում վարկանիշը ճիշտ չի ցուցադրվի
լայնությունը	32	Մեկ աստղի լայնությունը
աստղեր	5	Վարկանիշում ցուցադրված աստղերի քանակը
վերնագրերը	[ «ձայն», «քվեարկել», «ձայներ» ]	Գոյականների զանգված, որը կցուցադրվի ձայները հաշվելու համար
միայն կարդալու համար	կեղծ	Գործառնական ռեժիմի գնահատում: Նախնականը կեղծ է: Եթե ​​սահմանվի true, ապա հնարավոր չի լինի քվեարկել
նվազագույն	0	Նվազագույն վարկանիշային արժեք, որից ցածր օգտվողը չի կարողանա քվեարկել
url		Այն էջի հասցեն, որին կուղարկվի AJAX հարցումը քվեարկության արդյունքով
տիպ	գրառում	AJAX հարցման տեսակը. Կանխադրվածը գրառումն է: Եթե ​​Ձեզ անհրաժեշտ է սերվերին ուղարկել GET հարցում, ապա սահմանեք այս արժեքը՝ ստանալ
բեռնիչ		Ճանապարհ դեպի պատկեր, որը կցուցադրվի AJAX հարցումը սերվեր ուղարկելու ընթացքում
սեղմել		Հատուկ գործառույթ, որը կանչվում է, երբ օգտվողը սեղմում է աստղի վրա: Ֆունկցիայի առաջին պարամետրը կլինի բուն վարկանիշային օբյեկտը, իսկ երկրորդը կլինի օգտատիրոջ քվեարկության արդյունքը

Պատվերով հաղորդագրության ելքային ձևաչափ

Ենթադրենք, դուք մշակում եք հարցումը սերվերի վրա և թարմացնում եք գրառման վարկանիշը: Այս դեպքում կարող եք ցուցադրել «Շնորհակալություն: Ձեր ձայնը հաշվվել է», վերակառուցեք աստղային վարկանիշը և թարմացրեք ընտրողների թիվը օգտվողի դիտարկիչում:

Բայց ամենից հաճախ վարկանիշը թարմացնելուց առաջ պետք է ստուգել՝ այս անձը քվեարկե՞լ է այս հոդվածի օգտին, թե՞ ոչ։ Եվ եթե մարդն արդեն քվեարկել է այս գրառման օգտին, ապա օգտագործողի բրաուզերում պետք է ցուցադրվի զգուշացում և չթարմացվի վարկանիշի արժեքը և ընտրողների թիվը։

Հետևաբար, որպեսզի plugin-ը ճիշտ աշխատի, սերվերը պետք է վերադարձնի հետևյալ ձևի json օբյեկտ.

Եթե ​​կարգավիճակը հավասար է արժեքին՝ OK, ապա աստղային վարկանիշը կթարմացվի և ընտրողների թիվը կվերահաշվարկվի, հակառակ դեպքում պարզապես կցուցադրվի նախազգուշական հաղորդագրություն:

Սա այն ունիվերսալ փլագինն է, որը ես ստեղծել եմ՝ աստղերի տեսքով նշումների վարկանիշը ցուցադրելու համար:

Դուք կարող եք տեսնել ցուցադրությունը

Բարելավման մասին գրառման մեջ վարքային գործոններ(հղումը գրառման ներքևում) Ես գրել եմ, որ հավելյալ արժեք ստեղծող բովանդակությունը կօգնի մեծացնել այցելուի անցկացրած ժամանակը կայքում:

Դրա նպատակն է ոչ միայն ընթերցողներին պահել կայքում և ավելացնել դիտված էջերի քանակը, այլ նաև բարձրացնել վստահությունը ձեր կայքի և անձամբ ձեր նկատմամբ (եթե կայքը հեղինակինն է):

Ի՞նչը կարող է հետաքրքրել այցելուին և պահել նրան կայքում: 1. Բովանդակություն:

• Հետաքրքիր հոդվածներ.
• Կայքի թեմայի հետ կապված հարմար ծառայություններ.
• Հոդվածներում ներկայացված պատկերներ և տեսանյութեր:

2. Վստահեք հեղինակին և կայքին.

• Տեղեկություններ կայքի և հեղինակի մասին՝ հեղինակի էջ:
• Հեղինակի հետ կապվելու հնարավորություն՝ կոնտակտային ձև, էլ.փոստ կամ հեռախոս:

3. Օգտատիրոջ գործունեության խրախուսում.

• Հոդվածի մասին ձեր կարծիքը հայտնելու կամ այն ​​գնահատելու հնարավորություն.
  • թողեք մեկնաբանություն և ստացեք դրա պատասխանը:
  • հավանեք կամ ավելացրեք հոդվածի հղում ձեր էջում սոցիալական ցանց- սոցիալական ցանցի կոճակներ:
  • տալ նյութի ուղղակի գնահատական՝ գնահատական.
• Քվեարկություն տարբեր թեմաներով.
• Նվերներ ընթերցողների և օգտատերերի համար, մրցույթներ և առաջխաղացումներ:

4. Գեղեցիկ դիզայնև հեշտ օգտագործման կայք:

Այսօր ես կխոսեմ այն ​​մասին, թե ինչպես ավելացնել գրառումների պարզ աստղային վարկանիշ ձեր կայքում՝ առանց բարդ և ծանր պլագինների օգտագործման: Բացի այդ, մեր վարկանիշը կպարունակի վարկանիշի միկրո նշում, ինչը նշանակում է, որ դրա աստղերը կցուցադրվեն Google SE-ում (որոնողական համակարգի արդյունքներ) և ուշադրություն կգրավի կայքի հատվածի վրա: Սրա նման:

Իսկ հավանականությունը, որ օգտատերը կկտտացնի աստղերով հատվածի վրա, շատ ավելի մեծ է, ուստի նրանց օգնությամբ մենք կարող ենք ավելացնել որոնման արդյունքներում էջերի CTR-ը (click-through rate):

Կայքում վարկանիշ ունենալը կարող է նաև օգնել նրան մտնել YAN (Yandex գովազդային ցանց)՝ դրա մոդերատորները միշտ ուշադրություն են դարձնում ռեսուրսի լրացուցիչ ծառայություններին:
Որպես կանոն, վարկանիշները ստեղծվում են WP-PostRatings հավելվածի միջոցով։

Ես չեմ վիճի, այս փլագինը շատ ֆունկցիոնալ է և թույլ է տալիս առավելագույնս իրականացնել տարբեր վարկանիշներ, բայց միևնույն ժամանակ նա.

Խիստ դանդաղեցնում է կայքի բեռնումը:

Հակասում է բազմաթիվ այլ պլագինների հետ, ինչպիսիք են՝ սեղմելով պատկերը մեծացնելու համար, որը նույնպես օգտագործում է Ajax տեխնոլոգիան:

Այսպիսով, եկեք անցնենք աստղային վարկանիշ ստեղծելուն. ↓ Դուք կարող եք ներբեռնել կայքի գնահատման սցենարը ստորև նշված հղումից

Ներբեռնվել է արդեն 288 անգամ

Բացեք ↓

Բովանդակությունն ապակողպելու համար մուտքագրեք ձեզ ուղարկված վերջին նամակի կոդը:

Արխիվը բացելուց հետո դուք կստանաք վարկանիշների թղթապանակ և ֆայլեր.

Functions.php,
- footer.php,
- single.php և
- style.css.

Վարկանիշների պանակը պետք է ավելացվի ձեր թեմայի թղթապանակում:

Իսկ կոդը համապատասխանաբար functions.php, footer.php, single.php և style.css ֆայլերից փոխանցեք ձեր թեմայի functions.php, footer.php, single.php և style.css ֆայլերին։

functions.php-ում և footer.php-ում՝ մինչև ֆայլի սկիզբը, style.css-ում՝ մինչև ֆայլի վերջը:

Թեգից հետո single.php-ում

Դուք կարող եք դիտել այլ միկրոմակնշման պիտակներ հոդվածների համար http://schema.org/Article կայքում և ավելացնել ձեզ անհրաժեշտները:

Դրանից հետո գրառումը, դրան ավելացված վարկանիշով, կարող է ստուգվել նշագրման վավերացնողում.
Google - https://developers.google.com/structured-data/testing-tool/ և
Yandex - http://webmaster.yandex.ua/microtest.xml:

Վերջապես, ես առաջարկում եմ դիտել վեբինար՝ AGS-ից կայքերը հեռացնելու վերաբերյալ՝ օգտագործելով հավելյալ արժեք ստեղծող բովանդակություն:

Աստղը ցուցադրելու համար մենք կօգտագործենք HTML-ում աստղանիշի տասնորդական կոդը, այն է՝ ☆:

HTML ☆☆☆☆☆

Մեզ անհրաժեշտ է, երբ մկնիկը սավառնում եք համապատասխան աստղի վրայով, պինդ դեղին աստղը «խոռոչ» աստղի մեջ հրում ենք: Հեշտ. Պարզապես տեղադրեք ամուր աստղ՝ օգտագործելով կեղծ տարր, խոռոչ աստղի վերևում:

CSS .rating > span:hover:before (բովանդակությունը՝ «\2605», դիրքը՝ բացարձակ; )

Մենք բացարձակապես դիրքավորում ենք պինդ աստղը և, այդպիսով, մեր աստղը կծածկի սնամեջ աստղը:

Բայց մինչ այժմ մեզ մոտ ամեն ինչ աշխատում է միայն յուրաքանչյուր կոնկրետ աստղի համար։ Եվ մեր խնդիրն է, ավելի լավ օգտատերերի փորձի համար, լրացնել բոլոր աստղերը (հիմնվելով, թե որ աստղի վրա է մատնացույց անում մկնիկը): Օրինակ, եթե օգտատերը մկնիկը նստեցնում է 4-րդ աստղի վրայով, ապա անհրաժեշտ է ցուցադրել 4 աստղ, եթե 5-րդ, ապա 5 և այլն։

CSS-ի միջոցով նախորդը ընտրելու հնարավորություն չկա հարակից տարր. Այնուամենայնիվ, կա հաջորդ մանկական տարրերն ընտրելու միջոց՝ .

Եթե ​​մենք բառացիորեն հակադարձում ենք նիշերը (հատվածը կօգնի մեզ դրանում - ), ապա կարող ենք օգտագործել հարակից կոմբինատոր՝ ընտրելու բոլոր աստղերը, որոնք հայտնվում են մկնիկի վրայով աստղից առաջ, իսկ հետո՝ HTML-ում:

CSS .rating ( unicode-bidi. bidi-override; ուղղություն՝ rtl; ) .rating > span:hover:before, .rating >

Այսպիսով, մենք ստեղծել ենք օգտագործողի համար հարմար աստղային գնահատականի ձևանմուշ՝ օգտագործելով փոքր կոդ: Ստորև ներկայացված է ամբողջական կոդը CSS վարկանիշի աշխատանքի համար.

CSS .rating ( unicode-bidi. bidi-override; ուղղություն՝ rtl; ) .rating > span (ցուցադրում՝ inline-block; դիրքը՝ հարաբերական; լայնությունը՝ 1.1em; ) .rating > span:hover:before, .rating > span:hover ~ span:fore ( բովանդակություն՝ «\2605»; դիրք՝ բացարձակ; ) Փաստացի օգտագործում

Ամենայն հավանականությամբ, դա հնարավոր չի լինի անել առանց javascript-ի մասնակցության։ Երբ օգտվողը կտտացնում է աստղի վրա, ajax հարցումն ուղարկվում է սերվերին, և վիջեթը ստանում է դաս, որի միջոցով ցուցադրվում է աստղերի ընտրված թիվը: Իսկապե՞ս անհնար է ապավինել javascript-ին, եթե այն օգտագործվում է կայքում ամենուր, նման աստղային համակարգ իրականացնելու համար։ Եթե ​​ձեր հավելվածն ամբողջությամբ կախված է javascript-ից, ապա այս տարբերակը, իհարկե, հարմար է: Բայց, եթե ձեր կայքը պետք է աշխատի առանց օգտագործելով javascript, ապա այդ աստղային վարկանիշը շատ ավելի շատ աշխատանք կպահանջի: Դուք կարող եք տեսնել Լեա Վերուսի օրինակը, որն օգտագործում է ռադիո կոճակները որպես ձևի մաս և չի օգտագործում javascript: