جی کوئری موبایل-پاپ آپ

پاپ آپ ها(popup) مشابه گفتگو ها(dialog) هستند. و هر دو قسمت هایی از یک صفحه را پوشش می دهند. یک پاپ آپ زمانی به کار می رود که شما بخواهید متن و عکس و نقشه و یا دیگر محتوای کوچکی را نمایش دهید.

برای ایجاد یک پاپ آپ ابتدا یک عنصر <a> بسازید و سپس یک عنصر <div> را اضافه نمایید. حالا خصوصیت "data-rel="popup را به عنصر <a> اضافه کنید و خصوصیت "data-role="popup را به <div> اضافه کنید. حالا برای عنصر <div> یک id تعریف کنید و مقدار href از عنصر <a> را برابر با id مشخص شده ی عنصر <div> قرار دهید. حالا هنگامی که کاربر بر روی لینک مورد نظر کلیک کند، محتوای درون عنصر <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>

خودتان امتحان کنید »

اگر شما می خواهید که یک padding و margin ویژه به جعبه ی پاپ آپ خود اضافه کنید، کافی است کلاس "ui-content" را به <div> اضافه کنید:

مثال

خودتان امتحان کنید »

بستن پاپ آپ ها

به طور پیش فرض، با کلیک کردن در بیرون از جعبه ی پاپ آپ و یا فشار دادن کلیک "Esc" پاپ آپ باز شده، بسته می شود. اگر نمی خواهید که با کلیک در بیرون از جعبه ی پاپ آپ، عمل بسته شدن پاپ آپ صورت بگیرد، می توانید از خصوصیت "data-dismissible="false در درون پاپ آپ استفاده کنید(خیلی توصیه نمی شود). شما همچنین می توانید یک دکمه ی بسته شدن را به پاپ آپ مورد نظر اضافه کنید که در سمت چپ یا راست قرار بگیرد. برای انجام این کار، در درون ظرف(container) پاپ آپ یک دکمه ی لینک با خصوصیت "data-rel="back اضافه کنید و این دکمه را به وسیله ی کلاس های css مکان گذاری کنید.

توضیحات	مثال
دکمه ی بستن در سمت راست	امتحان کنید
دکمه ی بستن در سمت چپ	امتحان کنید
بستن فقط با کلیک بر روی دکمه	امتحان کنید

مکان گذاری پاپ آپ ها

به طور پیش فرض، پاپ آپ ها مستقیما روی مکان کلیک شده نمایش می یابند. برای کنترل کردن مکان پاپ آپ، خصوصیت data-position-to را در لینکی که از آن برای باز کردن پاپ آپ استفاده می کنید، بکار ببرید.

سه راه برای مکان گذاری پاپ آپ ها وجود دارد:

مقدار خصوصیت	توضیحات
"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>

خودتان امتحان کنید »

انتقال ها(transitions)

به طور پیش فرض، پاپ آپ ها هیچ افکت انتقالی ندارند. شما می توانید از تمام افکت های انتقالی که در فصل "انتقال ها" آموزش دادیم در پاپ آپ ها استفاده کنید. تنها کافی است خصوصیت "data-transition="value را به لینکی که پاپ آپ را باز می کند، اضافه نمایید:

یک نسخه ی نمایشی از تمام افکت های انتقالی امکان پذیر

خودتان امتحان کنید »

پیکان ها در پاپ آپ

برای اضافه کردن یک پیکان به کادر پاپ آپ، از خصوصیت data-arrow استفاده کنید و آن را برابر با یکی از موارد روبه رو قرار دهید: "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>

خودتان امتحان کنید »

گفتگوها در پاپ آپ

شما می توانید در درون یک پاپ آپ از گفتگوها(dialog) استفاده کنید( دارای header و محتوا و footer):

مثال

<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>

خودتان امتحان کنید »

عکس های پاپ آپ

شما همچنین می توانید عکس ها را در یک پاپ آپ نمایش دهید:

مثال

خودتان امتحان کنید »

نکته: هنگامی که شما یک مجموعه ی کامل از عکس ها را می خواهید نمایش دهید، پاپ آپ ها ایده آل نیستند( به عنوان مثال یک آلبوم دارای 500 عکس). اما اگر می خواهید یک جفت عکس را به صورت بزرگتر نمایش دهید، پاپ آپ ها جذاب هستند.

پوشش پاپ آپ ها

شما می توانید با استفاده از خصوصیت data-overlay-theme رنگ پس زمینه ی کناره های پاپ آپ را کنترل کنید(منظور رنگ صفحه است به هنگامی که بر روی پاپ آپ کلیک می شود).

به طور پیش فرض، رنگ پوششی، محو می باشد(transparent). برای اضافه کردن یک رنگ پوششی روشن از "data-overlay-theme="a و برای اضافه کردن یک رنگ پوششی تیره، از "data-overlay-theme="b استفاده نمایید:

مثال

<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>

خودتان امتحان کنید »

افکت پوششی اغلب در عکس های پاپ آپ استفاده می شود: