English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap أساسيات التعليمات

Bootstrap插件

Bootstrap Tooltip插件

عندما ترغب في وصف رابط، تكون أدوات التلميح (Tooltip) مفيدة جدًا. تأخذ وحدة أدوات التلميح (Tooltip) الهيكل من Jason Frame مكتوبة من قبل jQuery.tipsy الإلهام. تم إجراء العديد من التحسينات في وحدة أدوات التلميح (Tooltip)، مثل عدم الاعتماد على الصور، بل استخدام CSS لتحقيق تأثيرات الحركة، وتخزين معلومات العنوان باستخدام خصائص data.

إذا كنت ترغب في الاستعانة بميزات هذه الوحدة بشكل مستقل، فإنه من الضروري الاستعانة بـ tooltip.js، أو كما Bootstrap插件概览 كما ذكر في الفصل، يمكنك الاستعانة بـ bootstrap.js أو النسخة المضغوطة bootstrap.min.js。

طريقة الاستخدام

تقوم وحدة أدوات التلميح (Tooltip) بإنشاء محتوى وعلامات وفقًا للطلب، بشكل افتراضي يتم وضع أدوات التلميح (tooltip) خلف العناصر التي تُشغلها. يمكنك إضافة أدوات التلميح (tooltip) بالطريقتين التاليتين:

  • من خلال خصائص data：إذا كنت ترغب في إضافة أدوات التلميح (tooltip)، فما عليك سوى إضافة data-toggle="tooltip" هذا كل شيء. عنوان العنصر هو نص أدوات التلميح (tooltip) بشكل افتراضي، يتم تعيين أدوات التلميح (tooltip) في أعلى.

    <a href="#" data-toggle="tooltip" title="Example tooltip">الآن، حرك مؤشر الفأرة فوقي</a>

  • من خلال JavaScript：من خلال JavaScript تفعيل أدوات التلميح (tooltip)：

    $('#identifier').tooltip(options)

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

$(function() { $("[data-toggle='tooltip']").tooltip(); });

مثال عبر الإنترنت

في المثال التالي، يتم عرض كيفية استخدام إضافة الخوارزمية (Tooltip) عبر استخدام خاصية data.

مثال عبر الإنترنت

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>مثال Bootstrap - إضافة الخوارزمية (Tooltip)</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h4>الإضافة إلى التوجيه (Tooltip) - المرساة</h4>
هذا هو <a href="#" class="tooltip-test" data-toggle="tooltip" title="الخوارزمية الافتراضية">الخوارزمية الافتراضية</a>.
هذا هو <a href="#" class="tooltip-test" data-toggle="tooltip" data-placement="left" title="الخوارزمية من اليسار">الخوارزمية من اليسار</a>.
هذا هو <a href="#" data-toggle="tooltip" data-placement="top" title="الخوارزمية من الأعلى">الخوارزمية من الأعلى</a>.
هذا هو <a href="#" data-toggle="tooltip" data-placement="bottom" title="الخوارزمية من الأسفل">الخوارزمية من الأسفل</a>.
هذا هو <a href="#" data-toggle="tooltip" data-placement="right" title="الخوارزمية من اليمين">الخوارزمية من اليمين</a>.
<br>
<h4>إضافة الخوارزمية (Tooltip) - زر</h4>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="الخوارزمية الافتراضية">الخوارزمية الافتراضية</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="الخوارزمية من اليسار">الخوارزمية من اليسار</button>
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip في الأعلى">Tooltip في الأعلى</button>
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip في الأسفل">Tooltip في الأسفل
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip في الجانب الأيمن">Tooltip في الجانب الأيمن</button>
<script>
	$(function() { $("[data-toggle='tooltip']").tooltip(); });
</script>
</body>
</html>
التحقق من ذلك ‹/›

النتيجة كما يظهر أدناه:

الخيارات

بعض الخيارات تم إضافتها من خلال API البيانات لـ Bootstrap (Bootstrap Data API) أو من خلال استدعاء JavaScript. يُظهر الجدول أدناه هذه الخيارات:

اسم الخيارنوع/القيمة الافتراضيةاسم خاصية البياناتوصف
animationboolean
القيمة الافتراضية: true		data-animationاستخدام تأثير الفلتر التدرجي CSS للأداة التوجيهية.
htmlboolean
القيمة الافتراضية: false		data-htmlإدراج HTML في الأداة التوجيهية. إذا كان ذلك خطأ، سيتم استخدام طريقة jQuery text لتحديد المحتوى في DOM. إذا كنت قلقًا بشأن هجمات XSS، استخدم text.
placementstring|function
القيمة الافتراضية: top		data-placementتحديد كيفية تحديد موقع الأداة التوجيهية (أي top|bottom|left|right|auto).
عند تحديد auto عندما يتم تحديد ذلك، سيقوم بتعديل ديناميكي للأداة التوجيهية. على سبيل المثال، إذا كان placement هو "auto left"، فإن الأداة التوجيهية ستظهر في الجانب الأيسر قدر الإمكان، وسيتطلب ذلك الحالة غير المسموح بها ليعرض في الجانب الأيمن.
selectorstring
القيمة الافتراضية: false		data-selectorإذا تم تقديم مكنسة، سيتم تفويض وحدة التوجيه إلى الهدف المحدد.
titlestring | function
القيمة الافتراضية: ''		data-titleإذا لم يتم تحديده title إذا لم يتم تحديد السمة، فإن خيار title هو القيمة الافتراضية لـ title.
triggerstring
القيمة الافتراضية: 'hover focus'		data-triggerتحديد كيفية تفعيل وحدة التوجيه: click| hover | focus | manual. يمكنك نقل عدة محفزات، مفصولة بفاصلة.
delaynumber | object
القيمة الافتراضية: 0		data-delayالاستجابة الزمنية للإظهار والإخفاء في ميليسي ثانية - لا تنطبق على التفعيل اليدوي. إذا تم تقديم رقم، فإن الاستجابة الزمنية ستطبق على الإظهار والإخفاء. إذا تم تقديم دالة، فإن الهيكل كما يلي:
delay:
{　show:　500,　hide:　100　}
containerstring | false
القيمة الافتراضية: false		data-containerإضافة وحدة التوجيه إلى العنصر المحدد.
مثال: container: 'body'

