كيفية إضافة زر "رجوع" كما في فكونتاكتي: دليل مفصل

يمكن أن تكون إضافة زر الرجوع إلى صفحة الويب مفيدة للتنقل سهل الاستخدام. أحد الأمثلة الشائعة حيث يتم استخدام هذا الزر هو الشبكة الاجتماعية فكونتاكتي. في هذا الدليل ، سننظر في كيفية إضافة زر مشابه إلى صفحة الويب الخاصة بك.

بادئ ذي بدء ، لإضافة زر الرجوع ، سنحتاج إلى عنصر الارتباط. يمكننا استخدام العلامة لإنشاء ارتباط. لكن إضافة زر لا تقتصر على مجرد علامة. سنحتاج أيضا إلى بعض كس لتصميم الزر وفقا لتصميم فكونتاكتي.

مثال على رمز كس لتصميم زر العودة:

.زر {

عرض: مضمنة كتلة;

الحشو: 10 بكسل 20 بكسل;

لون الخلفية: #5181 ب 8;

اللون: # فف;

نصف قطر الحدود: 4 بكسل;

زخرفة النص: لا شيء;

}

.زر: تحوم {

لون الخلفية: #2 ج 5 ب 95;

}

في المثال المعطى ، حددنا فئة .زر لتصميم زر "العودة". لقد قمنا بتعيين أحجام وألوان خلفية معينة لها ، وأضفنا أيضا بعض الرسوم المتحركة عند تحريك المؤشر.

الآن بعد أن أصبح لدينا على الأقل فهم أساسي لكيفية إضافة زر الرجوع ، يمكنك الاستمرار في تجربة وتخصيص نمط الزر وفقا لاحتياجاتك وتفضيلاتك. لا تخف من التجربة ، لأن زر الرجوع سيكون إضافة رائعة لصفحة الويب الخاصة بك!

1. إنشاء زر الرجوع في هتمل
2. تصميم زر باستخدام كس
3. تعيين معالج حدث عند النقر فوق الزر
4. استخدام جافا سكريبت لتنفيذ وظيفة الزر
5. انتقل مرة أخرى إلى الصفحة السابقة باستخدام سجل المتصفح
6. اختبار وتحسين زر الرجوع لمتصفحات مختلفة
7. 1. اختبار زر الرجوع في متصفحات مختلفة
8. 2. تحسين زر الرجوع لمتصفحات مختلفة
9. 3. خاتمة

إنشاء زر الرجوع في هتمل

يعد زر الرجوع عنصرا مهما يسمح للمستخدم بالعودة إلى الصفحة السابقة أو حالة التطبيق. هناك عدة طرق لإنشاء زر الرجوع في هتمل ، والتي سوف ننظر في المقبل.

1. باستخدام الرابط

   تشير إلى الصفحة السابقة أو حالة التطبيق. على سبيل المثال:

   العودة

2. مع سمة

   . على سبيل المثال:

3. باستخدام جافا سكريبت

   الطريقة الثالثة لإنشاء زر الرجوع هي استخدام جافا سكريبت لإنشاء ومعالجة إجراء الزر. على سبيل المثال:

العودة

• سيؤدي هذا الرمز إلى إنشاء زر ، عند النقر عليه ، سيعيد المستخدم إلى الصفحة السابقة. جافا سكريبت يسمح لك للسيطرة على الإجراءات زر إضافية والأساليب.

التوصيات

• عند إنشاء زر الرجوع في هتمل ، فمن المستحسن استخدام رابط أو زر نموذج مع معالج جافا سكريبت ، وهذه هي أساليب أكثر موثوقية وعبر المتصفح. يجدر أيضا التفكير في تجربة المستخدم ومطابقة عادات المستخدم.

نأمل أن يكون هذا الدليل قد ساعدك في إنشاء زر الرجوع في هتمل. حظاً موفّقاً!

• تصميم زر باستخدام كس

باستخدام كس ، يمكنك بسهولة تغيير مظهر زر وإضافة تأثيرات مختلفة لذلك. فيما يلي بعض الأمثلة على الأنماط التي يمكن تطبيقها على زر:

• تغيير لون الخلفية ونص الزر:

