مسج موبايل بالنوافذ
بالنوافذ متشابهة إلى الحوارات، في أن كلا منهما تراكب جزء من الصفحة. مربع منبثق يمكن أن يكون مفيدا عندما تريد عرض نص صغير والصور والخرائط أو المحتويات الأخرى.
لخلق المنبثقة، وتبدأ مع <a> عنصر و <div> العنصر. إضافة data-rel="popup" السمة إلى <a> ، و data-role="popup" تنسب إلى <div> . ثم تحديد الهوية ل <div> ، وتعيين href من <a> لتتناسب مع هوية محددة. محتوى داخل <div> هو المحتوى الفعلي الذي سوف يطفو على السطح عندما ينقر المستخدم على الوصلة.
ملاحظة: المنبثقة <div> يجب أن يكون ضمن نفس الصفحة مثل الارتباط.
مثال
< a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline
ui-corner-all">Show Popup</a>
< div data-role="popup" id="myPopup" >
<p>This
is a simple popup.</p>
</div> انها محاولة لنفسك » إذا كنت تريد بعض الحشو الزائد والهامش في مربع المنبثقة الخاص بك، قم بإضافة "ui-content" فئة ل <div> :
إغلاق النوافذ المنبثقة
افتراضيا، بالنوافذ يمكن إغلاق إما عن طريق النقر خارج منطقة الجزاء منبثقة أو عن طريق الضغط على "Esc" مفتاح. إذا كنت لا تريد أن تكون منبثقة محكمة السد عن طريق النقر خارج منطقة الجزاء، يمكنك إضافة data-dismissible="false" السمة إلى المنبثقة (غير مستحسن حقا). يمكنك أيضا إضافة زر إغلاق إلى المنبثقة، ووضع اليمين أو اليسار. للقيام بذلك، قم بإضافة وصلة زر مع data-rel="back" سمة في وعاء المنبثقة، ووضع زر من قبل الطبقات CSS.
| وصف | مثال |
|---|---|
| زر الإغلاق الصحيح | جربها |
| زر الإغلاق اليسار | جربها |
| قافزة Undismissible | جربها |
المواقع بالنوافذ
افتراضيا، وسوف تظهر بالنوافذ مباشرة على العنصر الذي تم النقر عليه. للسيطرة على الموقف من النوافذ المنبثقة، استخدام البيانات الموقف إلى السمة على الرابط الذي يستخدم لفتح النوافذ المنبثقة.
هناك ثلاث طرق لتحديد المواقع المنبثقة:
| قيمة السمة | وصف |
|---|---|
| data-position-to="window" | ستظهر المنبثقة تركزت ضمن إطار |
| data-position-to="#myId" | يتم وضع المنبثقة على عنصر مع #ID محدد |
| data-position-to="origin" | افتراضي. يتم وضع المنبثقة مباشرة على العنصر الذي تم النقر عليه |
مثال
<a href="#myPopup1" data-rel="popup" class="ui-btn" data-position-to="window" >Window</a>
<a href="#myPopup2" data-rel="popup"
class="ui-btn" data-position-to="#demo"> id="demo"</a>
<a href="#myPopup3"
data-rel="popup" class="ui-btn" data-position-to="origin" >Origin</a> انها محاولة لنفسك » التحولات
افتراضيا، بالنوافذ ليس لديهم أي الانتقال من آثار المضافة إليها. يمكنك استخدام أي من الآثار التي قدمنا في الفصل "التحولات". مجرد تطبيق المرحلة الانتقالية البيانات = "قيمة" السمة إلى الارتباط الذي يفتح المنبثقة:
مظاهرة من جميع آثار التحول المتاحة
<a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="fade" >Fade</a> انها محاولة لنفسك » سهام منبثقة
لإضافة السهم إلى حدود المنبثقة، استخدم السمة السهم البيانات، وتحديد قيمة "l" (left), "t" (top), "r" (right) أو "b" (bottom) :
مثال
<a href="#myPopup" data-rel="popup" class="ui-btn">Open
Popup</a>
<div data-role="popup" id="myPopup" class="ui-content"
data-arrow="l" >
<p>There
is an arrow on my LEFT border.</p>
</div> انها محاولة لنفسك » المنبثقة الحوارات
يمكنك إضافة العلامات الحوار القياسية في منبثقة (رأس والمحتوى والعلامات تذييل الصفحة):
مثال
<a href="#myPopupDialog" data-rel="popup" class="ui-btn">Open Dialog
Popup</a>
<div data-role="popup" id="myPopupDialog">
<div
data-role="header"><h1>Header Text..</h1></div>
<div
data-role="main" class="ui-content"><p>Some text..</p><a href="#">some
links..</a>
<div data-role="footer"><h1>Footer Text..</h1></div>
</div> انها محاولة لنفسك » قافزة صور
يمكنك أيضا عرض الصور في منبثقة:
مثال
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="skaret.jpg"
alt="Skaret View" style="width:200px;"></a>
<div data-role="popup"
id="myPopup">
<img src="skaret.jpg"
style="width:800px;height:400px;" alt="Skaret View">
</div> انها محاولة لنفسك » ملاحظة: بالنوافذ ليست مثالية عندما يكون لديك مجموعة كاملة من الصور التي تريد عرضها (مثل الألبوم مع 500 صورة). ومع ذلك، لبضعة الصور التي تحتاج إلى أن ينظر إليها أكبر - فهي مثالية.
منبثقة تراكب
يمكنك التحكم في لون الخلفية وراء المنبثقة (الصفحة نفسها) مع data-overlay-theme السمة.
افتراضيا تراكب شفاف. استخدام data-overlay-theme="a" لإضافة تراكب الضوء وتراكب موضوع البيانات = "ب" لإضافة تراكب الظلام:
مثال
<a href="#myPopup" data-rel="popup">Show Popup</a>
<div data-role="popup" id="myPopup"
data-overlay-theme="b" >
<p>I
have a dark background behind me.</p>
</div> انها محاولة لنفسك » وكثيرا ما يستخدم تأثير تراكب على الصور المنبثقة:
مثال
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="skaret.jpg"
alt="Skaret View" style="width:200px;"></a>
<div data-role="popup"
id="myPopup"
data-overlay-theme="b" >
<img src="skaret.jpg"
style="width:800px;height:400px;" alt="Skaret View">
</div> انها محاولة لنفسك » ملاحظة: سوف تتعلم أيضا كيفية استخدام بالنوافذ في أشكال وقائمة وجهات النظر في فصول لاحقة.