رائع اخ علي !

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

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

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

جميل جدا.

اعجبني :)

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

http://goo.gl/YaAHeV

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

-قمت باستدعاء تابع اسمه 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 لا أعلم بشأن الخصائص ولكن ما يبدو واضحاً من اسمه فهو واضح وغير ذلك فلا أعلم==

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

فعلا صحيح ، جميل أنك تابعت الكود :)

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

بالنسبة ل progess فهو عبارة عن before وظيفته الوحيدة هي تعبئة الزر وكأنه يقوم بالتحميل.

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

هل هذا صحيح؟

لا ، غير صحيح صديقي ، بطريقتك هذه لن يحدث أي شيئ لتأثير التحميل ما سيحدث فقط هو أن عرض الزر سيكون 100% ، كما ذكرت لك فإن تأثير التحميل هو عبارة before ل button وعرضه 0 في الحالة العادية ، وبما أنه لا يوجد محدد "selector" للbefore أو after في jquery لتعديل خصائص css للعنصر فإن ماقمت بعمله ببساطة هو إضافة class إسمه progess عندما تأتي المدة الزمنية الخاصة به وهذا class جعلت خصائص css خاصته كالتالي :

button.progress:before {

     width:100%;

}

وهذا ببساطة ما يحدث ;)

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

اجمعين ، إن شاء الله

عمل رائع اخي علي

راسلني من فضلك في تيليجرام او بهانس

be.net/omarhmity

telegream : @OmarHmity

سابقا تعملت معك في موقع خمسات .

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

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

13 ألف متابع