كيفية إنشاء ملحق jQuery Tooltip أساسي

إذا كان لديك أي علاقة بتطوير الويب مؤخرًا ، فلن تحتاج إلى مقدمة إلى الإضافات jQuery أو jQuery. في الواقع ، أصبحت المكونات الإضافية لـ jQuery شائعة جدًا لدرجة أن ما يقرب من 70 ٪ من الإنترنت يستخدمها بطريقة أو بأخرى.

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

إذن ، هذا ما سننشئه:

دون إضاعة المزيد من الوقت ، دعنا نتسخ أيدينا ببعض الترميز الرائع ونتقن إنشاء مكون إضافي jQuery.

هيكل الملف

1. jqueryToolTip.css - ورقة أنماط تلميح الأداة.
2. jqueryToolTip.js - ملف البرنامج المساعد jQuery الفعلي.

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

قواعد إنشاء البرنامج المساعد jQuery

1. احتفظ بالهويات الفريدة - من المهم جدًا أن يكون لديك id فريد وأسماء class بحيث لا تتخطى أنماط الصفحة الحالية في وقت تصميم عناصر المكون الإضافي.
2. اترك تعليقات السطر - يعد ترك تعليقات السطر ممارسة جيدة دائمًا. يعد هذا ضروريًا عند التعامل مع مكونات jQuery الإضافية ، لأن المستخدمين والمبرمجين قد يجدون صعوبة في معرفة معنى كل سطر من التعليمات البرمجية التي كتبها شخص آخر ، فإن محاولة فك الشفرة بدون تعليقات يمكن أن تستغرق وقتًا طويلاً.
3. تصغير كود المصدر - نظرًا لأن المكون الإضافي الخاص بك ليس هو الشيء الوحيد المطلوب لإنشاء موقع ويب ، فمن المهم استخدام مساحة صغيرة وعرض النطاق الترددي قدر الإمكان للمستخدم النهائي.

بينما لا توجد قاعدة صارمة لذلك ، أثناء الترميز ، أنا شخصياً أعتني بجزء التصميم قبل جعل الكود الخاص بي فعالاً. سوف نتبع نفس النموذج في هذا البرنامج التعليمي: سنكتب HTML و CSS المطلوبين أولاً قبل أن نبدأ في كتابة الكود الخاص ببرنامج jQuery Tooltip الإضافي الفعلي.

إنشاء ملف .html عينة وإضافة التعليمات البرمجية التالية إليه.

 <div id = "jqueryToolTip_wrapper">
    <span class = "jqueryToolTip_text"> يظهر نص تلميح الأدوات هنا </ span>
    <span class = "jqueryToolTip_arrow"> </span>
</div> <! - end jqueryToolTip ->

افتح الآن ملف jqueryToolTip.css والصق CSS أدناه بداخله.

 #jqueryToolTip_wrapper {
			الخلفية: لا شيء تكرار التمرير 0 0 rgba (0 ، 0 ، 0 ، 0.8) ؛
			نصف قطر الحدود: 4 بكسل 4 بكسل 4 بكسل 4 بكسل ؛
			-webkit-border-radius: 4px 4px 4px 4px؛
			-moz-border-radius: 4px 4px 4px 4px ؛
			اللون: #FFFFFF ؛
			حجم الخط: 12 بكسل ؛
			وزن الخط: عريض ؛
			ارتفاع الخط: عادي
			الحشو: 5 بكسل ؛
			الموقف: مطلق.
			مؤشر z: 999 ؛
			عائلة الخطوط: Arial، "MS Trebuchet"، sans-serif؛
		}
		#jqueryToolTip_wrapper .jqueryToolTip_arrow {
			أعلى: تلقائي ؛
			العرض محجوب؛
			العرض: 0؛
			الارتفاع: 0؛
			الحدود: صلبة 5 بكسل ؛
			لون الحدود: شفاف rgb (0،0،0) شفاف ؛
			لون الحدود: شفاف rgba شفاف (0،0،0،0.8) شفاف ؛
			الموقف: مطلق.
			أعلى: -10 بكسل ؛
			اليسار: 10 بكسل
		}
		#jqueryToolTip_wrapper .jqueryToolTip_arrow.arrow_down {
			لون الحدود: rgb (0،0،0) شفاف وشفاف وشفاف ؛
			لون الحدود: rgba (0،0،0،0.8) شفاف وشفاف وشفاف ؛
			أعلى: تلقائي ؛
			أسفل: -10 بكسل ؛
		}

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

تلميح مع سهم لأسفل

