بسم الله الرحمن الرحيم

القوائم القابلة للطي- accordion

سوف نتعلم كيف نقوم بعمل قوائم منسدلة و قابلة للطي والمعروفة اسم accordion .

1- الخطوة الأولى : 

نقوم بإضافة عناصر HTML الأساسية :

العنصر الأول المستخدم هنا هو button نختار له هنا class باسم  accordion .

ثانيا نضع الحاوية الأساسية div ونختار لها class باسم panel . نكررها مرتين اخريين ليصبح لدينا .

2- الخطوة الثانية :

نقوم بإضافة التنسيق css كالأتي :

عند تنسيق body نضع الأمر rtl :direction    وتعني أن اتجاه النص يجب أن يكون من اليمين إلى اليسار, وتستخدم عادة للكتابة العربية لأن الوضع العام للتنسيق في HTML يكون من اليسار إلى اليمين . 

نقوم الأن بتنسيق button :

نلاحظ هنا استخدام الأمر cursor وهو أمر خاص بشكل المؤشر عند النقر , أيضا هناك الأمر transition تقوم بتحويل أو تغيير خصائص العنصر بسلالسة لفترة من جزء من الثانية . فتظهر لدينا بالشكل التالي:

 الأن تنسيق div من خلال  panel. ;

الأن النص أسفل أمر button نلاحظ أنه اختفى ليكون لدينا :

لإخفاء النص نستخدم  max-height: 0 و أيضا  overflow: hidden.

 ثالثا: إضافة Javascript :

نستخدم for loop لصنع قائمة accordion :

 رابعا: إضافة الأيقونات 

الأن أصبح لدينا قائمة منسدلة فإننا  نريد إضافة أيقونة +  و - لإضافتها فإننا نستخدم css كالتالي :

ولإضافة - :

نلاحظ هنا استخدام  after:: وتعرف باسم pseudo-element وتستخدم لإدخال محتوى تحسيني للعنصر باستخدام الأمر content . عند استخدام الأمر content نستخدم كود الرمز + ومعها \ وبالمثل مع - للاطلاع على الرموز المستخدمة 

List of Unicode characters

وأخيرا للاطلاع على النتيجة النهائية يمكنك تحميل الملف :

https://www.mediafire.com/?4n653y6yrc8b6en

 

  

  بسم الله الرحمن الرحيم

خلفية صفحة الويب- background-image

سوف نتعلم اليوم القيام بعمل خلفية كاملة لصفحة الويب باستخدام css.

في قسم style في المحرر نقوم بتنسيق الأمر body أولا نضع الأمر background-image بهذا الشكل :

نهتم هنا بمسار الصورة المراد إدراجها فمثلا الصورة هنا توجد في مجلد img ثم أضع اسم الصورة blue ثم نوعها jpg .

ثانيا :  نستخدم الأمر  background-position بهذا الشكل :

 خاصية background-position تقوم بعيين موقع الخلفية المستخدمة . الموضع الأساسي اللذي يتم تعيينه من دون استخدام  هذه الخاصية هو أعلى يسار الصفحة  top left ثم إعادة تكرار الصورة عموديا وأفقيا .

ثالثا: خاصية background-repeat  :

وتستخدم في تكرار repeat الصورة عموديا repeat-y أو أفقيا repeat-x  أو عدم تكرارها no-repeat  .

رابعا: خاصية background-size :

تستخدم لتعيين مقاس الصورة المستخدمة في الخلفية cover يقوم بتكبير الصورة بقدر صفحة الويب كاملة  .

خامسا: خاصية background-attachment:

تستخدم في جعل الصورة ثابتة fixed أو جعلها كقائمة متحركة scroll .

أخيرا : هذه الأوامر الخمسة المستخدمة في جعل الصورة كخلفية كاملة لصفحة الويب لتظهر لنا هذه النتيجة:

 

لتحميل الملف :
https://www.mediafire.com/?8mm0oitaez5t6ac

  تعلم تحريك الأشكال Animation بواسطة Javascript

 

JavaScript HTML Animations

  1- صفحة الويب الأساسية :  

أولا قمنا بوضع عنصر HTML الأساسية المكونة للصفحة من head & body .

ثم قمنا بوضع العنصر الأول للتحريك وهو الأمر button ثم إضافة الأمر div وهو يعمل عمل الحاوية أي انه ليس له أي شكل على صفحة الويب . كما يظهر في الصورة استخدمنا عنصري div الأول له id باسم myContainer وعنصر div الآخر يوضع داخل الأول وله id يحمل اسم myAnimation .
سوف تكون الصفحة بهذا الشكل :

كما يظهر في الصورة فإن العنصر الواضح لدينا هو button وكما أسلفنا فإن div ليس لها أي أثر في الصفحة ولكن الآن سوف نستخدم css لتنسيق div و button ليظهر لنا الشكل الذي نريد .

تنسيق العناصر بواسطة css:

لنبدأ الأن بتنسيق العنصر button  الذي يحمل id باسم btn نضع الرمز # عند استخدام id في قسم التنسيق style 

 ثانيا لنقوم بتنسيق div الحوية الأساسية للعنصر المراد تحريكه الذي يحمل id  باسم myContainer :

بحكم كون myContainer هو الوعاء الأساسي للعنصر المراد تحريكه لذلك نختار له العرض width: 400px 

والارتفاع height:400px نختار أي لون مناسب للخلفية والمهم هنا أمر position: relative أي أن موضعه يكون نسبيا 

لموضعه العادي 

ثالثا : ننسق div ذو id باسم myAnimation وهو العنصر المراد تحريكه داخل myContainer :

نختار العرض 50 بيكسل والارتفاع أيضا 50 بيكسل  نختار كما السابق لون خلفية مناسب وهنا نختار الأمر position :absolute

والمميز فيه هو أنه يوضع إلى أقرب موضع سابق له والذي لدينا هنا هو myContainer . 

الأن يصبح لدينا الشكل التالي للصفحة :

ثالثا استخدام لغة Javascript :

التحريك بواسطة  Javascript يتم عن طريق البرمجة التغييرات  التدريجية للعناصر تنسيقية .

التغييرات تتم عن طريق برمجة توقيت معين . عندما تكون الفواصل بين التوقيت قصيرة , سيكون التحريك بشكل مستمر.

الكود الأساسي للتحريك أو Animation هو:

 إذن لنبدأ أولا طريقة ( )setInterval تقوم باستدعاء دالة function  أو تقوم تحديد تعبيرات على فترات محددة (أجزاء من الثانية) .

طريقة ( )setInterval تظل مستمرة في العمل في استدعاء الدالة function حتى تستدعي ()clearInterval  أو نقوم بإغلاق المتصفح .

ثانيا: طريقة ()clearInterval تقوم بإزالة المؤقت اللذي تم تعيينه بواسطة ()setInterval 

أولا: لنقوم بإضافة event أو حدث للأمر button:

ثم لنبدأ العمل بواسطة Javascript: 

لرؤية النتيجة النهائية يرجى تحميل الملف :

http://www.mediafire.com/file/1tx1z3a79ro519y/animate.rar