• .زر {

لون الخلفية: # اف 44336;

اللون: أبيض;

}

تغيير حجم وشكل الزر:

1. العرض: 200 بكسل;
2. }

إضافة الظل وتدرج الخلفية:

مربع الظل: 2 بكسل 2 بكسل 5 بكسل رغبا (0 ، 0 ، 0 ، 0.2);

لون الخلفية: # د32ف2ف;

}

إضافة الرسوم المتحركة عند النقر عليها:

1. }

2. لتنفيذ وظيفة زر الرجوع في تطبيق ويب ، يجب تعيين معالج حدث لهذا الزر. معالج الأحداث هو وظيفة جافا سكريبت يتم تنفيذها عند حدوث حدث معين ، في هذه الحالة عند النقر فوق زر.

   جيتليمينتبيد()

3. باستخدام

طريقة أديفنتليستينر ()

لتعيين معالج حدث إلى زر.

يمكن أن يكون معالج الأحداث وظيفة مجهولة أو وظيفة موجودة.

نموذج التعليمات البرمجية:

العودة

في هذا المثال ، تتمثل الخطوة الأولى في العثور على الزر باستخدام

جيتليمنتبيد ('باكبوتون')

، أين

الزر الخلفي

- معرف الزر. ثم نطبق

طريقة أديفنتليستينر ()

لتعيين معالج للزر انقر فوق الحدث. داخل وظيفة المعالج ، يمكننا كتابة التعليمات البرمجية الخاصة بنا ، والتي يجب تنفيذها عند النقر فوق الزر.

استخدام جافا سكريبت لتنفيذ وظيفة الزر

لتنفيذ وظيفة زر الرجوع على صفحة ويب ، كما هو الحال في فكونتاكتي ، يمكنك استخدام لغة برمجة جافا سكريبت. تسمح لك جافا سكريبت بإضافة عناصر تفاعلية إلى الصفحة ومعالجة إجراءات المستخدم.

في ما يلي مثال على شفرة جافا سكريبت التي تضيف وظيفة زر الرجوع:

إنشاء زر باستخدام رمز هتمل:

العودة

إضافة شفرة جافا سكريبت التالية لتنفيذ وظيفة الزر:

كونست باكبوتون = وثيقة.جيتليمنتبيد ('باكبوتون');

زر خلفي.أدفنتليستينر ('انقر' ، وظيفة () {

نافذة.التاريخ.عودة();

• });
• يعثر هذا الرمز على الزر بمعرفه ويضيف مستمعا للحدث يستدعي الوظيفة عند النقر فوق الزر. داخل الوظيفة ، نستخدم

نافذة.التاريخ.عودة()

للذهاب إلى الصفحة السابقة في سجل المتصفح.

ضع شفرة جافا سكريبت هذه داخل العلامة

1. في ملف هتمل الخاص بك.
2. الآن ، عندما ينقر المستخدم على زر" رجوع "، سيحدث انتقال إلى الصفحة السابقة في سجل المتصفح ، كما في حالة الزر" رجوع " في صفحة فكونتاكتي.
3. انتقل مرة أخرى إلى الصفحة السابقة باستخدام سجل المتصفح
4. في بعض الأحيان ، عند تطوير تطبيقات الويب ، يصبح من الضروري إضافة زر رجوع حتى يتمكن المستخدمون من العودة بسهولة إلى الصفحة السابقة. للقيام بذلك ، يمكنك استخدام وظيفة سجل المتصفح.
5. من المهم ملاحظة أن هذا الأسلوب لا يعمل إلا إذا كان المستخدم يشاهد الموقع في نافذة متصفح واحدة. إذا فتح المستخدم رابطا في علامة تبويب أو نافذة جديدة ، فسيأخذه زر الرجوع إلى الصفحة السابقة في علامة التبويب الحالية.

لإنشاء زر رجوع ، يمكنك استخدام عنصر وإضافة معالج حدث نقرة إليه ، والذي سيتصل بالنافذة.التاريخ.طريقة العودة (). تقوم هذه الطريقة بإرجاع المستخدم إلى الصفحة السابقة في سجل المتصفح.

هنا مثال على التعليمات البرمجية: