بسم الله الرحمن الرحيم ، التصويت شيء مهم في مواقع إدارة المحتوى ، خصوصا المواقع التي تطرح موادا للبيع أو تروج لها كـ ( amazon ) أو مواقع يتم رفع ملفات لها و عرضها للزوار كـ youtube ، وكل المواقع التي تحتاج رأي الزائر في فكرة معينة أو ملف معين .. سنحاول إن شاء الله اليوم ان نبين طريقة عمل تقييم عصري بعيدا عن التقييات القديمة و التقليدية

مثال : Demo

تفضل من هنا

الشرح

سنبدأ بالتطبيق على المثال الأول و نفس طريقة العمل على المثالين ، سنأخذ قائمة ul فيها عناوين li ، عادية ، لكنها تستعمل كثيرا و في كل الاحتياجات

<ul class="star-rating">
	<li class="current-rating" style="width:70%;"></li>
	<li><a href="#" title="1 من 5" class="one-star">1</a></li>
	<li><a href="#" title="2 من 5" class="two-stars">2</a></li>
	<li><a href="#" title="3 من 5" class="three-stars">3</a></li>
	<li><a href="#" title="4 من 5" class="four-stars">4</a></li>
	<li><a href="#" title="5 من 5" class="five-stars">5</a></li>
</ul>

هذه قائمة بها سلسلة من العناوين ، جعلتها خيارات التقييم إلا الأول ،
سنحتاول أن الآن أن نشرح نقطتين مهمتين في القائمة – و بعدها نضع كود css ليكون كل شيء مفهوم بإذن الله – :

• اعطاء كل عنوان من السلسلة كلاس خاص ، و مغاير عن الذي يليه
• اضافة السطر زائد في أول القائمة ، لم ؟

• بالنسبة للنقطة الأولى ، فإنني بحاجة أن اجعل كل خيار من التخيارات الخمس ، يضم الذي قبله ، انظر الصورة :عند التمرير على النقطة الرابعة مثلا ، فلابد ان تكون تضم حتى الأولى و الثانية و الثالثة في الخيار ، ليعلم الزائر انه قد اختار 4 من أصل 5 ، اما المثال الثاني في الصور فهو خطأ ، لأنه يبين اختيار الرابعة فقط ، لكنها لا تبين النسبة المئوية من التقييم .
  يمكنني الوصول الى تطبيق هذه الفكرة إلى اعتبار كل خيار يضم عرضة و عرض الذي قبله ،
  مثلا الأول 20% و الثاني 40% و الثالث 60% و هكذا ،

  

• بالنسبة للنقطة الثانية ، فإنني أضفت السطر التالي في أول القائمة وهو ليس من الخيارات :

  <li class="current-rating" style="width:70%;"></li>

  الغرض من اضافته ، هو النتيجة الحالية للتصويت ليعرفها الزائر قبل أن يصوت ، لإظهار التقييمات التي مرت قبله ، و 70% هي نتيجة التقييمات التي قبل ، شاهد الصورة :
  

جيد ، و الآن كود css الخاص بهذه اللإفكار التي مرت معي الآن :

.star-rating, .star-rating a:hover, .star-rating a:active, .star-rating a:focus, .star-rating .current-rating{
	background: url(images/star.gif) left -1000px repeat-x;
}
.star-rating{
	position:relative;
	width:125px;
	height:25px;
	overflow:hidden;
	list-style:none;
	margin:0;
	padding:0;
	background-position: left top;
}
.star-rating li{
	display: inline;
}
.star-rating a, .star-rating .current-rating{
	position:absolute;
	top:0;
	left:0;
	height:25px;
	line-height:25px;
	text-indent: -1000px;
	outline:none;
	overflow:hidden;
	border: none;
}
.star-rating a:hover, .star-rating a:active, .star-rating a:focus{
	background-position: left bottom;
}
.star-rating a.one-star{ /* الخيار الأول */
	width:20%;
	z-index:6;
}
.star-rating a.two-stars{ /* الثاني */
	width:40%;
	z-index:5;
		}
.star-rating a.three-stars{ /* الثالث */
	width:60%;
	z-index:4;
}
.star-rating a.four-stars{ /* الرابع */
	width:80%;
	z-index:3;
}
.star-rating a.five-stars{ /* الخامس */
	width:100%;
	z-index:2;
}
.star-rating .current-rating{ /* الحالي */
	z-index:1;
	background-position: left center;
}

كل الأوامر بسيطة و عادية و مفهومة لدى الكل إن شاء الله

ملاحظات

• ادخلت width=70% في السطر الأول من القائمة المسؤول عن اظهار النتيجة القديمة للزائر ، و لم اجعله في ملف css ، لأنه عرض قابل للتمدد و التقلص، يعني سيتغير بطريقة ديناميكية ، أنت في تطبيقاتك لن تتركه هكذا ، فهذا فقط مثال ، و إنما سيكون مكانه المتغير المسؤول عن عرض النتيجة النهائية بعد العملية الحسابية لعدد التصويتات ، $total و هذا ما جعلني أن أخرجه عن ملف css
• استعملت صورة واحدة بها ثلاث طبقات من النجوم المتغيرة الألوان ،
  
  فقط عوض ما يتم التحميل ثلاث صور خلال وقت وجيز ، حبذت استعمال صورة واحد و اللعب بالتموضع في الخلفية ، ليتم تحميلها مرة واحدة ، وهذا شيء عادي
• في صفحة الأمثلة التي عملت ، فالأول الثاني هما المرادا تطبيقهما ، اما الثالث فالمراد منه تجنبه ^^” .

آمل أن تكون قد استفدت من الشرح و فكرة التطبيق ، و مع أفكار أخرى إن شاء الله ، أترككم في رعاية الله ، و السلام عليكم ورحمة الله وبركاته

هذه التدوينة نُشرت في الخميس, 3 سبتمبر, 2009 عند 11:49 ص و مصنفة تحت تصنيف css , xhtml. يمكنك متابعة أي تعليقات عبر رابط RSS 2.0. يمكنك ترك تعليق, أو تعقيب من مدونتك.
الوسوم :css, تفصيل, فكرة