Bu eğitimde CSS'nin inanılmaz gücünü öğreneceğiz ve saf CSS'de yıldız derecelendirmeleri oluşturacağız. Ne yazık ki, Webkit motorunu temel alan bazı eski tarayıcılarda, kardeş ve komşu seçicilerin yanlış çalışması nedeniyle bu derecelendirme çalışmayacaktır. Ancak tüm modern tarayıcılarda iyi çalışıyor.
Derecelendirme oluştururken, JavaScript kullanmamanın mümkün olup olmadığı sorusunu sorduk ve kendimizi yalnızca CSS ile sınırladık. Ve bu mümkün. Ryan Seddon'ın özel radyo düğmeleri oluşturmanın CSS yöntemiyle, birden fazla radyo düğmesini renk değiştiren yıldızlara dönüştürebilirsiniz; eğitimimizde yalnızca unicode karakterler renk değiştirir, ancak görüntüleri de kullanabilir ve renkleri ayarlamak için kardeş ve komşu seçicileri kullanabilirsiniz. yıldızlara.
Radyo düğmeleri genellikle yıldız derecelendirmesi oluşturmak için kullanılır, bu nedenle işaretleme size alışılmadık gelmeyebilir. Farklı olarak yapılabilecek tek şey yıldızların sırasını tersine çevirmektir: CSS3 seçicilerin çalışma şekli nedeniyle en yüksek sıralama önce gelmelidir, bu kısıtlama CSS4'te kaldırılabilir, ancak bu hala çok uzakta.
Elbette, eğer oylama sonuçları AJAX aracılığıyla kaydedilecekse, bir olay işleyicisi atamak için JavaScript'e ihtiyaç duyulacaktır, ancak normal bir formun parçası olarak çalışabilen derecelendirmenin kendisi için durum böyle değildir.
:checked (checked) sözde sınıfını desteklemeyen tarayıcılarda, özellikle de sürüm 9'un altındaki Internet Explorer'da, derecelendirmenin radyo düğmeleri olarak görünmesi gerekir, ancak biz kontrol etmedik.
Peki, şöyle oluyor:
HTML Kodu
Lütfen değerlendirin: 5 yıldız 4 yıldız 3 yıldız 2 yıldız 1 yıldız
CSS kodu
Rating ( float:left ; ) /* :not(:checked) yapısı bir filtre görevi görerek, :checked sözde sınıfını desteklemeyen tarayıcıların bu özellikleri uygulamamasını sağlar. :checked sözde sınıfını destekleyen tüm tarayıcılar aynı zamanda :not() sözde sınıfını da destekler, dolayısıyla filtrenin düzgün çalışması gerekir. */ .rating :not (:checked ) > input ( konum:mutlak ; üst:-9999px ; klip:rect (0 ,0 ,0 ,0 ) ; ) .rating :not (:checked ) > label ( float:right ; genişlik:1em ; dolgu:0 .1em ; taşma:gizli ; beyaz boşluk:nowrap ; imleç:işaretçi ; yazı tipi boyutu:%200; satır yüksekliği:1 .2 ; renk :#ddd ; metin gölgesi:1px 1px #bbb , 2px 2px #666 , .1em .1em .2em rgba(0 ,0 ,0 ,.5 ) ; ) .rating :not (:checked ) > label:before ( content : "★ " ; ) .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 ~ label ( color : gold; text-shadow:1px .1em .1em .2em rgba(0 ,0 ,0 ,.5 ) ; ) .rating > input:checked + label:hover , .rating > input:checked + label:hover ~ label, .rating > input:checked ~ label:hover , .rating > input:checked ~ label:hover ~ label, . derecelendirme > etiket:hover ~ giriş:işaretli ~ etiket ( color : #ea0 ; text-shadow:1px 1px altın başak, 2px 2px #B57340 , .1em .1em .2em rgba(0 ,0 ,0 ,.5 ) ; ) .rating > label:active ( konum:göreli ; üst:2 piksel ; sol:2 piksel ; )
Tüm hilecilere merhaba!Soğuk bir kış akşamında, siteye tam derecelendirme yıldızları yerine kesirli sayıların kısmi doldurulması (4,5, 3,85 vb.) eklemek beni bir şekilde aldı. Sonuçta göz daha güzel ve daha bilgilendiricidir - hangi kurum daha iyi, hangisi daha kötü. Bu yüzden düşünmek ve tahmin etmek için ekiple birlikte oturduk.
Yolumuzu nasıl arıyorduk Çoğunlukla en iyi kuruluşlara ve 3+ derecelendirmeye sahip olduğumuz için, tam yıldızlar algıyı büyük ölçüde bulanıklaştırıyor. Ama burada nüanslar var. En yaygın uygulama, görüntü katmanlarını üst üste kullanmaktır. En başından beri her şeyi bir maske görüntüsü kullanarak yapmayı düşündük, ancak ne yazık ki tasarım yıldızların yan yana olabileceği anlamına gelmiyordu ve dolgu bloğunun genişliği ile yıldızın boyutunun kontrol edilmesi pek de kolay değil uygun.
Burada Kinopoisk'te 10 yıldızın tümü var - bunların da birbirine yapıştırıldığı bir resim. Yani turuncunun üzerini canının istediği kadar boyamak onlar için çok kolaydır.
.starbar .outer ( arka plan: url(/images/starz.gif) tekrarlanmaz; genişlik: 219 piksel; yükseklik: 30 piksel; konum: mutlak; ) .starbar_w ( ekran: blok; genişlik: 167,09 piksel; arka plan: url(/ Images/starz.gif) 0 -62px tekrarlama yok; yükseklik: 30px; konum: mutlak; ) Her zaman dolaşacak bir yer vardır! Yine de tamamen BEM metodolojisine bağlı, evrensel ve ölçeklenebilir bir seçenek istedik. Ek olarak, projede tek bir hareketli grafik yoktur ve tüm simgeler, dikkatlice bir yazı tipi halinde bir araya getirilmiş kendi simge setimiz kullanılarak uygulanmaktadır. Ama sanırım bunu başka yazılarda konuşacağız;)
Genel olarak bir deneye geldik: neden yazı tipi simgemizi başka bir simgenin üzerine yerleştirmiyoruz? Biz de başardık.
Her yıldız ayrı bir nesneye dönüştürüldü; .stars_out bir konteyner olarak ve .stars__in dolgu olarak.
Ve işte CSS:
Cfi.cfi--star ( /* ... */ ) /* yıldız çizen Font Awesome karşılığımız */ .stars__out ( konum: göreceli; sağ kenar boşluğu: 5 piksel; /* yıldızlar arasındaki boşluk */ renk: gri ; z-index: 1; ) .stars__in ( /* dolgumuzu ana simgenin çocuğu olarak yerleştirip en üste bırakın */ pozisyon: mutlak; z-index: 2; color: orange; /* rengi şu şekilde ayarlayalım: sun */ font -size: inherit; /* ve ebeveynin yazı tipi boyutu */ /*, bloğa ebeveyne göre sıfır tabanlı bir referans noktası verir */ display: blok; top: 0; left: 0; Bottom: 0; /* peki, kapsamı sınırlayın ve ayrıca genişliği varsayılan olarak 0'a ayarlayın */ overflow: gizli; genişlik: 0; )
Tüm. Daha sonra, %100'ü (tam yıldız işareti) doldurmamız gerektiğinde, ona sadece bir CSS özelliği veriyoruz genişlik: %100.
Ancak tamamlanmamış yıldızlar için başka bir numara kullandık. Genişliği biz ayarlamadık x * %100 ve özel olarak hesaplanmış bir formüle göre değer.
Her şey psikolojiyle ilgili. Genişlik olarak değil hacim olarak doldurma yüzdesini görsel olarak algılama eğilimindeyiz ve sol ve sağdaki yıldızın çok küçük bir alanı olması nedeniyle algıyı zorlaştırdığı için onu genişlikte doldurma fikrini ortaya attık. -doğrusal olarak: 
Doğrusal olmayan model için bir sinüzoid aldık. Büyümenin hızlı başlangıcını ve sonunu, ortadaki düzgün büyümeyi mükemmel bir şekilde anlatıyor.
Onu açtık, arsin elde ettik, her iki eksende de çerçeveye (0; 1) sıkıştırdık ve bir yıldızın "psikolojik doluluğunu" hesaplamak için iyi ve basit bir formül elde ettik.
JavaScript kodu:
var y = Math.asin(2 * x - 1) / Math.PI + 0,5;
Görünen o ki, bu prensip eski tarayıcılarda iyi çalışıyor, hatta IE9'da hiçbir şey çalışmıyor. Herkes mutluydu: tasarımcılar, müşteriler ve hatta beni bu makaleyi yazmaya iten egom bile.
Herkesi ilginç bir konu olan JQuery yıldız derecelendirmesi hakkındaki bir sonraki derse davet ediyorum, bence bu komut dosyasını daha doğru bir şekilde tanımlaması gereken isim bu. O halde öncelikle derecelendirmeye neden ihtiyaç duyulduğu ve sitelerde kullanımının anlamı ile başlayalım. Öncelikle bu, iyi ya da kötü ilgi uyandıran herhangi bir materyale verilen yanıtın sosyal statüsüdür. İkincisi, bu bir değerlendirme ve diyelim ki bu konunun ilgi çekici olup olmadığına dair mini bir anket. Üçüncüsü, sitemizde olduğu gibi, konunun karmaşıklık düzeyi, burada zaten özellikle yeni başlayanlar için karmaşıklıktan ilerliyoruz, unutmayın, deneyimli geliştiriciler için karmaşıklıktan değil, çünkü bu tür materyaller onlar için ilginç olmayabilir ve prensip olarak ilginç değiller, istisna dışında sadece bitmiş senaryoyu alın. Bu nedenle kişisel olarak benim için derecelendirme, ilgi uyandıran malzemenin bir değerlendirmesidir. Örneğin, bir cep telefonu veya başka bir şey satın almakla ilgileniyorsanız, bir çevrimiçi mağazaya gittiniz ve popülerliğini derecelendirmesine göre değerlendirebilirsiniz; ürünün popülerliğinin sosyal statüsü burada yatmaktadır.
Şimdi genel olarak senaryodan ve fikirlerimden bahsedelim. Esasen senaryoyu iki parçaya ayırmaya karar verdim, hem birinci hem de ikinci bölümün pek çok kişinin ilgisini çekeceğini düşünüyorum ama birleştirmedim, iki farklı yazı halinde yayınladım. Birincisi, her iki bölüm birlikte oldukça önemli olacağı için ve ikinci olarak, ikinci bölümle ilgili yorumlarınızı, belki de tavsiyelerinizi veya sorularınızı görmek isterim ve üçüncüsü, ikinci bölümde kesinlikle sadece kullanılacak değil jQuery. Genel olarak ilk bölümde sizlere alabileceğiniz site hakkında bir hikaye yapmak istiyorum. jQuery Bu scriptin eklentisini ve ikinci bölümde yeniden yükleme yapmadan veritabanındaki yıldız işaretine tıkladığınızda derecelendirmeyi giriyorsunuz. Bu nedenle ikinci bölüme ilginiz varsa beğeni ve yorumlarınızı bekliyorum.
Peki başlayalım. Öncelikle mutlaka bu eklentinin resmi web sitesini ziyaret etmeli ve indirmelisiniz. Ayrıca, eklentinin kendisini kurma ve betiğin normal çalışması için optimize etme ile ilgili belgeleri dikkatlice inceleyin. İnceledikten sonra bir dosyanız olmalıdır jquery.raty.js, Eğer mümkünse jquery.raty.css, eğer gerekliyse ve varsayılan görseller varsa, bunlardan yalnızca üç tanesi vardır. Tekrar söylüyorum, bunların hepsi varsayılan olarak ve standarda göredir!
İlk kısım. Js ve css dosyaları dahil. HTML. Görüntüler.
Standarda göre stil dosyasını dahil ediyoruz demo.css ve çalışmak için gerekli kütüphane jquery.min.js, Eklenti jquery.raty.js ve senaryomuz oran.js.
Komut dosyasının köküne girdikten sonra, varsayılan olarak gelen üç resmi ekleyin: yıldız-on.png- tam derecelendirme, star-off.png- derecelendirme yok yıldız-yarım.png- yarı yarıya derecelendirme. Eğer kendinize ait resimleriniz varsa ve bunları kullanmak istiyorsanız, örneğin benim yaptığım gibi oluşturabilirsiniz. Bir klasör oluşturdum img ve oraya iki resim yükledim: rating_activ.png- aktif yıldız, rating_passiv.png- aktif bir yıldız işareti değil.
Şimdi devam edelim HTML kod. Ve standarda göre sadece üç örnek yayınlayacağımızı hemen belirtmek isterim, geri kalan her şeyi materyallerin kaynağında belirtilen resmi web sitesinde bulabilirsiniz.
İlk örnek.
Yıldıza tıkladığınızda, yöntemle çağrılan bir pencere hemen açılır. uyarı() hangi yıldıza tıkladığımızı ve hangi derecelendirmeyi seçtiğimizi görebiliyoruz.
İkinci örnek.
Bir yıldıza tıkladığınızda derecelendirme de hesaplanır. Gösterim için resimlerim klasörde bulunan yıldız işareti biçiminde yerleştirildi. img.
Üçüncü örnek.
Tıkladığınızda, tüm yıldızların, tıkladığınızla aynı derecelendirmeye göre kaydedildiğini, ancak veritabanında değil, istemci tarafında kaydedildiğini belirtmekte fayda var. Bu nedenle, genel olarak derecelendirmenin tam teşekküllü bir şekilde korunmasını ve tıklamaların hesaplanmasını geliştirmenin mümkün olduğu ikinci bölümün hesabı hakkında bir tartışma yapmaya karar verdim. Yani genel derecelendirme veritabanında saklanacaktır.
İkinci kısım. JQuery.
Artık tanışabiliriz jQuery yıldız derecelendirmesi konusuyla ilgili bölüm. Yine, standart olan sadece üç örneği ele aldığımız ifadeyi ele alacağım.
Nasıl çalıştıklarını, ne, nasıl ve neden yukarıda detaylı olarak anlattım, bu yüzden sadece sizin için net olmayabilecek ayrıntılara odaklanacağım.
$(document).ready(function()( $(".rate1").raty(( click: function(score, evt) ( warning("ID: " + this.id + "\nscore: " + puan) ; ) )); $(".rate2").raty(( sayı: 10, starOff: "img/rating_passiv.png", starOn: "img/rating_activ.png" )); $(".rate3"). raty(( sayı: 4, hedef: ".isim", ipuçları: ["çok kötü", "kötü", "iyi", "iyi", "çok iyi"], )); ));
Sınıf altında oran1 fonksiyonu parametrelerle çalıştırıyoruz Gol Ve olay. Bunlardan ilkinde yöntemle elde ediyoruz uyarı() isim ve ikincisi İD, seçtiğimiz derecelendirmemiz. Sınıf altında oran2, görüntülenen yıldız sayısının sayısını belirliyoruz veya daha doğrusu on tane olacak ve görüntüleri varsayılan olarak değil, kendi başımıza uygulanabilir hale getiriyoruz. yıldızKapalı- aktif olmayan bir yıldız işaretidir, ancak StarOn- aktif. Sınıf altında oran3, görüntülenen yıldız sayısını ayarladık ve varsayılan yıldızı genel ekrandan gizledik - çok kötü toplam durum değerini beşe ayarlayarak.
Üçüncü kısım. jquery.raty.js kitaplığı.
Eklentinin kendisinden kısaca bahsedelim. Eğer bu konu çok ilginizi çektiyse ya da tam olarak anlayamıyorsanız o zaman belki ikinci bölümden sonra, varsa eklenti için ayrı bir bölüm olarak, ayrı ayrı ve detaylı olarak inceleyeceğiz. Dürüst olmak gerekirse, küçük bir belgeyi okumak bile yeterli ve her şey hemen netleşecek. Dikkat edilmesi gereken asıl nokta varsayılan ayarlardır.
Cancel: false, cancelClass: "raty-cancel", cancelHint: "Bu derecelendirmeyi iptal et!", cancelOff: "cancel-off.png", cancelOn: "cancel-on.png", cancelPlace: "left", click: tanımsız , half: false, halfShow: doğru, ipuçları: ["kötü", "zayıf", "normal", "iyi", "muhteşem"], iconRange: tanımsız, mouseout: tanımsız, mouseover: tanımsız, noRatedMsg: "Derecelendirilmedi henüz!", sayı: 5, sayıMax: 20, yol: tanımsız, kesinlik: yanlış, salt okunur: yanlış, yuvarlama: ( aşağı: 0,25, tam: 0,6, yukarı: 0,76), puan: tanımsız, puanAdı: "skor", single: false, space: true, starHalf: "star-half.png", starOff: "star-off.png", starOn: "star-on.png", starType: "img", target: tanımsız, targetFormat: "(puan)", targetKeep: false, targetScore: tanımsız, targetText: "", targetType: "hint"
Gördüğünüz gibi bu ayarlardan bazılarını zaten scriptimde kullandım, buna dikkat edin! Anlamadığınız bir yer olursa yoruma yazabilirsiniz. İlginiz için teşekkür ederiz, geliştirme sürecindeki herkese iyi şanslar!
Bu yazıda site makalelerine nasıl yıldız derecelendirmesi ekleneceğine bakacağız.
Bu işlevselliği CMS MODX Revolution sistemine eklemek FiveStarRating eklentisi kullanılarak yapılabilir.
Eklenti FiveStarRatingFiveStarRating, yıldızları kullanarak kaynakların ön uç derecelendirmesini gerçekleştirebileceğiniz MODX Revolution sistemine öğeler ekleyen bir eklentidir.
FiveStarRating eklentisini yüklemeFiveStarRating eklentisi modx.com deposunda bulunur.
MODX Revolution sistemine "Paketleri Yönet" sayfasından kurulabilir.
FiveStarRating Eklentisini Kullanma Yıldız derecelendirme sisteminin bir kaynağa bağlanması, kaynağın şablonundaki veya içeriğindeki SimpleRating snippet'ine çağrı yapılarak yapılır.
[[!SimpleRating]]
SimpleRating pasajı seçenekleri:
- &id - derecelendirmesini görüntülemek istediğiniz kaynağın kimliği (varsayılan olarak geçerli).
- &tpl - yıldız derecelendirmesi HTML işaretlemesini içeren yığın (varsayılan tplSimpleRating).
SimpleRating snippet'ini kaynak kimliğiyle çağırmaya bir örnek:
[[!Basit Derecelendirme? &id = `3` ]]
SimpleRating snippet'ini yığın adıyla çağırmaya bir örnek:
[[!Basit Derecelendirme? &tpl = `tplSimpleRating1` ]]
SimpleRating pasajı şunları yapar:
- gerekli stilleri ve komut dosyalarını ön uçta kaydeder;
- mevcut veya belirtilen kaynağın derecelendirmesini alır ve sayfada görüntüler;
- kullanıcının bu kaynağı daha önce derecelendirip derecelendirmediğine bağlı olarak derecelendirmeyi etkin veya devre dışı olarak ayarlar.
Değerlendirme ajax aracılığıyla gönderilir. Ajax isteği sunucuda action.php dosyası tarafından işlenir. Bu dosya, kaynağın belirtilen kullanıcı tarafından derecelendirilip derecelendirilemeyeceğini kontrol eder, derecelendirmeyi ayarlar (gerekli bilgileri veritabanına yazar) ve sonucu döndürür. Action.php'den sonucu aldıktan sonra, JavaScript betiği bunu sayfada görüntüler.
Derecelendirme hilelerine karşı koruma, LocalStorage ve IP adresi aracılığıyla gerçekleştirilir.
Gerekirse IP adresi koruması devre dışı bırakılabilir. Bu, simplerating_ip sistem parametresinin "Hayır" olarak ayarlanmasıyla yapılır.
En yüksek derecelendirmeye sahip kaynaklar görüntüleniyor Sonuç olarak sayfada en yüksek derecelendirmeye sahip 10 kaynağı nasıl görüntüleyebileceğinizi düşünelim. Bu görevi gerçekleştirmek için pdoTools paketindeki pdoResources pasajını kullanacağız.
[[!pdoKaynaklar? &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]]
` ]]
Yükleniyor...
