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

دليل أساسي لBootstrap

مكونات Bootstrap

مكون (بابوبوف) الخاص بBootstrap

مكون (بابوبوف) مشابه لتوجيه النصوص (Tooltip) يقدم رؤية متميزة. لتفعيل نافذة (بابوبوف)، يجب على المستخدم فقط وضع فأرة الجهاز على العنصر. يمكن تعبئة محتوى نافذة (بابوبوف) بالكامل باستخدام API البيانات الخاصة بBootstrap (Bootstrap Data API). يعتمد هذا الأسلوب على توجيه النصوص (Tooltip).

إذا كنت ترغب في الاستعانة بميزات المكون بشكل مستقل، فيجب عليك الاستعانة بها popover.jsيعتمد على مكون النصوص التوضيحية (Tooltip). أو، كما مخطط واجهات برمجة تطبيقات Bootstrap كما ذكر في الفصل، يمكنك الاستعانة بها bootstrap.js أو النسخة المضغوطة bootstrap.min.js.

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

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

  • من خلال خاصية dataلإضافة نافذة (بابوبوف)، فقط أضفها إلى وسم رابط أو زر data-toggle="popover" يكون عنوان الحبس هو نص نافذة (بابوبوف). بشكل افتراضي، يضعه المكون في الجزء العلوي.

    <a href="#" data-toggle="popover" title="مثال على بابوبوف">
　　　　يرجى التمهل فوقي
</a>

  • 通过 JavaScript：通过 JavaScript 启用弹出框(popover)：

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

弹出框(Popover)插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取javascript）。使用下面的脚本来启用页面中的所有的弹出框(popover)：

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

مثال على الخط

下面的示例演示了通过 data 属性使用弹出框(Popover)插件的用法。

مثال على الخط

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap 示例 - 弹出框(Popover)插件</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 class="container" style="padding: 100px 50px 10px;"
	<button type="button" class="btn btn-default" title="Popover title"　　
			data-container="body" data-toggle="popover" data-placement="left"　
			data-content="Popover左侧的某些内容">
		الPopover اليسرى
	</button>
	<button type="button" class="btn btn-primary" title="Popover title"　　
			data-container="body" data-toggle="popover" data-placement="top"　
			data-content="Popover顶部的某些内容">
		الPopover في القمة
	</button>
	<button type="button" class="btn btn-success" title="Popover title"　　
			data-container="body" data-toggle="popover" data-placement="bottom"　
			data-content="Popover底部的某些内容">
		Popover في الأسفل
	</button>
	<button type="button" class="btn btn-warning" title="Popover title"　　
			data-container="body" data-toggle="popover" data-placement="right"　
			data-content="بعض المحتويات في النافذة المنبثقة اليمنى">
		Popover في الجانب الأيمن
	</button>
</div>
<script>
$(function () {　
	$("[data-toggle='popover']").popover();
});
</script>
</body>
</html>
اختبار النظرية ‹/›

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

الخيارات

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

اسم الخيارالنوع/القيمة الافتراضيةاسم خاصية البياناتالوصف
animationالنوع: boolean
القيمة الافتراضية: true		data-animationتطبيق تأثير التدرج باللون الأبيض على النافذة المنبثقة.
htmlالنوع: boolean
Default value: false		data-htmlإدراج HTML في النافذة المنبثقة. إذا كان الخيار هو false، سيتم استخدام طريقة jQuery text لتحديد المحتوى في DOM. إذا كنت قلقًا بشأن هجوم XSS، استخدم text.
placementالنوع: string|function
القيمة الافتراضية: top		data-placementتحديد كيفية تحديد موقف النافذة المنبثقة (i.e. top|bottom|left|right|auto).
عندما يتم تحديد auto عندما يكون الـ placement هو "auto left"، سيتم عرض النافذة المنبثقة على اليسار قدر الإمكان، وعندما لا يكون ذلك ممكنًا، سيتم عرضها على اليمين.
محددالنوع: string
Default value: false		data-selectorإذا تم تقديم مُحدد، سيتم تفويض عنصر النافذة المنبثقة إلى الهدف المحدد.
titleالنوع: string | function
القيمة الافتراضية: ''		data-titleإذا لم يتم تحديد title إذا لم يتم تحديد خيار، فإن عنوان الخيار هو القيمة الافتراضية للعنوان.
مُشغلالنوع: string
القيمة الافتراضية: 'hover focus'		data-triggerتحديد كيفية تفعيل النافذة المنبثقة: click| hover | focus | manualيمكنك إرسال عدة مُشغلات، مفصولة بفاصلة.
delayرقم | عنوان
القيمة الافتراضية: 0		data-delayالإبطاء في عرض وتخفيض النافذة المنبثقة بالألفات - لا ينطبق على نوع التفعيل اليدوي. إذا تم تقديم رقم، فإن الإبطاء سيطبق على العرض والتخفيض. إذا تم تقديم عنوان، فإن بنية العنوان كالتالي:
delay:
{show: 500, hide: 100}
containerstring | false
Default value: false		data-containerAdd Popover to the specified element.
مثال: container: 'body'