لإضافة سهم لأسفل إلى نفس تلميح الأداة ، كل ما عليك فعله هو إضافة فئة .arrow_down إلى النطاق مع الفئة الحالية .jqueryToolTip_arrow

قبل:

 <span class = "jqueryToolTip_arrow"> </span>

بعد:

 <span class = "jqueryToolTip_arrow arrow_down"> </span>

متطلبات

الآن وقد انتهينا من جزء HTML و CSS ، يمكننا أن نأخذ بعض الوقت لفهم المتطلبات قبل الانغماس في كتابة التعليمات البرمجية الخاصة بالمكوِّن الإضافي.

1. نحتاج إلى معرفة العنصر الذي يجب استهدافه (لأننا لا نستطيع إظهار تلميح الأداة على كل رابط رابط واحد).
2. نحتاج إلى الاستيلاء على المحور X و Y على رابط الارتساء الحالي في حالة التمرير.
3. أخيرًا ، نحتاج إلى إعادة موضع div تلميح الأداة الخاص بنا إلى رابط الارتساء الحالي في حالة التمرير.

قد يبدو هذا معقدًا ولكن عوامل تصفية jQuery وعناصر استهداف CSS ستجعل مهمتنا أسهل كثيرًا.

أساسيات ملحقات jQuery

كود الالتفاف:

 (وظيفة ($) {
			$ .fn.jqueryToolTip = الوظيفة (toolTipOptions) {
			}
			}
		}) (jQuery) ؛

الكود الموضح أعلاه هو ما تحتاج إلى استخدامه في كل مرة تبدأ فيها في إنشاء مكون إضافي من البداية. هنا jqueryToolTip هو اسم البرنامج المساعد ويمكن استبداله بأي شيء تريده. حاول أن تجعله فريدًا لأن مكونين إضافيين يحملان نفس الاسم يمكن أن يحدثا فوضى كبيرة.

الإعدادات الافتراضية:

 var toolTipDefaults = {
			الموضع: "أسفل"
		} ،

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

تجاوز الافتراضات:

 toolTipSettings = $ .extend ({}، toolTipDefaults، toolTipOptions)؛

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

بصرف النظر عما ناقشناه أعلاه ، كل شيء آخر هو كود jQuery عادي. لذا ، يمكننا الآن البدء! ما عليك سوى فتح ملف jqueryToolTip.js ووضع الكود التالي بداخله.

 (وظيفة ($) {
			$ .fn.jqueryToolTip = الوظيفة (toolTipOptions) {
				var toolTipDefaults = {
					الموضع: "أسفل"
				} ،
				toolTipSettings = $ .extend ({}، toolTipDefaults، toolTipOptions)؛
				var toolTipTemplate = '<div id = "jqueryToolTip_wrapper"> <span class = "jqueryToolTip_text"> </span> <span class = "jqueryToolTip_arrow"> </span> </div> <! - end jqueryToolTip ->' ؛
				$ ('body'). append (toolTipTemplate)؛
			}
		}) (jQuery) ؛

لقد أنشأنا متغيرًا يسمى toolTipTemplate والذي سيحتوي على ترميز HTML لبرنامج jQuery ToolTip الإضافي الخاص بنا. بعد ذلك ، سنلحق ترميز HTML بجسم صفحة الويب.

 $ (this) .each (function () {
			$ (this) .hover (function () {
				// هنا ينتقل إلى رمز الإجراءات التي تحدث بعد التمرير فوق الرابط
			}) ؛
		}) ؛

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

 $ (this) .each (function () {
			// في وظيفة التمرير
			$ (this) .hover (function () {
				var toolTipTitle = $ (this) .attr ("title") ؛ // الحصول على عنوان الارتباط الحالي
				var toTop = $ (this) .offset (). top؛ // الحصول على المحور ص الرابط الحالي
				var toLeft = $ (this) .offset (). left؛ // الحصول على المحور X الرابط الحالي
				var toolTipHeight = $ ('# jqueryToolTip_wrapper'). css ("height") ؛ // الحصول على ارتفاع تلميح الأداة
				var itemHeight = $ (this) .css ("الارتفاع") ؛ // الحصول على ارتفاع الارتباط

				إذا (toolTipSettings.position == 'top')
				{
					$ ('# jqueryToolTip_wrapper'). find ('. jqueryToolTip_arrow'). addClass ('arrow_down')؛
					var topFinal = parseInt (toTop) - parseInt (toolTipHeight) - 10 ؛
				}
				آخر
				{
					var topFinal = parseInt (toTop) + parseInt (itemHeight) + 10 ؛
				}

				$ ('. jqueryToolTip_text'). html (toolTipTitle) ؛ // تغيير نص تلميح الأدوات إلى عنوان الارتباط الحالي
				$ ('# jqueryToolTip_wrapper'). css ("display"، "block")؛ // إعداد عرض تلميح الأدوات للحظر
				$ ('# jqueryToolTip_wrapper'). css ({// setting tooltip الموضع الأيسر والأعلى لموضع الارتباط الحالي
					أعلى: topFinal ،
					اليسار: إلى اليسار
				}) ؛
			}،وظيفة(){
				$ ('# jqueryToolTip_wrapper'). css ("display"، "none")؛ // إخفاء تلميح الأدوات بعد الانتهاء من التمرير
			}) ؛
		}) ؛

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

ضع كل شيء معا

 (وظيفة ($) {
			$ .fn.jqueryToolTip = الوظيفة (toolTipOptions) {

				// الإعدادات الافتراضية للمكون الإضافي
				var toolTipDefaults = {
					الموضع: "أسفل"
				} ،

				// تمديد الإعدادات الافتراضية
				toolTipSettings = $ .extend ({}، toolTipDefaults، toolTipOptions)؛

				// HTML markup for tooltip plugin
				var toolTipTemplate = '<div id = "jqueryToolTip_wrapper"> <span class = "jqueryToolTip_text"> </span> <span class = "jqueryToolTip_arrow"> </span> </div> <! - end jqueryToolTip ->' ؛

				// إلحاق الترميز
				$ ('body'). append (toolTipTemplate)؛

				$ (this) .each (function () {
					// في وظيفة التمرير
					$ (this) .hover (function () {
						var toolTipTitle = $ (this) .attr ("title") ؛ // الحصول على عنوان الارتباط الحالي
						var toTop = $ (this) .offset (). top؛ // الحصول على المحور ص الرابط الحالي
						var toLeft = $ (this) .offset (). left؛ // الحصول على المحور X الرابط الحالي
						var toolTipHeight = $ ('# jqueryToolTip_wrapper'). css ("height") ؛ // الحصول على ارتفاع تلميح الأداة
						var itemHeight = $ (this) .css ("الارتفاع") ؛ // الحصول على ارتفاع الارتباط

						إذا (toolTipSettings.position == 'top')
						{
							$ ('# jqueryToolTip_wrapper'). find ('. jqueryToolTip_arrow'). addClass ('arrow_down')؛
							var topFinal = parseInt (toTop) - parseInt (toolTipHeight) - 10 ؛
						}
						آخر
						{
							var topFinal = parseInt (toTop) + parseInt (itemHeight) + 10 ؛
							$ ('# jqueryToolTip_wrapper'). find ('. jqueryToolTip_arrow'). removeClass ('arrow_down')؛
						}

						$ ('. jqueryToolTip_text'). html (toolTipTitle) ؛ // تغيير نص تلميح الأدوات إلى عنوان الارتباط الحالي
						$ ('# jqueryToolTip_wrapper'). css ("display"، "block")؛ // إعداد عرض تلميح الأدوات للحظر
						$ ('# jqueryToolTip_wrapper'). css ({// setting tooltip الموضع الأيسر والأعلى لموضع الارتباط الحالي
							أعلى: topFinal ،
							اليسار: إلى اليسار
						}) ؛
					}،وظيفة(){
						$ ('# jqueryToolTip_wrapper'). css ("display"، "none")؛ // إخفاء تلميح الأدوات بعد الانتهاء من التمرير
					}) ؛
				}) ؛
		}
		}) (jQuery) ؛

كيفية استدعاء البرنامج المساعد

يعد استدعاء المكون الإضافي jqueryToolTip أمرًا بسيطًا مثل أي مكون إضافي لـ jQuery.

تضمين ملف JS:

[html type = ”text / javascript” language = ”<script”]

<p> تضمين ورقة الأنماط: </ p>

 <link rel = "stylesheet" href = "../ المستندات / غير مضغوط / jqueryToolTipPluginTutorial / jqueryToolTipPluginTutorial / jqueryToolTip.css" />

قم بإنشاء رابط إرساء بسمة العنوان:

 <a href="#" title="ToolTip Demo"> ToolTip Demo </a>

استدعاء البرنامج المساعد (أساسي):

 <script type = "text / javascript">
    $ (وظيفة () {
        $ ('a'). jqueryToolTip ()؛
    })
</script>

استدعاء البرنامج المساعد (خيارات التمرير):

 <script type = "text / javascript">
    $ (وظيفة () {
        $ ('a'). jqueryToolTip ({
            الموضع: "أعلى"
        }) ؛
    })
</script>

تم الانتهاء من!