استخدام عنصر واجهة مستخدم Spry Tooltip في Dreamweaver

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

يتألف عنصر واجهة مستخدم Tooltip من العناصر الثلاثة التالية:

• حاوية تلميح الأدوات. هذا هو العنصر الذي يحتوي على الرسالة أو العنصر الذي تريد عرضه عند قيام المستخدم بتنشيط تلميح الأدوات.

• عنصر/عناصر الصفحة التي تنشط تلميح الأدوات.

• البرنامج النصي للمنشيء. هذا برنامج JavaScript الذي يتيح لـSpry إمكانية إنشاء وظائف تلميح الأدوات.

عند إدراج عنصر واجهة مستخدم Tooltip، يتم من خلال Dreamweaver إنشاء حاوية تلميح أدوات باستخدام علامات div وإجراء التفاف للعنصر "trigger" (عنصر الصفحة الذي يعمل على تنشيط تلميح الأدوات) باستخدام علامات span. يستخدم Dreamweaver هذه العلامات بشكل افتراضي، ولكن قد يكون كل من علامات تلميح الأدوات وعنصر التشغيل عبارة عن أي علامات، طالما أنها داخل جسم الصفحة.

تذكر النقاط التالية عند العمل مع عنصر واجهة مستخدم Tooltip:

• سيتم إغلاق تلميح الأدوات المفتوح قبل فتح التلميح التالي.

• تظل تلميحات الأدوات أثناء تحويم المستخدمين فوق منطقة المشغل.

• لا توجد قيود بشأن أنواع العلامات التي يمكنك استخدامها للمشغلات ولمحتوى تلميح الأدوات. (مع ذلك، يُنصح دائمًا بحظر عناصر المستوى لتجنب مشكلات العرض عبر مختلف المستعرضات).

• بشكل افتراضي، يظهر تلميح الأدوات على بعد 20 بكسل إلى الأسفل وإلى يمين المؤشر. يمكنك استخدام خياري الإزاحة Horizontal وVertical في عارض الخصائص لتعيين نقطة ظهور مخصصة.

• في الوقت الحالي لا توجد طريقة لجعل تلميح الأدوات يفتح عند تحميل صفحة في مستعرض.

يتطلب عنصر واجهة مستخدم تلميح الأدوات CSS صغيرة للغاية. يقوم Spry باستخدام JavaScript لعرض تلميح الأدوات وإخفائه وتغيير موضعه. يمكنك تحقيق أي تصميم آخر لتلميح الأدوات مع تقنيات CSS القياسية، حسب متطلبات صفحتك. والقاعدة الوحيدة المضمنة في ملف CSS الافتراضي هي حل بديل لمشكلات Internet Explorer 6 بحيه يظهر تلميح الأدوات أعلى العناصر أو كائنات Flash.

للاطلاع على شرح أشمل لكيفية عمل عنصر واجهة مستخدم Spry Tooltip، بما في ذلك تحليل كامل للتعليمة البرمجية لعنصر واجهة المستخدم، راجع www.adobe.com/go/learn_dw_sprytooltip_ae.

للاطلاع على تدريب بالفيديو يتعلق بالعمل مع عنصر واجهة مستخدم Spry Tooltip، راجع www.adobe.com/go/lrvid4046_dw.

إدراج عنصر واجهة مستخدم Tooltip

يؤدي هذا الإجراء إلى إدراج عنصر واجهة مستخدم Tooltip جديد مع حاوية لمحتوى تلميح الأدوات وجملة عنصر نائب تكون بمثابة مشغل لتلميح الأدوات.

يمكنك أيضًا تحديد عنصر موجود على الصفحة (على سبيل المثال، صورة)، ثم إدراج تلميح الأدوات. عند إجراء ذلك، يكون العنصر الذي حددته بمثابة المشغل الجديد لشريط الأدوات. يجب أن يكون التحديد عنصر علامة كاملاً (على سبيل المثال علامة img أو علامة p) بحيث يمكن لبرنامج Dreamweaver تعيين معرف له إذا لم يكن له معرف بالفعل.

تحرير خيارات عنصر واجهة مستخدم Tooltip

يمكنك تعيين خيارات تتيح لك إمكانية تخصيص سلوك عنصر واجهة مستخدم Tooltip.

1. قم بالتحويم فوق نقطة الإدراج أو ضعها في محتوى تلميح الأدوات على الصفحة.

2. انقر فوق علامة التبويب الزرقاء لعنصر واجهة مستخدم Tooltip لتحديده.

3. تعيين خيارات في عارض الخصائص لعنصر واجهة مستخدم Tooltip حسب الحاجة.

الاسم

اسم حاوية تلميح الأدوات. الحاوية التي تضم محتوى تلميح الأدوات. بشكل افتراضي، يستخدم Dreamweaver علامة div كحاوية.

Trigger

العنصر الموجود على الصفحة والذي ينشط تلميح الأدوات. بشكل افتراضي، يُدرج Dreamweaver جملة عنصر نائب، محاطة بعلامتي span، كمشغل، ولكن يمكنك تحديد أي عنصر على الصفحة له ID فريد.

Follow Mouse

يؤدي تحديد هذا الخيار إلى جعل تلميح الأدوات يتبع الماوس عند التحويم فوق عنصر المشغل.

Hide on Mouse Out

يؤدي تحديد هذا الإبقاء على تلميح الأدوات مفتوحًا طالما يحوم الماوس فوق تلميح الأدوات (حتى لو ترك الماوس عنصر المشغل). يعد الإبقاء على تلميح الأدوات مفتوحًا أمرًا مفيدًا إذا كان لديك ارتباطات أو عناصر تفاعلية أخرى في تلميح الأدوات. وفي حالة عدم تحديد هذا الخيار، يتم إغلاق عنصر تلميح الأدوات عندما يترك الماوس منطقة المشغل.

Horizontal Offset

احتساب الوضع الأفقي لتلميح الأدوات من حيث الارتباط بالماوس. قيمة الإزاحة بالبكسل، والإزاحة الافتراضية هي 20 بكسل.

Vertical Offset

احتساب الوضع الرأسي لتلميح الأدوات من حيث الارتباط بالماوس. ‏‫قيمة الإزاحة بالبكسل، والإزاحة الافتراضية هي 20 بكسل.‬

Show Delay

التأخير بالمللي ثانية قبل ظهور تلميح الأدوات بعد دخوله إلى عنصر المشغل. القيمة الافتراضية هي 0.

Hide Delay

‏‫التأخير بالمللي ثانية قبل اختفاء تلميح الأدوات بعد تركه لعنصر المشغل. القيمة الافتراضية هي 0.

Effect

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