[عمل بسيط] - زر إرسال تفاعلي


التعليقات

رائع اخ علي !

حقيقة انا مندهش كيف أن مستواك يتقدم بشكل رائع بالنسبة لي ^_^ !

اخرة مرة منذ قبل حوالي اسبوعين او اقل فقط .. كُنتَ في خضم اساسيات ال Jquery Javascript , HTML ,CSS والآن انت هنا (:

جديا اتمنى لو لدي قليلا من حماسك او اجتهادك ^^ فاخوك قد لا يفُكر بتعلم دالة واحدة جديدة كل اسبوعين (-:

جميل جدا.

اعجبني :)

ما شاء الله, أعجبني كثيراً , هل يمكنك شرح الكود بعد إذنك فقد جذبني كثيراً وأنا جاهل, أرغب بفهم الآلية التي يعمل بها خصوصاً دور JS

الحمد لله فهمت الكود كاملاً بنفسي !

-قمت باستدعاء تابع اسمه click ويبدو أن هناك مفهوم oop في js وبذلك بالزر هو كائن وclick هو أحد توابع هذا الكائن وهو يأخذ وسيطاً هو العملية التي تريد القيام بها عند ضغط الزر.

-قمت باختبار هل هذه هي المرة الأولى لضغط الزر أم لا, ثم قمت بـما يلي:

1-جعل لو الخلفية للزر شفافة

2-إخفاء الكتابة شفافة (كأنها اختفت) مع تصغير الخط ليبدو أنها صغرت حتى اختفت

3-تصغير عرض الزر إلى 60 وهو نفسه border-radius وبذلك سيتحول المستطيل إلى دائرة (رائع)

4-جعلت النص يتموضع في المنتصف كي لا يبقى الور بحاجة لاحتواء النص

نبدأ الآن بالأمور المؤقتة

التابع setTimeout يأخذ وسيطين, الأول هو العملية التي نريد القيام بها, والثاني هو الزمن الذي نريد للعملية أن تستغرقه

أولاً: الارتفاع يصغر إلى 20بكسل خلال 500 ميللي ثانية

ثانياً:يتغيّر class الزر من no-hover إلى progess خلال 500 ميللي ثانية !

ربما يمكنك استبدال محتوى هذا التابع بـ

$("button").css({
            width: 100% 
        });

هل هذا صحيح؟

لا أدري كيف تؤدي هذه العملية إلى الامتلاء وكأنه يقوم بالتحميل ؟

ثالثاً: تغير css الخاص بالزر وتزيل عنه صفة الإخفاء (لا أدري ماذا يعني هذا)

ثم تضيف إشارة "صح"

==بالنسبة لـcss لا أعلم بشأن الخصائص ولكن ما يبدو واضحاً من اسمه فهو واضح وغير ذلك فلا أعلم==

وفقك الله يا فتى ;)

جميل ^^


التصميم وقابليّة الاستخدام

مجتمع متخصّص بطرح النقاشات والروابط المفيدة المُتعلِّقة بالتصميم.

39.9 ألف متابع