1. الهيكل الأساسي للـ HTML
أولاً، نحتاج إلى إعداد الهيكل الأساسي ( HTML ). سنستخدم العناصر `<div>` كقالب لحمل نجوم التقييم، وداخل كل `<div>` سنضع عناصر `<span>` ليمثل كل نجمة.
<div class="rating"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
2. تطبيق الأساسيات في CSS
بعد ذلك، سنستخدم CSS لتنسيق النجوم. سنبدأ بإعطاء النجوم لوناً أساسياً وجعلها تظهر جنبًا إلى جنب باستخدام `display: inline-block;`.
.rating span {color: #ccc; /* لون النجوم الافتراضي */font-size: 25px; /* حجم النجوم */display: inline-block; /* جعل النجوم تظهر في خط واحد */cursor: pointer; /* تغيير شكل المؤشر إلى يد عند تحريك الماوس فوق النجوم */}
3. إضافة التأثير عند التحديد
لجعل النجوم تتغير عند تمرير الماوس فوقها أو عند النقر عليها، يمكننا إضافة تأثير باستخدام `:hover` وجافاسكريبت للتعامل مع النقرات. ولكن، لنبسط الأمور، سنركز هنا على CSS فقط.
.rating span:hover,.rating span:hover ~ span {color: gold; /* تغيير لون النجوم عند التمرير */}
هذه الطريقة تغير لون النجمة التي تحوم فوقها وكل النجوم التي تسبقها، ولكنها لا تحتفظ بالحالة بعد النقر. لتحقيق ذلك، ستحتاج إلى استخدام جافاسكريبت.
4. إضافة تفاعلية باستخدام جافاسكريبت (اختياري)
لجعل التقييم يظل ثابتًا بعد النقر على نجمة، يمكنك إضافة بعض الجافاسكريبت.
<script>document.querySelector('.rating').addEventListener('click', function(e) {if (e.target.matches('span')) {let idx = Array.from(this.children).indexOf(e.target);this.querySelectorAll('span').forEach((star, i) => {star.style.color = i <= idx ? 'gold' : '#ccc';});}});</script>
الخلاصة
هذه هي الخطوات الأساسية لإنشاء نظام تقييم بالنجوم باستخدام HTML وCSS. يمكن توسيع هذا النظام بسهولة باستخدام جافاسكريبت لجعله أكثر تفاعلية ولحفظ التقييمات أو إرسالها إلى الخادم. استمتع بتجربة التصميم والتعديل على الألوان والحجم ليناسب تصميم موقعك!
و يمكنك تجربة الكود التالي للتأكد من سلامته:
<style>.rating span {color: #ccc; /* لون النجوم الافتراضي */font-size: 25px; /* حجم النجوم */display: inline-block; /* جعل النجوم تظهر في خط واحد */cursor: pointer; /* تغيير شكل المؤشر إلى يد عند تحريك الماوس فوق النجوم */margin-right: 5px; /* إضافة هامش بين النجوم */}/* تغيير لون النجوم عند تحريك الماوس فوق النجوم والنقر */.rating span:hover,.rating span:hover ~ span {color: gold;}</style><div class="rating"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div><script>document.querySelector('.rating').addEventListener('click', function(e) {if (e.target.matches('span')) {let idx = Array.from(this.children).indexOf(e.target);this.querySelectorAll('span').forEach((star, i) => {star.style.color = i <= idx ? 'gold' : '#ccc';});}});// لإضافة تأثير التحويم بشكل ديناميكي بدون الاعتماد على CSS فقطdocument.querySelector('.rating').addEventListener('mouseover', function(e) {if (e.target.matches('span')) {let idx = Array.from(this.children).indexOf(e.target);this.querySelectorAll('span').forEach((star, i) => {star.style.color = i <= idx ? 'gold' : '#ccc';});}});document.querySelector('.rating').addEventListener('mouseout', function(e) {this.querySelectorAll('span').forEach((star) => {// يمكن هنا استخدام فئة CSS أو تخزين الحالة بطريقة أخرى لتحديد النجوم المختارة فعليًاstar.style.color = '#ccc';});});</script>
اكسب المال من موقعك
ليست هناك تعليقات:
شارك مع اصدقائك: