جافا سكريبت: تلميحات الأدوات بدون jQuery. قم بإنشاء أحداث تمرير الماوس المخصصة باستخدام تلميح أداة كود جافا سكريبت في CSS وJquery

تلميح الأداة عبارة عن رسالة نصية قصيرة تحتوي على شرح يظهر نتيجة تحريك مؤشر الماوس فوق أحد العناصر في الصفحة. بعد ذلك، سننظر في كيفية عمل تلميح أداة بلغة html.

الطريقة القياسية

(العنوان) مسؤول عن عرض تلميح الأداة. يمكن استخدام هذه السمة لعرض تلميحات الأدوات لكائنات مختلفة، ولكنها تُستخدم غالبًا كنص توضيحي للصور.

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

يمكن استخدام كلمة أو عبارة واحدة أو عدة جمل مرة واحدة كتلميح. عادةً ما يبدو تلميح أداة HTML كما يلي:

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

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

طريقة CSS النقية

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

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

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

#pdskzk (الموضع: نسبي؛ العرض: كتلة مضمّنة؛)

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

أسهل طريقة لإنشاء تلميحات الأدوات في CSS هي من خلال العناصر الزائفة:

#pdskzk:hover:after ( content: attr(data-name); الموضع: مطلق; يسار: 0; أسفل: 0; الخلفية: rgba(5,13,156,.55); اللون: #fff; محاذاة النص: مركز ؛ عائلة الخط: مخطوطة؛ حجم الخط: 14 بكسل؛ الحشو: 3 بكسل 0؛ العرض: 100%؛ )

على الرغم من وفرة التعليمات البرمجية، فمن السهل جدا أن نفهم. يلزم وجود محدد #pdskzk:hover:after لإنشاء عنصر زائف بعد عندما يضع المستخدم المؤشر على حاوية الصورة. المحتوى: خاصية attr(اسم البيانات) مخصصة لتحديد قيمة نصية. وهو يتوافق مع الخاصية المكتوبة في سمة اسم البيانات لحاوية غلاف الصورة.

بعد ذلك، كل ما تبقى هو وضع الكائن بشكل مطلق وإعطائه المعلمات الضرورية:

  • لون؛
  • الخط، الخ.

وبالتالي، نحصل على تلميح أداة CSS هذا عند المرور فوق الصورة:


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

ظهور سلس

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

نص تلميح الأداة

تجدر الإشارة إلى أن كود CSS ظل دون تغيير تقريبًا:

#pdskzk2 (الموضع: نسبي؛ العرض: كتلة مضمّنة؛) #pdskzk2 .text (الانتقال: الكل 0.6 ثانية؛ العتامة: 0؛ الموضع: مطلق؛ اليسار: 0؛ الأسفل: 0؛ الخلفية: rgba(5,13,156,. 55)؛ اللون: #fff؛ محاذاة النص: المركز؛ عائلة الخط: مخطوطة؛ حجم الخط: 14 بكسل؛ الحشو: 3 بكسل 0؛ العرض: 100%؛ التحويل: مقياس (0)؛ ) #pdskzk2:hover .text (التعتيم: 1؛)

التغيير الرئيسي هو خاصية المحتوى، والتي لم يتم استخدامها في هذا المثال. لقد فقدت أهميتها لأنها مدعومة فقط بعناصر زائفة. تغيير آخر هو مظهر خاصية الانتقال. هذه الخاصية هي المسؤولة عن إنشاء انتقالات سلسة. ربما لاحظ القارئ اليقظ قيمة العتامة: 0. فهي تجعل الحاوية التي تحتوي على تلميح الأداة شفافة.

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

يتيح لك CSS3 إخفاء عنصر بطرق أخرى. على سبيل المثال، يمكن استخدام التحويل. تتضمن هذه الطريقة استبدال الشفافية الكاملة بخاصية التحويل: مقياس (0). تحتاج أيضًا إلى تقليل حجم الحاوية إلى 0. وبهذه الطريقة لن يكون مرئيًا على الصفحة. عند المرور فوق حاوية بها صورة، فإنك تحتاج إلى تحديد خاصية التحويل: مقياس (1). تسمح لك هذه الطريقة بجعل مظهر الرسالة النصية المنبثقة ليس سلسًا فحسب، بل مثيرًا للإعجاب أيضًا.

أساليب أخرى

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

في الوقت الحاضر، في ضوء اتجاهات WEB 2.0، أصبح من المألوف إضافة جميع أنواع "الحيل" إلى المواقع. يتم تنفيذها عادةً باستخدام مكتبات JavaScript. وطلبت مني روح البرمجة الخاصة بي إنشاء شيء مثل متصفح الويب JavaScript، ولكن دون استخدام أي مكتبة، بلغة نقية، إذا جاز التعبير. وأثناء تعلمي لهذه اللغة الرائعة، ولدت هذا البرنامج النصي: فهو يعرض تلميحات في فقاعة عندما تحوم فوق عنصر معين. تلميح أو تلميح أداة تناظرية لـ JQuery - لا أتذكر بالضبط.

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

التعليمات: تحتاج فقط إلى استدعاء وظيفة التلميح كمنشئ، وتمرير المعلمات التالية إليها:

  • مطلوب. السياق العام أو في المتصفح إشارة إلى كائن النافذة.
  • مطلوب. NodeList من العناصر (على سبيل المثال getElementsByTagName("DIV"))، أو رابط للعنصر الذي تريد عرض تلميح الأدوات عليه (على سبيل المثال getElementById("tip-div")).
  • خياري. كائن ذو إعدادات النمط مثل هذا:
    (الخلفية: "أصفر"، الحد: "1 بكسل أخضر خالص")
  • خياري. كائن ذو إعدادات إزاحة السحابة على طول المحورين X وY مثل هذا:
    ( x: 20, y: -20 ) - يجب أن يحتوي الكائن على هاتين الخاصيتين

    • مثال الاستخدام:

    Window.onload = function() ( // تشغيل تلميحات الأدوات: new Tip(window, document.getElementsByTagName("a"), ( borderRadius: "10px"، الخلفية: "yellow"، الحدود: "solid 1px green"، اللون: "أخضر"، الحشو: "10 بكسل" )، (x: 20، y: -20))؛ )

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

    البرنامج النصي لتلميح القائمة (إنه ليس بهذا الحجم. ويحتوي على المزيد من التعليقات):

    نصيحة الوظيفة (GLOBAL، Elements، Styles، offset) ( // تأمين الوسائط الاختيارية: if (!offset) ( offset = (x: 50, y: -10)) ) if(!styles) (styles = (); ) // الإعلان عن المتغيرات والتبعيات var DOC = GLOBAL.document, length = Elements.length, TipDiv,prop, i; // أضف عنصر تلميح html: الوظيفة addTip(element,div,textTip) ( // يجب أن يكون الموضع مطلقًا: div .style.position = "absolute"; // استخلاص القيم من كائن إعدادات النمط: for (prop instyles) ( if (styles.hasOwnProperty(prop)) ( div.style =styles; ) ) // أضف عنصر تلميح أداة إلى شجرة DOM element.parentNode.appendChild(div); // أضف نصًا إلى div تلميح الأداة // يتم ذلك هنا بالضبط لتجنب // تسرب الذاكرة في IE6 div.appendChild(textTip); return div; ) // توزيع الفطائر (أحداث المعالجات) // @parament element - رابط إلى عنصر html function addHandlers(element) ( // أنشئ قسمًا لتلميح الأداة: var div = DOC.createElement("DIV"), // قم بتعيين النص لتلميح الأداة - خذه من عنوان السمة textTip = DOC.createTextNode(element.tempTitle); // معالج حدث تمرير الماوس: وظيفة mouseOver() ( TipDiv = addTip(element,div,textTip); // احسب موضع الفقاعة: TipDiv.style.top = element.offsetTop + offset.y - TipDiv.offsetHeight + "px" ; TipDiv.style.left = element.offsetLeft + offset.x + element.offsetLeft + "px"; ) // معالج حدث نقل الماوس: وظيفة mouseOut() ( TipDiv.parentNode.removeChild(tipDiv); TipDiv = null;) // تعيين معالجات الأحداث: element.onmouseover = mouseOver; element.onmouseout = mouseOut; ) // إذا كانت العناصر عبارة عن قائمة عقدية if (elements.item) ( // قم بالتكرار عبر العناصر المحددة: for (i = 0; i

    يسمح لك تلميح أداة فقاعات الكلام بإضافة تلميحات أدوات، إما أن يكون نصها موجودًا في سمة عنوان الرابط، أو يتم تقديمه كنص HTML في ملف منفصل يتم تحميله باستخدام AJAX. لا يستخدم نمط تلميح الأدوات أي صور، بل يستخدم تقنيات CSS فقط.

    يستخدم تلميح أداة فقاعات الكلام الزوايا والظلال المستديرة في CSS3. تبدو تلميحات الأدوات رائعة في FF3+، وOpera 9+، وGoogle Chrome/Safari 4+. في IE7 وIE8، تحتفظ تلميحات الأدوات بوظائفها دون تأثيرات CSS3.

    الاستخدام. الخطوة 1.

    أضف الكود التالي إلى القسم رأسالصفحات التي تحتاج إلى تنظيم النصائح عليها:

    jQuery(function($)( // عند حدوث حدث document.ready // تطبيق تلميحات للارتباطات مع فئة "addspeech"، وابحث عن نص للتلميحات في الملف "speechdata.txt" $("a.addspeech" ).speechbubble ((url:"speechdata.txt")))

    يستخدم هذا الرمز ثلاثة ملفات يمكن العثور عليها في الأرشيف باستخدام البرنامج النصي ( فقاعات الكلام.css , الكلام الفقاعات.jsو خطاب بيانات.txt). افتراضيًا، يتم وضعها في نفس الدليل مثل صفحة الويب.

    الخطوة 2.

    في تعليمات HTML البرمجية، قم بتعيين فئة الروابط التي تحتوي على تلميحات الأدوات addpeechوقيمة السمة ريل,والذي يتوافق مع نص التلميح المطلوب في الملف خطاب بيانات.txt

    على سبيل المثال، "إنشاء لوحة خيارات مخصصة في Wordpress."

    بشكل افتراضي، يقوم البرنامج النصي بتعيين تلميحات الأدوات لجميع الروابط مع الفصل الدراسي addpeech. عند تهيئة البرنامج النصي، يتم تثبيت ملف سيتم تحميل التلميحات منه (راجع الخطوة 1).

    يتم تعيين نمط عرض تلميحات الأدوات باستخدام كود CSS الخاص بالملف فقاعات الكلام.css .

    طريقتان لتعيين نص تلميح الأداة

    هناك طريقتان لتعيين نص تلميح الأداة:

    طريقة 1.

    يتم تعيين نص تلميح الأداة كقيمة السمة عنوانروابط مع الطبقة addpeech :

    نص الارتباط

    سيستخدم البرنامج النصي قيمة السمة تلقائيًا عنوانللحصول على تلميح.

    الطريقة 2.

    يتم إعداد علامة تلميح الأدوات في ملف آخر (في المثال، هذا هو الملف خطاب بيانات.txt). تتيح لك هذه الطريقة تنظيم تخزين مركزي للتلميحات، وهو ما سيكون مناسبًا جدًا عند تطوير مشروع متنامٍ.

    تنسيق ترميز تلميح الأداة هو كما يلي:

    نصيحة المثال رقم 1. نصيحة المثال رقم 2. حدد جزءًا من النص. نصيحة المثال رقم 3. نصيحة المثال رقم 4.

    مثال على استخدام الرابط

    في هذا المثال، نص العنصر مع معرف فقاعة الكلام1من - الملف خطاب بيانات.txt .

    شكرًا لـBlacknife وGeyan وdimaua لقضاء وقتك في الإجابة على هذا السؤال. ربما تكون حلولهم ليست أقل جودة من حيث الجودة، لكنني قررت اختيار البرنامج المساعد Tooltipster jQuery. ويحل المشكلة المطروحة في السؤال.

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

    لا يقوم Tooltipster برمي تلميحات الأدوات من النافذة، ليس فقط عندما تكون بسيطة. في المثال الموضح، تظهر تلميحات أدوات مختلفة عند المرور فوق أيقونة ذات تصميم مخصص والنقر عليها وتعيين الوقت الذي سيكون تلميح الأداة مرئيًا خلاله - http://codepen.io/Kristinita/pen/RGzVmK.

    $(document).ready(function() ( var $SashaElement = $(".SashaTooltip"); $SashaElement.tooltipster(( content: "ربما يكون النسيم هو الذي يحرك شفتيك"، الموضوع: ["tooltipster-punk- مخصص "]، المؤقت: 2000، الجانب: ["أسفل"، "أعلى"، "يمين"، "يسار"] )); $SashaElement.tooltipster(( content: "ربما أصرخ إليك، لكن يمكنك ذلك "لا تسمعني"، السمة: "tooltipster-punk"، المشغل: "انقر"، متعدد: صحيح، المؤقت: 2000، الجانب: ["أسفل"، "أعلى"، "يمين"، "يسار"] ))؛ )); الجسم ( الخلفية: غيسبورو؛ الهامش العلوي: 7rem؛ المساحة المتروكة على اليسار: 7rem؛ ) .tooltipster-sidetip.tooltipster-punk-customized .tooltipster-box ( نصف قطر الحدود: 5 بكسل؛ الحدود: لا شيء؛ الحد السفلي: 3 بكسل صلب برتقالي؛ الخلفية: #2a2a2a؛)

    توضيح

    ما نراه:

    • إذا لم يتم احتواء نص تلميح الأداة في سطر واحد، فسيتم التفافه إلى السطر التالي.
    • عندما لا يكون هناك مساحة متبقية على الجانب المضيء، يظهر تلميح الأداة على الجانب الآخر. تم تكوين الشاشة بواسطة المعلمة الجانبية، في المثال قمت بتعيينها على ["bottom"، "top"، "right"، "left"] . سيكون تلميح الأداة الافتراضي في الأسفل، وإذا لم يكن هناك مساحة هناك، فسيكون في الأعلى؛ عندما لا تكون هناك مساحة كافية في الأسفل وفي الأعلى - على اليمين؛ وأخيرًا، إذا لم يكن هناك مكان يتجه إليه من الأسفل والأعلى واليمين، فسوف يخرج من اليسار.

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