რეიტინგი ვარსკვლავების სახით გაანგარიშებით. როგორ დავყოთ რეიტინგის ვარსკვლავები

ამ სტატიაში განვიხილავთ, თუ როგორ დავამატოთ ვარსკვლავის ნიშანი საიტის სტატიებს.

ამ ფუნქციის დამატება CMS MODX Revolution სისტემაში შეიძლება გაკეთდეს FiveStarRating დანამატის გამოყენებით.

FiveStarRating დანამატი

FiveStarRating არის დანამატი, რომელიც ამატებს ელემენტებს MODX Revolution სისტემაში, რომლითაც შეგიძლიათ შეასრულოთ რესურსების წინა რეიტინგი ვარსკვლავების გამოყენებით.

FiveStarRating დანამატის ინსტალაცია

FiveStarRating დანამატი მდებარეობს modx.com საცავში.

ის შეიძლება დაინსტალირდეს MODX Revolution სისტემაზე "პაკეტების მართვა" გვერდზე.


FiveStarRating დანამატის გამოყენებით

ვარსკვლავის შეფასების სისტემის რესურსთან დაკავშირება ხდება თარგში ან რესურსის შინაარსში SimpleRating ფრაგმენტზე დარეკვით.

[[!SimpleRating]]

SimpleRating snippet პარამეტრები:

  • &id - რესურსის ID, რომლის რეიტინგის ჩვენებაც გსურთ (ნაგულისხმევად მიმდინარე).
  • &tpl - ბლოკი, რომელიც შეიცავს HTML ვარსკვლავის შეფასების მარკირებას (ნაგულისხმევი tplSimpleRating).

SimpleRating სნიპეტის გამოძახების მაგალითი, რომელიც მიუთითებს რესურსის ID-ზე:

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

SimpleRating ფრაგმენტის გამოძახების მაგალითი, რომელშიც მითითებულია ნაწილის სახელი:

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

SimpleRating სნიპეტი აკეთებს შემდეგს:

  • აღრიცხავს საჭირო სტილებს და სკრიპტებს წინა ბოლოზე;
  • იღებს მიმდინარე ან მითითებული რესურსის რეიტინგს და აჩვენებს მას გვერდზე;
  • აყენებს რეიტინგს აქტიურ თუ არა, იმისდა მიხედვით, მომხმარებელმა უკვე შეაფასა ეს რესურსი თუ არა.

შეფასება იგზავნება ajax-ის საშუალებით. ajax მოთხოვნა მუშავდება სერვერზე action.php ფაილით. ეს ფაილი ამოწმებს მოცემული მომხმარებლის მიერ რესურსის შეფასების შესაძლებლობას, ადგენს რეიტინგს (საჭირო ინფორმაციის ჩაწერას მონაცემთა ბაზაში) და აბრუნებს შედეგს. action.php-დან შედეგის მიღების შემდეგ JavaScript სკრიპტი აჩვენებს მას გვერდზე.

რეიტინგის მოტყუებისგან დაცვა ხორციელდება LocalStorage და IP მისამართის მეშვეობით.

საჭიროების შემთხვევაში, IP მისამართის დაცვა შეიძლება გამორთოთ. ეს კეთდება სისტემის პარამეტრის simplerating_ip "არა"-ზე დაყენებით.


რესურსების ჩვენება უმაღლესი რეიტინგებით

დასკვნის სახით, მოდით შევხედოთ, თუ როგორ შეგიძლიათ აჩვენოთ 10 ყველაზე რეიტინგული რესურსი გვერდზე. ამ ამოცანის შესასრულებლად ჩვენ გამოვიყენებთ pdoResources სნიპეტს pdoTools პაკეტიდან.

[[!pdoResources? &loadModels=`გამარტივება` &parents=`0` &innerJoin=`( "SimpleRating": ( "კლასი":"SimpleRating", "on": "modResource.id = SimpleRating.resource" )" &sortby = `("SimpleRating. rating_value":"DESC")` &select=`( "modResource":"id,pagetitle", "SimpleRating":"rating_value" )` &tpl=`@INLINE

[[+id]]. [[+გვერდის სათაური]] - [[+შეფასების_მნიშვნელობა]]

` ]]

არსებობს სტანდარტული ფუნქცია ინტერნეტში რაღაცის შესაფასებლად, რომელიც შეგიძლიათ ნახოთ ბევრ საიტზე. როგორც წესი, ეს ტექნიკურად კეთდება რამდენიმე გზით:

1. რადიოს ტიპის შეყვანის ელემენტების ნაკრები, რომელთაგან თითოეული შეესაბამება ამა თუ იმ რეიტინგს

2. ბევრი არასაჭირო და არასემანტიკური html მარკირება + javascript.

ცოტა ხნის წინ, პროექტის გაფორმებისას, მომიწია მსგავსი ამოცანის წინაშე. ცოტა ფიქრის შემდეგ ავირჩიე პირველი ვარიანტი რამდენიმე მიზეზის გამო:

- შეყვანებზე დაფუძნებული ფუნქციონალობა უკვე დანერგილია cms-ში, ამიტომ სჯობს მასზე მიჰყვეთ, ვიდრე შემდეგ აიძულოთ პროგრამისტი, მოიფიქროს თქვენი სკრიპტის „ყავარჯნები“;

– მე ზარმაცი ვარ და ზოგჯერ ჩემთვის უფრო ადვილია CSS-ის გამოგონება, ვიდრე მთელ ინტერნეტში JavaScript მოდულის ძიება, რომელიც დააკმაყოფილებს მოცემულ სიტუაციაში საჭიროებებს;

– მსგავსი მექანიზმის დანერგვა ერთხელ უკვე ვნახე და დარწმუნებული ვიყავი, რომ შესაძლებელი იყო.

CSS ვარსკვლავის რეიტინგი

ასე რომ, CSS-ის გამოყენებით რადიოს შეყვანის სტილის მექანიზმი ახალი არ არის და მე არ გამომიგონია, რა თქმა უნდა. მაგრამ რატომღაც, "CSS რეიტინგის" ძიებისას, მე ვერ ვიპოვე მზა გამოსავალი, რომელიც მომერგებოდა. ამიტომ, მე დავწერე ჩემი.

1. ჩვენ გვჭირდება გამოსახულებები (სასურველია სპრაიტში) ვარსკვლავების სახით (მზეები, კნუტები, ბუები და რაც ყველაზე მეტად მოგწონთ).

2. გადავწყვიტოთ მარკირება (ქვემოთ მარკირება სრულად არის დაწერილი მაგალითში, აქ აღვწერ მთავარ იდეას): გვაქვს შეფუთვის ელემენტი, ის ცვლის და . უფრო მეტიც, ისინი იცვლებიან უკან (ეს ძალიან მნიშვნელოვანია, რათა დაწკაპუნებისას შეძლოთ ყველა არჩეული ვარსკვლავის სტილიზაცია და ეს ასევე აუცილებელია ჰოვერის ეფექტისთვის, იხილეთ მაგალითი). შეყვანები მოდის ზემოდან, გამჭვირვალე, ისე, რომ მხოლოდ ვარსკვლავები-ეტიკეტები ჩანს.

3. როდესაც ირჩევთ ამა თუ იმ შეყვანას, იცვლება ყველა სტილის სტილები მარკირების ქვემოთ (css სელექტორის გამოყენებით ~). სინამდვილეში, ფორმაში, ისევე როგორც ჩვეულებრივ შერჩეული რადიოღილაკი, ის შემოწმებულია.

მივესალმები ყველას მომავალ გაკვეთილზე საინტერესო თემაზე JQuery ვარსკვლავი რეიტინგი, ეს არის სახელი, რომელიც, ჩემი აზრით, უფრო ზუსტად უნდა აღწერდეს ამ სკრიპტს. ასე რომ, პირველ რიგში, დავიწყოთ იმით, თუ რატომ არის საჭირო რეიტინგი და მისი გამოყენების მნიშვნელობა საიტებზე. პირველ რიგში, ეს არის პასუხის სოციალური სტატუსი ნებისმიერ მასალაზე, რომელიც იწვევს ინტერესს, იქნება ეს კარგი თუ ცუდი. მეორეც, ეს არის შეფასება და, ვთქვათ, მინი გამოკითხვა, საინტერესოა თუ არა ეს თემა საერთოდ. მესამე, როგორც ჩვენს საიტზე, თემის სირთულის დონე, თუმცა აქ ჩვენ უკვე მივდივართ სირთულიდან სპეციალურად დამწყებთათვის, გაითვალისწინეთ, და არა გამოცდილი დეველოპერების სირთულიდან, რადგან ასეთი მასალები შეიძლება უბრალოდ მათთვის საინტერესო არ იყოს და, პრინციპში, არ არის საინტერესო, გამონაკლისის გარდა, უბრალოდ მიიღეთ დასრულებული სცენარი. ამიტომ, პირადად ჩემთვის, რეიტინგი არის იმ მასალის შეფასება, რომელმაც ინტერესი გამოიწვია. მაგალითად, გაინტერესებთ მობილური ტელეფონის ან სხვა რამის ყიდვა, მიხვედით რომელიმე ონლაინ მაღაზიაში და შეგიძლიათ შეაფასოთ მისი პოპულარობა მისი რეიტინგის მიხედვით; სწორედ აქ არის პროდუქტის პოპულარობის სოციალური სტატუსი.

ახლა ზოგადად სცენარზე და ჩემს იდეებზე ვისაუბროთ. არსებითად გადავწყვიტე სცენარი ორ ნაწილად გავყო, ვფიქრობ ბევრს დააინტერესებს როგორც პირველი, ასევე მეორე ნაწილი, მაგრამ მე არ გავაერთიანე, არამედ გამოვაქვეყნე ორ სხვადასხვა სტატიაში. ჯერ ერთი, რადგან ორივე ნაწილი ერთად აღმოჩნდება საკმაოდ მნიშვნელოვანი და მეორეც, მსურს ვნახო თქვენი კომენტარები, ან იქნებ რჩევა ან შეკითხვები, მეორე ნაწილთან დაკავშირებით და მესამე, მეორე ნაწილში ის აუცილებლად იქნება გამოყენებული არა მარტო JQuery. ზოგადად, პირველ ნაწილში მინდა მოგიყვეთ ამბავი საიტის შესახებ, სადაც შეგიძლიათ მიიღოთ JQueryმოდული ამ სკრიპტისთვის, ხოლო მეორე ნაწილში, რეიტინგის შეყვანა მონაცემთა ბაზაში ვარსკვლავზე გადატვირთვის გარეშე. ამიტომ თუ გაინტერესებთ მეორე ნაწილი, ველი თქვენს მოწონებებს და კომენტარებს.

აბა, დავიწყოთ. პირველ რიგში, თქვენ აუცილებლად უნდა ეწვიოთ ამ მოდულის ოფიციალურ ვებსაიტს და გადმოწეროთ იგი. ასევე, ყურადღებით შეისწავლეთ დოკუმენტაცია თავად მოდულის დაყენებისა და სკრიპტის ნორმალური მუშაობისთვის მისი ოპტიმიზაციის შესახებ. განხილვის შემდეგ, თქვენ უნდა გქონდეთ ფაილი jquery.raty.js, თუ შესაძლებელია jquery.raty.css, თუ საჭიროა და არის ნაგულისხმევი სურათები, მათგან მხოლოდ სამია. კიდევ ერთხელ ვიტყვი, რომ ეს ყველაფერი სტანდარტულად და სტანდარტის მიხედვითაა!

Პირველი ნაწილი. js და css ფაილების დაკავშირება. HTML. სურათები.

სტანდარტის მიხედვით, ჩვენ ვაერთიანებთ სტილის ფაილს დემო.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ნაწილი თემაზე ვარსკვლავის შეფასება. ისევ ავიღებ იმ ფორმულირებას, რომ ჩვენ განვიხილავთ მხოლოდ სამ მაგალითს, რომლებიც, როგორც იქნა, სტანდარტულია.

როგორ მუშაობენ, რა, როგორ და რატომ, ზემოთ უკვე დეტალურად აღვწერე, ამიტომ მხოლოდ იმ დეტალებზე შევჩერდები, რაც შეიძლება თქვენთვის გაუგებარი იყოს.

$(დოკუმენტი).ready(function())( $(".rate1").raty(( დააწკაპუნეთ: ფუნქცია(ქულა, evt) ( alert("ID: " + this.id + "\nscore: " + ქულა ) ;) )); $(".rate2").raty(( ნომერი: 10, starOff: "img/rating_passiv.png", starOn: "img/rating_activ.png" )); $(".rate3") rate(( ნომერი: 4, სამიზნე: ".name", მინიშნებები: ["ძალიან ცუდი", "ცუდი", "კარგი", "კარგი", "ძალიან კარგი"], )); ));

კლასის ქვეშ მაჩვენებელი 1, ჩვენ ვატარებთ ფუნქციას პარამეტრებით ქულადა ევტ. რომელთაგან პირველში ვიღებთ მეთოდით გაფრთხილება ()სახელი და მეორე ID, ჩვენი არჩეული რეიტინგი. კლასის ქვეშ მაჩვენებელი 2, ჩვენ ვაყენებთ გამოსახული ვარსკვლავების რაოდენობას, უფრო სწორად, იქნება ათი მათგანი და სურათებს ვაქცევთ არა ნაგულისხმევად, არამედ ჩვენს მიერ გამოსაყენებლად, სადაც star Off- არის ვარსკვლავი, რომელიც არ არის აქტიური, მაგრამ StarOn- აქტიური. კლასის ქვეშ მაჩვენებელი 3, ჩვენ ვაყენებთ ნაჩვენები ვარსკვლავების რაოდენობას და ვმალავთ ნაგულისხმევ ვარსკვლავს ზოგადი ეკრანიდან - ძალიან ცუდი, დააყენეთ მთლიანი სტატუსის მნიშვნელობა ხუთზე.

მესამე ნაწილი. ბიბლიოთეკა jquery.raty.js.

მოდით მოკლედ განვიხილოთ თავად მოდული. თუ ეს თემა თქვენთვის ძალიან საინტერესო გახდება ან ბოლომდე ვერ გაიგებთ, მაშინ ცალკე და დეტალურად გავაანალიზებთ, შესაძლოა მეორე ნაწილის შემდეგ, თუ არის, ან შესაძლოა, როგორც ცალკე ნაწილი დანამატისთვის. ისე, მართალი გითხრათ, საკმარისია თუნდაც მცირე დოკუმენტაციის წაკითხვა და ყველაფერი მაშინვე გაირკვევა. მთავარი პუნქტი, რომელსაც ყურადღება უნდა მიაქციოთ, არის ნაგულისხმევი პარამეტრები.

გაუქმება: false, cancelClass: "raty-cancel", cancelHint: "გაუქმება ეს ნიშანი!", cancelOff: "cancel-off.png", cancelOn: "cancel-on.png", cancelPlace: "left", დააწკაპუნეთ: განუსაზღვრელი , ნახევარი: მცდარი, ნახევრადჩვენება: მართალია, მინიშნებები: ["ცუდი", "ცუდი", "რეგულარული", "კარგი", "ლამაზი"], ხატულა დიაპაზონი: განუსაზღვრელი, მაუსის ამოღება: განუსაზღვრელი, მაუსის გადატანა: განუსაზღვრელი, არაRatedMsg: "არ არის შეფასებული ჯერ!", ნომერი: 5, ნომერი მაქსიმუმი: 20, ბილიკი: განუსაზღვრელი, სიზუსტე: მცდარი, მხოლოდ წაკითხვა: მცდარი, მრგვალი: (ქვემოთ: 0.25, სრული: 0.6, ზემოთ: 0.76), ქულა: განუსაზღვრელი, ქულასახელი: "ქულა", single: false, სივრცე: true, starHalf: "star-half.png", starOff: "star-off.png", starOn: "star-on.png", starType: "img", სამიზნე: განუსაზღვრელი, targetFormat: "(ქულა)", targetKeep: false, targetScore: განუსაზღვრელი, targetText: "", targetType: "მინიშნება"

როგორც ხედავთ, მე უკვე გამოვიყენე ზოგიერთი პარამეტრი ჩემს სკრიპტში, ყურადღება მიაქციე ამას! თუ რამე ვერ გაიგეთ, შეგიძლიათ დაწეროთ კომენტარებში. გმადლობთ ყურადღებისთვის, წარმატებებს გისურვებთ ყველას განვითარებაში!

გამარჯობა ყველა ჰაკერს!
ერთ დღეს, ზამთრის ცივ საღამოს, გადავწყვიტე საიტს მთელი რეიტინგის ვარსკვლავების ნაცვლად, წილადი რიცხვების ნაწილობრივი შევსება (4.5, 3.85 და ა.შ.) დავამატო. ასე რომ, თვალისთვის უფრო ადვილია და უფრო ინფორმატიული - რომელი დაწესებულებაა უკეთესი და რომელი უარესი. ასე რომ, მე და ჩემი გუნდი ვიჯექით, რომ ვიფიქროთ და გამოვიცნოთ.
როგორ ვიპოვეთ გზა იმის გამო, რომ ჩვენ ძირითადად გვაქვს ტოპ დაწესებულებები და 3+ რეიტინგი, მთელი ვარსკვლავები მნიშვნელოვნად ბუნდოვანებენ აღქმას. მაგრამ აქ გაჩნდა რამდენიმე ნიუანსი. ყველაზე გავრცელებული პრაქტიკაა სურათების გადაფარვა ერთი მეორეზე. თავიდანვე ვიფიქრეთ, რომ ყველაფერი გაგვეკეთებინა ნიღბის გამოსახულების გამოყენებით, მაგრამ, სამწუხაროდ, დიზაინი არ ნიშნავდა იმას, რომ ვარსკვლავები შეიძლება იყვნენ ერთმანეთის გვერდით და არც ისე მოსახერხებელია შევსების ბლოკის სიგანის კონტროლი და ვარსკვლავის ზომა.

აქ კინოპოისკს აქვს 10-ვე ვარსკვლავი - ერთი სურათი, სადაც ისინიც ერთმანეთზეა მიბმული. ეს მათ ძალიან უადვილებს იმდენი ნარინჯისფერი ხატვას, რამდენიც მათ გული სურს.



.starbar .გარე (ფონი: url(/images/starz.gif) გამეორების გარეშე; სიგანე: 219 პიქსელი; სიმაღლე: 30 პიქსელი; პოზიცია: აბსოლუტური; .starbar_w (ჩვენება: ბლოკი; სიგანე: 167.09 პიქსელი; ფონი: url(/ images/starz.gif) 0 -62 პიქსელი გამეორების გარეშე; სიმაღლე: 30 პიქსელი; პოზიცია: აბსოლუტური; ) ყოველთვის არის სადმე როდი! მიუხედავად ამისა, ჩვენ გვინდოდა უნივერსალური და მასშტაბური ვარიანტი, რომელიც მთლიანად ექვემდებარება BEM მეთოდოლოგიას. გარდა ამისა, პროექტში არც ერთი სპრაიტი არ არის და ყველა ხატი განხორციელებულია ჩვენი საკუთარი ხატების ნაკრების გამოყენებით, რომლებიც ყურადღებით აწყობილია შრიფტში. მაგრამ ვფიქრობ, ამაზე სხვა სტატიებში ვისაუბრებთ;)

საერთო ჯამში, ჩვენ მივიღეთ ექსპერიმენტი: რატომ არ დავაყენოთ ჩვენი შრიფტის ხატულა მეორეზე? ასე რომ, ჩვენ გავაკეთეთ.

თითოეული ვარსკვლავი გაკეთდა ცალკე ობიექტად, რომელიც შედგებოდა .ვარსკვლავები__გარეთროგორც კონტეინერი და .ვარსკვლავები__შიროგორც შევსება.


და აქ არის CSS:

Cfi.cfi--star ( /* ... */) /* ჩვენი ანალოგი Font Awesome, რომელიც ხაზავს ვარსკვლავს */ .stars__out ( პოზიცია: შედარებითი; ზღვარი მარჯვნივ: 5 პიქსელი; /* გააკეთეთ შეწევა ვარსკვლავებს შორის */ ფერი: ნაცრისფერი; z-ინდექსი: 1; ) .stars__in ( /* მოდი დავდოთ ჩვენი შევსება, როგორც მთავარი ხატის შვილი და გადავაგდოთ თავზე */ პოზიცია: აბსოლუტური; z-ინდექსი: 2; ფერი: ნარინჯისფერი; /* მიეცით მას მზიანი ფერი */ font -size: inherit; /* და შრიფტი არის მშობლის ზომა */ /* ჩვენ მივცემთ ბლოკს საანგარიშო ქულებს მშობელთან შედარებით ნულებზე დაყრდნობით */ ჩვენება: ბლოკი ; ზედა: 0; მარცხნივ: 0; ქვედა: 0; /* კარგად, ჩვენ შევზღუდავთ ხილვადობის არეალს და ასევე დავაყენებთ სიგანეს ნაგულისხმევად 0-ზე */ overflow: დამალული; სიგანე: 0; )

ყველა. შემდეგ, როდესაც უნდა შეავსოთ ის 100%-მდე (სრული ვარსკვლავი), ჩვენ უბრალოდ ვაძლევთ მას CSS თვისებას სიგანე: 100%.
მაგრამ არასრული ვარსკვლავებისთვის ჩვენ სხვა ხრიკი გამოვიყენეთ. ჩვენ დავაყენეთ სიგანე არა x*100%, ხოლო მნიშვნელობა სპეციალურად გამოთვლილი ფორმულის მიხედვით.
ეს ყველაფერი ფსიქოლოგიაზეა. ჩვენ ვიზუალურად აღვიქვამთ მოცულობის შევსების პროცენტს და არა სიგანეში, და რადგან მარცხნივ და მარჯვნივ ვარსკვლავს აქვს ძალიან მცირე ფართობი, რაც ართულებს აღქმას, ჩვენ გაგვიჩნდა იდეა, რომ შევსება არა სიგანეში. -წრფივი:


არაწრფივი მოდელისთვის ავიღეთ სინუსოიდი. ის შესანიშნავად აღწერს ზრდის სწრაფ დაწყებას და დასასრულს და გლუვ ზრდას შუაში.
ჩვენ გავშალეთ იგი, მივიღეთ არსინი, ჩავჭყლიტეთ ჩარჩოში (0; 1) ორივე ღერძზე და მივიღეთ კარგი და მარტივი ფორმულა ვარსკვლავის „ფსიქოლოგიური სისავსის“ გამოსათვლელად.

JavaScript კოდი:
var y = Math.asin(2 * x - 1) / Math.PI + 0.5;

როგორც ირკვევა, ეს პრინციპი კარგად მუშაობს ძველ ბრაუზერებში და IE9-ზეც კი არაფერი მუშაობს. ყველა ბედნიერი იყო: დიზაინერებიც, მომხმარებლებიც და ჩემი ეგოაც კი, რამაც სტატიის დაწერისკენ მიბიძგა.

ვარსკვლავის საჩვენებლად გამოვიყენებთ HTML-ში ვარსკვლავის სიმბოლოს ათობითი კოდს, კერძოდ: ☆.

HTML ☆☆☆☆☆

ჩვენ გვჭირდება, როდესაც მაუსის ატარებთ შესაბამის ვარსკვლავზე, ჩავდოთ მყარი ყვითელი ვარსკვლავი „ღრუბელ“ ვარსკვლავში. მარტივი: უბრალოდ მოათავსეთ მყარი ვარსკვლავი ფსევდო ელემენტის გამოყენებით ღრუ ვარსკვლავის თავზე.

CSS .rating > span:hover:fore ( შინაარსი: "\2605"; პოზიცია: აბსოლუტური; )

ჩვენ აბსოლუტურად განვათავსებთ მყარ ვარსკვლავს და, ამრიგად, ჩვენი ვარსკვლავი დაფარავს ღრუ ვარსკვლავს.

მაგრამ ჯერჯერობით ყველაფერი ჩვენთვის მუშაობს მხოლოდ თითოეული კონკრეტული ვარსკვლავისთვის. და ჩვენი ამოცანა, უკეთესი მომხმარებლის გამოცდილებისთვის, არის შევავსოთ ყველა ვარსკვლავი (რომელ ვარსკვლავზე მიუთითებს მაუსი). მაგალითად, თუ მომხმარებელი ატარებს მაუსს მე-4 ვარსკვლავზე, მაშინ აუცილებელია აჩვენოს 4 ვარსკვლავი, თუ მე-5, მაშინ 5 და ა.შ.

არ არსებობს გზა CSS-ის მეშვეობით წინა მიმდებარე ელემენტის არჩევისთვის. თუმცა, არსებობს გზა, რომ აირჩიოთ შემდეგი შვილობილი ელემენტები, .

თუ ჩვენ სიტყვასიტყვით შევცვლით სიმბოლოებს (ნაწყვეტი ამაში დაგვეხმარება - ), მაშინ შეგვიძლია გამოვიყენოთ შესაბამისი კომბინატორი ყველა ვარსკვლავის ასარჩევად, რომლებიც ჩნდება მაუსის გადატანის ვარსკვლავამდე, მაგრამ შემდეგ HTML-ში.

CSS .rating ( unicode-bidi: bidi-override; მიმართულებით: rtl; ) .rating > span:hover:fore, .rating >

ასე რომ, ჩვენ შევქმენით მოსახერხებელი ვარსკვლავის შეფასების შაბლონი პატარა კოდის გამოყენებით. ქვემოთ მოცემულია სრული CSS კოდი რეიტინგის მუშაობისთვის:

CSS .რეიტინგი ( unicode-bidi: bidi-override; მიმართულება: rtl; ) .rating > span (ჩვენება: inline-block; პოზიცია: შედარებითი; სიგანე: 1.1em; ) .rating > span:hover:fore, .rating > span:hover ~ span:fore ( შინაარსი: "\2605"; პოზიცია: აბსოლუტური; ) ფაქტობრივი გამოყენება

სავარაუდოდ, ჯავასკრიპტის მონაწილეობის გარეშე შეუძლებელი იქნება. როდესაც მომხმარებელი დააჭერს ვარსკვლავს, ajax მოთხოვნა იგზავნება სერვერზე და ვიჯეტი იღებს კლასს, რომლის მეშვეობითაც ნაჩვენებია ვარსკვლავების შერჩეული რაოდენობა. მართლა შეუძლებელია javascript-ზე დაყრდნობა, თუ ის ყველგან გამოიყენება საიტზე, ასეთი ვარსკვლავური სისტემის დანერგვაზე? თუ თქვენი აპლიკაცია მთლიანად javascript-ზეა დამოკიდებული, მაშინ ეს ვარიანტი ნამდვილად შესაფერისია. მაგრამ, თუ თქვენმა საიტმა უნდა იმუშაოს JavaScript-ის გამოყენების გარეშე, მაშინ ამ ვარსკვლავის რეიტინგის მიღებას გაცილებით მეტი სამუშაო დასჭირდება. შეგიძლიათ იხილოთ ლეა ვერუსის მაგალითი, რომელიც იყენებს რადიო ღილაკებს ფორმის ნაწილად და არ იყენებს javascript-ს.



 

შეიძლება სასარგებლო იყოს წაკითხვა: