شريط تقدم عملية ما (ProgressBar) بإستخدام CSS مع جافا سكربت
سأقوم لاحقا إن شاء الله بشرح طريقة إستخدام شريط التقدم أو الـProgress Bar بإستخدام CSS مع جافا سكربت 😛
الشريط يظهر بصورة جميلة و ليس فقط بصورة ثابتة،و يمكنكم الإطلاع على طريقة عرضه في الموقع الذي عملته لبرنامج الجودة الشاملة بجامعة الملك عبدالعزيز، عند تحميل الصفحة لاحظوا المربع على اليسار في أعلى الصفحة و ستجدون الشريط يتحرك إلى أن يمتلئ الشريط.
كل ماعليك عمله هو تحديد النسبة المئوية للشريط 😎 و سيقوم الكود بتعبئة الشريط بالحركة التي تستخدم جافا سكربت.
مع العلم بأن الحركة التي تظهر تتطلب أن يكون الجافا سكربت مفعلا في المتصفح.
الكود و الجافا سكربت حصلت عليه من أحد المواقع و سأذكر المصدر لاحقا عند كتابة طريقة الاستخدام.
حلو
وابشرك شغال تمام
في
Safari 3
ممتاز
في انتظار الطريقة و طريقة تحرك الشريط حلوة
ملياني،
أهلين، كل عام و انت بخير.
حاجة حلوة انه شغال في سفاري من دون مشاكل 😉
MyStyle،
نعم الطريقة حلوة و تضيف شئ من الحركة .
كيف يتم تحديد النسبة ؟ بالربط بداتابيس أم تحدد الرقم فقط ؟ 💡
يمكن الربط بالداتابيس لإستخراج قيم (أرقام) لكل خانة لكن أنا أستخدمها بشكل يدوي عن طريق كتابة رقم 10% أو 50% إلخ، في الخانة حسب نسبتها.
اعتبرها كجدول تكتب في كل صف قيمته المئوية كما سيتضح لاحقا عند عرض الطريقة. 😆
و ياهلا فيك
يعطيك الف عافية على هذا المجهود..
وبكل صراحة اهنئك على هذه المدونة الرائعة..
وللفائدة هذا موقع للجافا جيد وبه دروس متجددة ارجو ان ينال اعجابكم
http://programming.inbrief.ws/ar/java
رائع جدا بارك الله فيك