methods

فيما يلي بعض الطرق المفيدة لإضافة Popover:

methodsالوصفمثال
Options: .popover(options)Attach Popover handlers to a collection of elements.
$().popover(options)
Toggle: .popover('toggle')تoggles the display/hide of the element's Popover.
$('#element').popover('toggle')
Show: .popover('show')عرض Popover للعنصر.
$('#element').popover('show')
Hide: .popover('hide')إخفاء Popover للعنصر.
$('#element').popover('hide')
Destroy: .popover('destroy')إخفاء وإزالة Popover للعنصر.
$('#element').popover('destroy')

مثال على الخط

فيما يلي أمثلة توضح طرق إضافة Popover:

مثال على الخط

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>مثال Bootstrap - طريقة إضافة Popover</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 class="container" style="padding: 100px 50px 10px;"
	<button type="button" class="btn btn-default popover-show"　
			title="عنوانPopover" data-container="body"　
			data-toggle="popover" data-placement="left"　
			data-content="الPopover اليسرى بعض المعلومات ال—— عرض الطريقة">
		الPopover اليسرى
	</button>
	<button type="button" class="btn btn-primary popover-hide"　
			title="عنوانPopover" data-container="body"　
			data-toggle="popover" data-placement="top"　
			data-content="الPopover في القمة بعض المحتويات - method hide"
		الPopover في القمة
	</button>
	<button type="button" class="btn btn-success popover-destroy"　
			title="عنوانPopover" data-container="body"　
			data-toggle="popover" data-placement="bottom"　
			data-content="بعض المحتويات في Popover في الأسفل - طريقة destroy">
		Popover في الأسفل
	</button>
	<button type="button" class="btn btn-warning popover-toggle"　
			title="عنوانPopover" data-container="body"　
			data-toggle="popover" data-placement="right"　
			data-content="بعض المحتويات في Popover في الجانب الأيمن - طريقة toggle">
		Popover في الجانب الأيمن
	</button><br><br><br><br><br><br>
	<p class="popover-options">
		<a href="#" type="button" class="btn btn-warning" title="<h2>Title</h2>"　　
		　　　data-container="body" data-toggle="popover" data-content="
																	　<h4>بعض المحتويات في Popover - طريقة options</h4>
			Popover
		</a>
	</p>
	<script>
		$(function() { $('.popover-show').popover('show');});
		$(function () { $('.popover-hide').popover('hide');});
		$(function () { $('.popover-destroy').popover('destroy');});
		$(function () { $('.popover-toggle').popover('toggle');});
		$(function () { $(".popover-options a").popover({html: true});});
	</script>
</div>
</body>
</html>
اختبار النظرية ‹/›

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

الحادث

يُقسم الجدول أدناه إلى الأحداث المستخدمة في إضافة Popover. يمكن استخدام هذه الأحداث كوصلات في الدالة.

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

مثال على الخط

السطر التالي يوضح مثال على واجهة Popover

مثال على الخط

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>مثال Bootstrap - واجهة Popover</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 clas="container" style="padding: 100px 50px 10px;" >
	<button type="button" class="btn btn-primary popover-show">　
			title="عنوانPopover" data-container="body"　
			data-toggle="popover"　
			data-content="الPopover اليسرى بعض المعلومات ال—— عرض الطريقة">
		الPopover اليسرى
	</button>
</div>
<script>
	$(function() { $('.popover-show').popover('show');});
	$((function() { $('.popover-show').on('shown.bs.popover', function() {}}))
		alert("رسالة التحذير عند العرض");
	})});
</script>
</body>
</html>
اختبار النظرية ‹/›

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

نافذة التحذير Bootstrapملحق أدوات التوجيه Bootstrap