Patrzyłem na wtyczkę jquery i zastanawiałem się, jak dostosować tę wtyczkę, aby zamienić liczbę (na przykład 4,8618164) w 4,8618164 gwiazdki wypełnione z 5. Zasadniczo interpretowanie liczby <5 na gwiazdki wypełnione w 5-gwiazdkowym systemie ocen przy użyciu jQuery / JS / CSS.
Zwróć uwagę, że spowoduje to wyświetlenie / wyświetlenie oceny gwiazdek z już dostępnej liczby i nie akceptację nowych zgłoszeń ocen.
javascript
jquery
css
rating
Steve
źródło
źródło
Odpowiedzi:
Oto rozwiązanie dla Ciebie, wykorzystujące tylko jeden bardzo mały i prosty obraz oraz jeden automatycznie generowany element span:
CSS
Wizerunek
Uwaga: nie NIE Hotlink na powyższy obrazek! Skopiuj plik na własny serwer i używaj go stamtąd.
jQuery
Jeśli chcesz ograniczyć gwiazdy tylko do połowy lub ćwiartki gwiazd, dodaj jeden z tych wierszy przed
var size
rzędem:HTML
Stosowanie
Wynik
Próbny
Prawdopodobnie będzie to odpowiadało Twoim potrzebom. Dzięki tej metodzie nie musisz obliczać żadnych trzech czwartych lub jakichkolwiek innych szerokości gwiazd, po prostu nadaj jej wartość zmienną, a otrzymasz swoje gwiazdy.
Krótkie wyjaśnienie, w jaki sposób są przedstawiane gwiazdy, może być w porządku.
Skrypt tworzy dwa elementy zakresu na poziomie bloku. Oba rozpiętości mają początkowo rozmiar 80px * 16px i obraz tła stars.png. Przęsła są zagnieżdżone, dzięki czemu struktura przęseł wygląda następująco:
Zewnętrzne przęsło ma wartość
background-position
of0 -16px
. To sprawia, że widoczne są szare gwiazdy na przęśle zewnętrznym. Ponieważ zewnętrzne przęsło ma wysokość 16 pikseli irepeat-x
będzie pokazywać tylko 5 szarych gwiazd.Z drugiej strony wewnętrzna rozpiętość ma,
background-position
z0 0
którego widoczne są tylko żółte gwiazdy.To oczywiście działałoby z dwoma oddzielnymi plikami graficznymi, star_yellow.png i star_gray.png. Ale ponieważ gwiazdy mają stałą wysokość, możemy łatwo połączyć je w jeden obraz. Wykorzystuje to technikę sprite CSS .
Teraz, gdy przęsła są zagnieżdżone, są one automatycznie nakładane na siebie. W przypadku domyślnym, gdy szerokość obu rozpiętości wynosi 80 pikseli, żółte gwiazdy całkowicie zasłaniają szare gwiazdy.
Ale kiedy dostosujemy szerokość wewnętrznej rozpiętości, szerokość żółtych gwiazd zmniejsza się, odsłaniając szare gwiazdy.
Z
text-indent: -9999px
punktu widzenia dostępności rozsądniej byłoby pozostawić liczbę zmiennoprzecinkową wewnątrz wewnętrznej rozpiętości i ukryć ją za pomocą , tak aby osoby z wyłączonym CSS widziały przynajmniej liczbę zmiennoprzecinkową zamiast gwiazd.Mam nadzieję, że to miało jakiś sens.
Zaktualizowano 2010/10/22
Teraz jeszcze bardziej kompaktowy i trudniejszy do zrozumienia! Można go również ścisnąć do jednej wkładki:
źródło
max-width
).Jeśli potrzebujesz tylko obsługi nowoczesnych przeglądarek, możesz uciec:
Wystarczy przekonwertować numer na
class
npclass='stars-score-50'
.Najpierw demo „renderowanych” znaczników:
Następnie demo, które używa odrobiny kodu:
Największe wady tego rozwiązania to:
width
ustawienia pseudoelementu).Aby to naprawić, powyższe rozwiązanie można łatwo zmienić.
:before
i:after
bity muszą stać się rzeczywiste elementy DOM (więc musimy trochę JS do tego).Ten ostatni pozostawiamy jako ćwiczenie dla czytelnika.
źródło
Wypróbuj tę funkcję / plik pomocnika jquery
jquery.Rating.js
index.html
źródło
Dlaczego nie mieć po prostu pięciu oddzielnych obrazów gwiazdy (pustych, w jednej czwartej, w połowie, w trzech czwartych i pełne), a następnie po prostu wstrzyknąć obrazy do swojego DOM w zależności od obciętej lub zaokrąglonej wartości oceny pomnożonej przez 4 ( uzyskać liczbę całkowitą za ćwiartki)?
Na przykład 4,8618164 pomnożone przez 4 i zaokrąglone to 19, co oznaczałoby cztery i trzy czwarte gwiazdy.
Alternatywnie (jeśli jesteś leniwy jak ja), po prostu wybierz jeden obraz z 21 (od 0 do 5 gwiazdek w odstępach co jedną czwartą) i wybierz pojedynczy obraz na podstawie wspomnianej wartości. Wtedy to tylko jedno obliczenie, po którym następuje zmiana obrazu w DOM (zamiast próby zmiany pięciu różnych obrazów).
źródło
Skończyło się na tym, że całkowicie uwolniłem się od JS, aby uniknąć opóźnień renderowania po stronie klienta. Aby to osiągnąć, generuję HTML w następujący sposób:
Aby pomóc w ułatwieniu dostępu, dodaję nawet surową wartość oceny w atrybucie tytułu.
źródło
używając jquery bez prototypu, zaktualizuj kod js do
Dodałem również atrybut danych o nazwie ocena danych w zakresie.
źródło
PRÓBNY
Możesz to zrobić tylko z 2 obrazami. 1 puste gwiazdki, 1 wypełnione gwiazdki.
Nałóż wypełniony obraz na drugi. i zamień ocenę na procent i użyj jej jako szerokości obrazka wypełniającego.
źródło
Oto moje spojrzenie na użycie JSX i niesamowitych czcionek, jednak ograniczone tylko do dokładności 0,5:
Pierwszy rząd dotyczy całej gwiazdy, a drugi pół gwiazdki (jeśli występuje)
źródło