Рейтинг под формата на звезди с изчисление. Как разделяме рейтинговите звезди

В тази статия ще разгледаме как да добавите звездна оценка към статии в сайта.

Добавянето на тази функционалност към системата CMS MODX Revolution може да стане с помощта на добавката FiveStarRating.

Добавка FiveStarRating

FiveStarRating е добавка, която добавя елементи към системата MODX Revolution, с която можете да извършвате първоначална оценка на ресурси с помощта на звезди.

Инсталиране на добавката FiveStarRating

Добавката FiveStarRating се намира в хранилището на modx.com.

Може да се инсталира в системата MODX Revolution на страницата „Управление на пакети“.


Използване на добавката FiveStarRating

Свързването на система за оценка със звезди към ресурс се извършва чрез извикване на фрагмента SimpleRating в шаблона или съдържанието на ресурса.

[[!SimpleRating]]

Параметри на фрагмента SimpleRating:

  • &id - идентификатор на ресурса, за който искате да покажете рейтинга (текущ по подразбиране).
  • &tpl - част, съдържаща маркировка за оценка със звезди в HTML (по подразбиране tplSimpleRating).

Пример за извикване на фрагмента SimpleRating, указващ идентификатора на ресурса:

[[!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=`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]]. [[+pagetitle]] - [[+rating_value]]

` ]]

Има стандартна функционалност за оценка на нещо в мрежата, която може да се намери на много сайтове. Обикновено това технически се прави по няколко начина:

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. Изображения.

Съгласно стандарта включваме стиловия файл demo.cssи необходимата библиотека за работа jquery.min.js, плъгин jquery.raty.jsи нашия сценарий rate.js.

След това към основата на скрипта добавете три снимки, които идват по подразбиране: звезда-на.png- пълна оценка, star-off.png- без оценка, звезда-половина.png- половин оценка. Ако имате свои собствени снимки и искате да ги използвате, можете да ги създадете, например, както направих аз. Създадох папка imgи качи две снимки там: rating_activ.png- активна звезда, rating_passiv.png- неактивна звезда.

Сега нека да преминем към HTMLкод. И бих искал веднага да отбележа, че ще публикуваме само три примера според стандарта; всички останали можете да намерите на официалния уебсайт, който е посочен в източника на материали.

Първи пример.

Когато щракнете върху звездичката, веднага се появява прозорец, извикан от метода тревога(), в който можем да видим на коя звезда сме кликнали и каква оценка сме избрали.

Втори пример.

Когато щракнете върху звездата, рейтингът също се изчислява. За демонстрация моите снимки бяха инсталирани под формата на звезди, които се намират в папката img.

Трети пример.

Заслужава да се отбележи, че когато щракнете, всички звезди се запазват в рейтинга, в който сте ги кликнали, но не в базата данни, а в клиентската част. Затова реших да направя дискусия за втората част, където е възможно да се разработи пълноценно запазване на оценки и броене на кликвания като цяло. Тоест общата оценка ще се съхранява в базата данни.

Втора част. JQuery.

Сега можем да разгледаме JQueryчаст по темата рейтинг със звезди. Отново ще приема формулировката, че разглеждаме само три примера, които са като че ли стандартни.

Как работят, какво, как и защо, вече описах подробно по-горе, така че ще се спра само на подробностите, които може би не са ви ясни.

$(document).ready(function())( $(".rate1").raty(( click: function(score, evt) ( alert("ID: " + this.id + "\nscore: " + score ) ; ) )); $(".rate2").raty(( число: 10, starOff: "img/rating_passiv.png", starOn: "img/rating_activ.png" )); $(".rate3") . rate(( number: 4, target: ".name", hints: ["много лошо", "лошо", "добре", "добро", "много добро"], )); ));

Под класа ставка1, изпълняваме функцията с параметри резултатИ евт. В първия от които получаваме по метода тревога()името, и второ документ за самоличност, избраната от нас оценка. Под класа ставка2, задаваме броя на показваните звезди, или по-скоро ще има десет от тях, и правим изображенията приложими не по подразбиране, а по наши собствени, където starOff- е звездичка, която не е активна, но StarOn- активен. Под класа ставка3, задаваме броя на показваните звезди и скриваме звездата по подразбиране от общия дисплей - много лошо, задавайки общата стойност на състоянието на пет.

Третата част. Библиотека jquery.raty.js.

Нека обсъдим накратко самия плъгин. Ако тази тема ви стане много интересна или не можете да я разберете напълно, тогава ще я анализираме отделно и подробно, може би след втората част, ако има такава, или може би като отделна част за плъгина. Е, честно казано, достатъчно е дори да прочетете малко документация и всичко веднага ще стане ясно. Основната точка, на която трябва да обърнете внимание, са настройките по подразбиране.

Cancel: false, cancelClass: "raty-cancel", cancelHint: "Отменете тази оценка!", cancelOff: "cancel-off.png", cancelOn: "cancel-on.png", cancelPlace: "left", click: undefined , half: false, halfShow: true, съвети: ["лош", "лош", "обикновен", "добър", "великолепен"], iconRange: недефиниран, mouseout: недефиниран, mouseover: недефиниран, noRatedMsg: "Не е оценен още!", номер: 5, numberMax: 20, път: недефиниран, прецизност: невярно, само за четене: невярно, закръглено: (надолу: 0,25, пълно: 0,6, нагоре: 0,76), резултат: недефиниран, scoreName: "резултат", единичен: невярно, интервал: вярно, starHalf: "star-half.png", starOff: "star-off.png", starOn: "star-on.png", starType: "img", target: недефиниран, targetFormat: "(резултат)", targetKeep: невярно, targetScore: недефиниран, targetText: "", targetType: "подсказка"

Както можете да видите, вече съм използвал някои от тези настройки в моя скрипт, обърнете внимание на това! Ако не разбирате нещо, можете да го напишете в коментарите. Благодаря за вниманието, успех на всички в развитието!

Здравейте на всички хакери!
Един ден, в една студена зимна вечер, реших да добавя към сайта, вместо цели рейтинг звезди, частично попълване за дробни числа (4,5, 3,85 и т.н.). Така че е по-лесно за окото и по-информативно - кое заведение е по-добро и кое е по-лошо. Така че моят екип и аз седнахме да мислим и гадаем.
Как се ориентирахме Тъй като имаме предимно топ заведения и рейтинг 3+, целите звезди силно замъгляват възприятието. Но тук се появиха някои нюанси. Най-честата практика е наслагването на изображения едно върху друго. От самото начало мислехме да правим всичко, използвайки изображение на маска, но, уви, дизайнът не означаваше, че звездите могат да бъдат една до друга и не е много удобно да се контролира ширината на блока за запълване и размер на звездата.

Тук Kinopoisk има всичките 10 звезди - една снимка, където също са залепени една за друга. Това ги прави много лесни да рисуват толкова оранжево, колкото сърцето им иска.



.starbar .outer (фон: url(/images/starz.gif) без повторение; ширина: 219px; височина: 30px; позиция: абсолютна; ) .starbar_w (дисплей: блок; ширина: 167.09px; фон: url(/ images/starz.gif) 0 -62px без повторение; височина: 30px; позиция: абсолютна; ) Винаги има къде да се разхождате! Все пак искахме универсална и мащабируема опция, изцяло подчинена на BEM методологията. Освен това в проекта няма нито един спрайт и всички икони се изпълняват с помощта на нашия собствен набор от икони, внимателно събрани в шрифт. Но мисля, че ще говорим за това в други статии;)

Като цяло измислихме експеримент: защо да не поставим нашата икона на шрифт върху друга? Така че го направихме.

Всяка звезда е направена в отделен обект, състоящ се от .stars__outкато контейнер и .stars__inкато пълнеж.


А ето и CSS:

Cfi.cfi--star ( /* ... */ ) /* нашият аналог на Font Awesome, който рисува звезда */ .stars__out ( position: relative; margin-right: 5px; /* прави отстъп между звездите */ цвят: сив; z-индекс: 1; ) .stars__in ( /* нека поставим нашето запълване като дете на основната икона и да го хвърлим отгоре */ позиция: абсолютно; z-индекс: 2; цвят: оранжево; /* придайте му слънчев цвят */ font -size: inherit; /* и шрифтът е с размера на родителя */ /* ще дадем точки за отчитане на блока на базата на нули спрямо родителя */ display: block ; отгоре: 0; отляво: 0; отдолу: 0; /* добре, ще ограничим зоната на видимост и също ще зададем ширината на 0 по подразбиране */ overflow: hidden; width: 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:before ( съдържание: "\2605"; позиция: абсолютна; )

Ние абсолютно позиционираме плътната звезда и по този начин нашата звезда ще покрие кухата звезда.

Но засега всичко работи при нас само за всяка конкретна звезда. И нашата задача, за по-добро потребителско изживяване, е да запълним всички звезди (в зависимост от звездата, към която сочи мишката). Например, ако потребителят задържи мишката върху 4-та звезда, тогава е необходимо да се покажат 4 звезди, ако е на 5-та, тогава 5 и т.н.

Няма начин да изберете предишния съседен елемент чрез CSS. Има обаче начин да изберете следващите дъщерни елементи, чрез .

Ако буквално обърнем знаците (фрагментът ще ни помогне с това -), тогава можем да използваме свързан комбинатор, за да изберем всички звезди, които се появяват преди звездата с мишката, но след това в HTML.

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

Затова създадохме удобен за потребителя шаблон за оценка със звезди, използвайки малко код. По-долу е пълният CSS код, за да работи оценката:

CSS .rating ( unicode-bidi: bidi-override; direction: rtl; ) .rating > span ( display: inline-block; position: relative; width: 1.1em; ) .rating > span:hover:before, .rating > span:hover ~ span:before ( съдържание: "\2605"; позиция: абсолютна; ) Действително използване

Най-вероятно няма да е възможно да се направи без участието на javascript. Когато потребителят щракне върху звезда, към сървъра се изпраща ajax заявка и джаджата получава клас, чрез който се показва избраният брой звезди. Наистина ли е невъзможно да се разчита на javascript, ако се използва навсякъде в сайта, за внедряване на такава звездна система? Ако вашето приложение зависи изцяло от javascript, тогава тази опция със сигурност е подходяща. Но ако вашият сайт трябва да работи без javascript, тогава получаването на тази оценка със звезди ще изисква много повече работа. Можете да видите примера на Lea Verous, който използва радио бутони като част от формуляр и не използва javascript.



 

Може да е полезно да прочетете: