كيفية عمل Star Rating بالجافا سكريبت - ASP.Net - مقـــالات - Top Coder
Welcome to our Site
الدخــول Or تسجـــيل
الثلاثاء
2016-12-06
1:11 PM
تسجــــيل | دخـــول
الرئيسية » مقالات » ASP.Net

كيفية عمل Star Rating بالجافا سكريبت
كيفية عمل Star Rating بالجافا سكريبت

مقــدمه
المقاله تشرح طريقه بسيطه لعمل صندوق تقييم داخل تطبيق ويب باستخدام اكواد جافا سكريبت , متضمنه التنسيق باستخدام CSS .

حيث سنقوم بعمل صندوق تصويت يحتوي على الأرقام من 1 الى 5 , بحيث يختار المستخدم رقم معين ليصوت به على المحتوى , وتم استخدام الأرقام لتبسيط المثال , ويمكنك استبدالها بصور نجوم للتصويت .
استايلات CSS
في البدايه سنقوم بعمل الاستايلات الاساسيه لعناصر صندوق التصويت , حيث سيكون لكل رقم من الخمسه أرقام ثلاث حالات مختلفه , الحاله العاديه , أي ليس ضمن نطاق التصويت , والحاله الثانيه عندما يمر المستخدم بالماوس على الرقم , اي عند التصويت , والحاله الثالثه بعد التصويت , اي عندما يكون الرقم دخل ضمن نطاق التصويت , وللتوضيح اكثر , فلو اختار المستخدم الرقم 3 للتصويت به , فان الارقام 1 2 3 دخلوا بالفعل ضمن نطاق التصويت , اي تنطبق عليهم الحاله الثالثه , عكس الرقمين 4 5 التي تكون حالتهم هي العاديه , اي الحاله الأولى , وهذا هو كود ال CSS المستخدمه في الموضوع باكمله :
CSS Styles
 
ويحتوي الكود على 5 كلاسات وهي :
1- rateItem حيث في البدايه نقوم بعمل الاستايل الأساسي لعناصر التصويت , بغض النظر عن الحالات الثلاثه فهو استايل عام يشمل العرض والإرتفاع ولون الخلفيه .. الخ .
2- rateNormal وهي تمثل الحاله العاديه للرقم او العنصر , وسوف يكون العنصر باللون الأسود .
3- rateOver وهي الحالة الثانيه للعنصر , والتي يمثلها مرور المستخدم بالماوس على الرقم اثناء قيامه بالتصويت , ويكون العنصر باللون الأحمر .
4- rateSelect وهي الحاله الثالثه , وتمثل عنصر داخل نطاق التصويت , ويمثلها اللون الأخضر .
5- rateBox وهو استايل لصندوق التصويت الحاوي للأرقام .

وقد تم استخدام اللون للتفرقه بين حالات العنصر الثلاثه , وذلك للتبسيط كما ذكرنا , ويمكنك في حالة استخدام صور ان تغير الاستايل الخاص كما تريد لكل حاله .
أكواد جافا سكريبت
والأن بعد عمل الاستايلات الأساسيه . سنقوم بالبدء بعمل دوال جافا سكريبت تساعد في تشغيل صندوق التصويت , حيث يحتوي الكود على ثلاثة دوال محتلفه , داله لحدث المرور على ارقام التصويت , اي اثناء التصويت , وداله ثانيه خاصه بابتعاد الماوس عن صندوق التصويت , والحدث الثالث خاص بعمليه اختيار الرقم من قبل المستخدم , وفيما يلي الدوال الثلاث :
JavaScript Methods
 
في البدايه قمنا بتعريف متغير ليحمل قيمة التصويت , وهي تكون قيمه من 1 : 5 , ومن الطبيعي ان تكون القيمة 0 في البدايه , وتتغير عند قيام المستخدم بالتصويت فعلياً , ثم بعد ذلك تم عمل داله لتشغيل حدث المرور بالماوس اثناء التصويت , حيث تحتوي الداله على معامل يحمل الرقم الذي مر عليه الماوس داخل صندوق التصويت , بحيث تقوم هذه الداله بتغيير الاستايل الخاص لكل الارقام من 1 الى الرقم الذي يمرره المعامل num وجعله في الحاله الثانيه , وهي حالة المرور , بمعنى انه في حالة مرور الماوس على الرقم 3 فان استايل الارقام 1 2 3 سيكون في الحاله الثانيه  والأرقام 4 5 في الحاله العاديه كما في الصوره

وتكون هذه الداله في حدث onmouseover لكل رقم داخل صندوق التصويت

ثم بعد ذلك ننتقل الى دالة Leave والتي تمثل حدث ترك المستخدم صندوق التصويت , سواء قام بالتصويت او لم يقم , وتقوم الداله بتغيير استايل الأرقام من 1 الى رقم قيمة متغير التصويت rate - الذي تم تعريفه في الأعلى - الى الحالة الثالثه , وهي حالة التصويت بالفعل , فمثلا عند اختيار المستخدم الرقم 4 , فسيتغير استايل الارقام 1 2 3 4 الى الحاله الثالثه , وسيبقى الرقم 5 في الحاله العاديه كما في الصورة

وتكون هذه الداله في الحدث onmouseout الخاص بصندوق التصويت ككل

والداله الثالثه والأخيره هي داله بسيطه , تقوم فقط بتغيير قيمة المتغير rate واعطاءه القيمة التي قام المستخدم باختيارها , وتكون هذه الداله في حدث onclick لكل رقم من ارقام التصويت
عمل صندوق التصويت
والآن وبعد عمل الاستايلات ودوال الجافا سكريبت الخاصه بالصندوق , ننتقل الى عمل الصندوق نفسه html  , وسيكون كل عنصر او رقم تصويت يمثله كنترول a  او anchor , وسيكون الصندوق الحاوي لأرقام التصويت كنترول div , وسيطلق على كل رقم id خاص به ليمكن الوصول الى العنصر من خلال الجافا سكريبت , وهذا تنسيق ال html  الخاص بالصندوق  
Rating Box
 
حيث تم تعيين الاستايل rateBox للصندوق الحاوي لارقام التصويت , وتم اضافة الداله leave له ايضاً مع الحدث onmouseout , ثم بعد ذلك تم اضافة عناصر التصويت الخمسة داخل الصندوق .
حيث نرى انه اطلق على كل عنصر id يبدأ بكلمة item ثم رقم العنصر item1 , item2 ...etc , وتم وضع ال href="javascript:" حتى لا يحدث تحميل للصفحة عند الضغط على الرقم - حيث الأرقام ممثله بكنترول a - , ثم بعد ذلك تم تعيين الكلاس الخاص بالرقم من استايل CSS , والتي في الحاله العاديه تمثلها الكلاسين rateItem والذي يكون دائماً ثابت مع كل حالة من حالات الرقم لأنه الاستايل العام , وايضا الكلاس rateNormal والذي يمثل الحاله الأولى .
تم تفعيل الحدث onmouseover والذي يشغل الداله over والتي تعطي الأرقام الحاله الثانيه , ويتم تمرير رقم العنصر داخل الداله over(1) .
وتم ايضاً تفعيل الحدث onclick والذي يشغل الداله Select , والتي تقوم بتغيير قيمة متغير التصويت rate داخل الجافا سكريبت , ويتم ايضاً تمرير رقم العنصر الى الداله .
مسار عملية التصويت
سنقوم الآن بتوضيح المسار المنطقي لعملية التصويت منذ بدايه تحميل الصندوق الى ان يتم اختيار قيمة التصويت
-- في البدايه يتم تحميل الصفحه ومعها صندوق التصويت , حيث يكون استايل كل عنصر داخل التصويت ممثل في الحالة الأولى
-- عندما يريد المستخدم القيام بالتصويت , فانه يحرك مؤشر الماوس الى صندوق التصويت , و عن دخول المؤشر الى الصندوق ومروره على اي رقم داخله , فهنا تعمل الداله الأولى over والتي تقوم بتغيير استايل الارقام الى الحالة الثانيه حسب الرقم الذي يقف عليه مؤشر المستخدم ... حتى الأن المستخدم لم يقم بعملية التصويت فعلياً .
-- في حالة ترك المستخدم الصندوق ولم يقم بالتصويت , ستعمل الداله leave والتي تعتمد في الأساس على قيمة المتغير rate والذي مازال مساوياً للصفر لأن المستخدم لم يقم بالتصويت , وبالتالي ستكون الارقام كما هي على الحالة الأولى .
-- وباعتبار ان المستخدم مازال داخل صندوق التصويت , وقام باختيار رقم معين , 4 مثلاً فهنا تعمل الداله select ويتم تغيير المتغير rate الى الرقم الذي تم اختياره , وبالتالي عندما يخرج المؤشر من الصندوق وتعمل الداله leave التي تعتمد على الرقم rate فان الأرقام من 1:4 ستتغير الى الحاله الثالثه , وهي حالة دخول الرقم داخل نطاق التصويت
ختــام
في المقاله تم عرض الفكره بطريقه بسيطه , مع محاولة شرح التفاصيل جيداً حتى تفهم الفكره جيداً , واتمنى ان اكون قد وفقت في ذلك , فالفكره طرحت بامكانيات بسيطه , مجرد صندوق بداخله ارقام , ولديك المرونه الكافيه لتغيير اجزاء الصندوق واستايلات css وحتى دوال الجافا سكربت لتتناسب مع احتياجاتك .
تحميل المشروع
 Written by :  Mohammed Mahmoud
الفئة: ASP.Net | أضاف: ham_mody2000 (2011-10-13 3:56 AM)
مشاهده: 2365 | الترتيب: 0.0/0


أترك تعليقك من خلال حسابك على الفيس بوك

تعليقات مشتركي الموقع

مجموع المقالات: 0
إضافة تعليق يستطيع فقط المستخدمون المسجلون
[ التسجيل | دخول ]
طريقة الدخول
بحث
Our Facebook community

تم إطلاق صفحة توب كودر على الفيس بوك

Advertisment
الأحـــدث
hitstatus
Copyright Mohammed Mahmoud © 2016
إنشاء موقع مجاني с uCoz