Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

درس صغير: جعل رقم الهاتف يقوم بشيء

by
Read Time:2 minsLanguages:

Arabic (العربية/عربي) translation by Ali Atwa (you can also view the original English article)

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

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

(تحقق من قائمة الأنماط المعترف للiOS و Android، المقدمه من Mark Hammond...)

جعل الرقم قابل للنقر

هذه الخطوه بسيطه جدا: ضع رقم الهاتف الخاص بك في نص الرابط، ولكن بدلاً من استخدام بروتوكول *http (أو أي شيء آخر تريد كتابته في نص الرابط) استخدام tel: و tel://. بهذه الطريقة، حتى إذا كنت قد استخدمت نمطاً غير متعرف عليه، الجهاز لا يزال يعرف ماذا يفعل:

المتصفحات الغير مدعومه (سطح المكتب الخاص بك، على سبيل المثال) لا تعرف ماذا تفعل مع البروتوكول tel: حتى الآن-إلا إذا كان المستخدم لديه اضافة تمكن Skype من التعرف على أرقام الهاتف. جوجل كروم سيتجاهل النقر، ولكن في الوقت الراهن معظم المتصفحات الأخرى تبدأ في التنفيذ. أجهزة الهاتف (مثل iPad) سوف يتعرف على الرقم، وسيقوم بسؤال المستخدم بإضافته كجهة اتصال إلى دفتر العناوين - وهذا سوف يكون متاحا لمستعرضات أجهزة سطح المكتب أيضا.

تصميم الروابط الهاتف

خياراً إضافيا، دعونا نجعل الامر أكثر وضوحاً للمستخدم بتصميم الرابط للهاتف. سوف نستخدم قيمة محدد لاستهداف عنصر :before للروابط التي تحتوي على tel: داخل سمة href:

هذا الرمز ^ يشير إلى أي عنصر ينتمي لـوسم href يبدء بوسم نود تحديده كـ tel tel: و tel:// سيتم الحديث عنهما هنا. سنستخدم يوني كود للهاتف \260E; بدلا من استخدام ملف للايقونات رائع

رائع اليس كذلك؟ color: tomato صدقوا أو لا تصدقوا...

انتهينا، لم يتبقى شيء سوى الاختبار!

اقرا اكثر

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.