جی کوئری موبایل-صفحات
ایجاد یک صفحه
 |
با اینکه جی کوئری موبایل، در تمام دستگاه های موبایل کار می کند، ممکن است بر روی کامپیوترهای رو میزی دارای مشکلاتی باشد(به دلیل محدودویت در پشتیبانی CSS3). برای اینکه تجربه ی خواندن بهتری داشته باشیم، ما توصیه می کنیم که شما از مرورگر گوگل کروم در این آموزش ها استفاده کنید. |
|---|
در زیر، ما یک صفحه ی ساده و استاندارد جی کوئری موبایل را ایجاد کرده ایم:
مثال
<div data-role="page">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
<p>I Am Now A Mobile Developer!!</p>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
توضیح مثال:
- عبارت "data-role="page صفحه ای را مشخص می کند که در مرورگر به نمایش گذاشته شده است.
- عبارت "data-role="header یک نوار ابزار را در بالای صفحه ی مورد نظر ایجاد می کند(معمولا برای عنوان ها و دکمه های جستجو مورد استفاده قرار می گیرد).
- عبارت "data-role="main محتوای صفحه را مشخص می کند. این محتوا می تواند متن، عکس، دکمه، فرم و یا چیز دیگری باشد.
- کلاس "ui-content" درواقع padding و margin های اضافی را درون محتوای صفحه، اضافه می کند.
- عبارت "data-role="footer یک نوار ابزار را در پایین صفحه ی مورد نظر ایجاد می کند.
- درون این ظرف ها(container) شما می توانید هر نوع عنصر HTML را اضافه کنید. مانند: پاراگراف ها، عکس ها، سرفصل ها، لیست ها و ... .
|
از خصوصیات *-data که مربوط به HTML5 می شوند، در سراسر جی کوئری موبایل استفاده شده است تا برای دستگاه های موبایل، جذابیت و قابلیت لمسی بودن به ارمغان بیاید. |
|---|
اضافه کردن صفحات در جی کوئری موبایل
در جی کوئری موبایل شما می توانید صفحات چندگانه را در یک فایل HTML ایجاد کنید.
هر صفحه را به وسیله ی یک id یکتا از دیگر صفحات جدا کنید و سپس از خصوصیت href استفاده کنید تا صفحات را به یکدیگر لینک کنید.
مثال
<div data-role="main" class="ui-content">
<a href="#pagetwo">Go to Page Two</a>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="main" class="ui-content">
<a href="#pageone">Go to Page One</a>
</div>
</div>
نکته: زمان لود شدن، تحت تاثیر میزان محتوای اپلیکیشن های وب است(مانند متن و لینک و عکس ها و اسکریپت ها و ...). اگر نمی خواهید صفحات را بصورت داخلی، لینک کنید، از فایل های خارجی استفاده کنید:
کد
<a href="/externalfile.html">Go To External Page</a>
استفاده از صفحات برای گفتگو
یک جعبه ی گفتگو، یک پنجره است که از آن برای نمایش دادن اطلاعات خاصی، یا درخواست ورودی(داده) استفاده می شود.
برای ایجاد یک جعبه ی گفتگو که به هنگام لمس یک لینک باز می شود، عبارت "data-dialog="true را به صفحه ای که می خواهید بعنوان گفتگو نمایش داده شود، اضافه نمایید.
مثال
<div data-role="main" class="ui-content">
<a href="#pagetwo">Go to Page Two</a>
</div>
</div>
<div data-role="page" data-dialog="true" id="pagetwo">
<div data-role="main" class="ui-content">
<a href="#pageone">Go to Page One</a>
</div>
</div>
- نوشته شده توسط احسان عباسی
- بازدید: 5998