الأساليب

إليك بعض الأساليب المفيدة في وحدة التوجيه (Tooltip) المدمجة:

الأساليبوصفمثال
Options: .tooltip(options)إضافة وحدة التوجيه إلى مجموعة العناصر.
$().tooltip(options)
Toggle: .tooltip('toggle')تغيير عرض/إخفاء وحدة التوجيه للعنصر.
$('#element').tooltip('toggle')
Show: .tooltip('show')إظهار وحدة التوجيه للعنصر.
$('#element').tooltip('show')
Hide: .tooltip('hide')إخفاء وحدة التوجيه للعنصر.
$('#element').tooltip('hide')
Destroy: .tooltip('destroy')إخفاء وإزالة وحدة التوجيه للعنصر.
$('#element').tooltip('destroy')

مثال عبر الإنترنت

هذا المثال يوضح استخدام طريقة وحدة التوجيه (Tooltip) المدمجة.

مثال عبر الإنترنت

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap　示例　-　工具提示(Tooltip)插件方法</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　style="padding:　100px　100px　10px;">
	هذا هو　
	<a href="#" class="tooltip-show" data-toggle="tooltip" title="show">طريقة Tooltip show</a>.
	هذا هو　
	<a href="#" class="tooltip-hide" data-toggle="tooltip" data-placement="left" title="hide">طريقة Tooltip hide</a>.
	هذا هو　
	<a href="#" class="tooltip-destroy" data-toggle="tooltip" data-placement="top" title="destroy">طريقة Tooltip destroy</a>.
	هذا هو　
	<a href="#" class="tooltip-toggle" data-toggle="tooltip" data-placement="bottom" title="toggle">طريقة Tooltip toggle</a>.
	<br><br><br><br><br><br>
	<p class="tooltip-options">
		هذا هو　
		<a href="#" data-toggle="tooltip" title="<h2>'am Header2 </h2>">خيارات طريقة Tooltip</a>.
	</p>
	<script>
		$(function () { $('.tooltip-show').tooltip('show');});
		$(function () { $('.tooltip-hide').tooltip('hide');});
		$(function () { $('.tooltip-destroy').tooltip('destroy');});
		$(function () { $('.tooltip-toggle').tooltip('toggle');});
		$(function () { $(".tooltip-options a").tooltip({html: true});});
	</script>
</div>
</body>
</html>
التحقق من ذلك ‹/›

النتيجة كما يظهر أدناه:

حدث

يُظهر الجدول أدناه الأحداث التي سيتم استخدامها في مكون إضافة النصوص (Tooltip) هذه. يمكن استخدام هذه الأحداث كحاويات في الدالة.

حدثوصفمثال
show.bs.tooltipعند استدعاء طريقة عرض المثال يُطلق هذا الحدث فورًا.
$('#myTooltip').on('show.bs.tooltip', function () {
　　// تنفيذ بعض الأفعال...
});
shown.bs.tooltipتُنشيء هذه الحدث عند ظهور إضافة التوجيه (Tooltip) أمام المستخدم (سيتم انتظار اكتمال تأثير التحويل CSS).
$('#myTooltip').on('shown.bs.tooltip', function () {
　　// تنفيذ بعض الأفعال...
});
hide.bs.tooltipتُنشيء هذه الحدث عند استدعاء طريقة hide المثال.
$('#myTooltip').on('hide.bs.tooltip', function () {
　　// تنفيذ بعض الأفعال...
});
hidden.bs.tooltipتُنشيء هذه الحدث عند إخفاء إضافة التوجيه (Tooltip) من المستخدم (سيتم انتظار اكتمال تأثير التحويل CSS).
$('#myTooltip').on('hidden.bs.tooltip', function () {
　　// تنفيذ بعض الأفعال...
});

مثال عبر الإنترنت

السطر التالي يعرض كيفية استخدام أحداث إضافة التوجيه (Tooltip)插件.

مثال عبر الإنترنت

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>مثال Bootstrap - أحداث إضافة التوجيه (Tooltip)插件</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h4>الإضافة إلى التوجيه (Tooltip) - المرساة</h4>
هذا هو <a href="#" class="tooltip-show" data-toggle="tooltip"　
	title="الخيار الأساسي Tooltip">الخيار الأساسي Tooltip
</a>.
<script>
$(function () { $('.tooltip-show').tooltip('show');});
$((function() {$('.tooltip-show').on('show.bs.tooltip', function() {}}))
	alert("رسالة التحذير عند العرض");
})});
</script>
</body>
</html>
التحقق من ذلك ‹/›

النتيجة كما يظهر أدناه:

مكون إضافي نافذة الإشعار Bootstrapمكون إضافي علامات الصفحة Bootstrap