لوحات مسج موبايل
وستعمل ألواح في مسج موبايل تنزلق من اليسار أو الجانب الأيمن من الشاشة مع محتوى إضافي.
لخلق لوحة، إضافة data-role="panel" السمة إلى <div> العنصر وتحديد id .
إضافة أي ترميز HTML داخل هذا <div> الذي تريد عرضه في لوحة الخاص بك:
<div data-role="panel" id="myPanel" >
<h2>Panel Header..</h2>
<p>Some text..</p>
</div>ملاحظة: يجب وضع العلامات لوحة قبل أو بعد رأس، والمحتوى وتذييل داخل صفحة مسج موبايل.
للوصول إلى لوحة، وخلق ارتباط يشير إلى id من لوحة <div> . عندما ينقر المستخدم على الوصلة، وفتح لوحة:
<a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>هنا هو لوحة مثال بسيط:
مثال
<div data-role="page" id="pageone">
<div
data-role="panel" id="myPanel" >
<h2>Panel Header..</h2>
<p>Some
text in the panel..</p>
</div>
<div
data-role="header">
<h1>Standard Page Header</h1>
</div>
<div data-role="main" class="ui-content">
<p>Click on the button below to open the Panel.</p>
<a
href="#myPanel" class="ui-btn ui-btn-inline">Open
Panel</a>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div> انها محاولة لنفسك » لوحات إغلاق
يمكنك إغلاق لوحة عن طريق النقر خارجه، عن طريق تمرير أو عن طريق الضغط على Esc المفتاح. يمكنك تعطيل النقر وميزات الضرب بإضافة إضافية data-* سمات إلى لوحة <div> :
| السمة | القيمة | وصف | مثال |
|---|---|---|---|
| data-dismissible | true | false | يحدد ما إذا كانت لوحة يمكن أن تكون مغلقة عن طريق النقر خارج منه، أم لا | جربها |
| data-swipe-close | true | false | تحديد ما إذا كان لوحة يمكن أن تكون مغلقة عن طريق تمرير، أو لا | جربها |
يمكنك أيضا إغلاق لوحة باستخدام زر: مجرد إضافة وصلة داخل لوحة <div> مع data-rel="close" السمة المرتبطة به. وذلك لأسباب التوافق، يجب عليك أيضا تحديد href السمة للإشارة إلى معرف الصفحة يجب على المستخدم الذهاب الى عند إغلاق لوحة:
مثال
<div
data-role="panel" id="myPanel">
<h2>Panel Header..</h2>
<p>Some
text in the panel..</p>
<a
href="#pageone" data-rel="close" class="ui-btn ui-btn-inline">Close Panel</a>
</div> انها محاولة لنفسك » عرض لوحة
يمكنك التحكم في طريقة عرض لوحة مع سمة للعرض البيانات:
| السمة القيمة | وصف |
|---|---|
| data-display="overlay" | يعرض لوحة على محتوى |
| data-display="push" | ينعش كل من لوحة والصفحة في نفس الوقت |
| data-display="reveal" | افتراضي. فإن لوحة الجلوس تحت الصفحة وتكشف كصفحة الشرائح بعيدا |
مثال
<div data-role="panel" id="overlayPanel" data-display="overlay" >
<div
data-role="panel" id="revealPanel" data-display="reveal" >
<div
data-role="panel" id="pushPanel" data-display="push" > انها محاولة لنفسك » لوحات تحديد المواقع
افتراضيا، ستظهر لوحات على الجانب الأيسر من الشاشة. لوحة لتظهر على الجانب الأيمن من الشاشة، وتحديد data-position="right" سمة.
يمكنك أيضا تحديد كيف ينبغي وضع محتوى لوحة وفقا لبقية الصفحة عندما يبدأ مستخدم للتمرير. افتراضيا، فإن لوحة التمرير مع الصفحة (ولكن محتوى اللوحة سوف البقاء على رأس الصفحة). إذا كنت تريد دائما لعرض محتويات لوحة، بغض النظر عن مدى كنت تمرير الصفحة، إضافة data-position-fixed="true" السمة إلى لوحة: