تخفیف ویژه هفته کتاب و کتاب خوانی، فرصت یادگیری با 40٪ تخفیف (کد تخفیف: Ketab)
زمان باقی مانده
سبد (0)

تبلیغات

جی کوئری موبایل-صفحات

ایجاد یک صفحه

Note

با اینکه جی کوئری موبایل، در تمام دستگاه های موبایل کار می کند، ممکن است بر روی کامپیوترهای رو میزی دارای مشکلاتی باشد(به دلیل محدودویت در پشتیبانی CSS3).

برای اینکه تجربه ی خواندن بهتری داشته باشیم، ما توصیه می کنیم که شما از مرورگر گوگل کروم در این آموزش ها استفاده کنید.

در زیر، ما یک صفحه ی ساده و استاندارد جی کوئری موبایل را ایجاد کرده ایم:

مثال

<body>
<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 را اضافه کنید. مانند: پاراگراف ها، عکس ها، سرفصل ها، لیست ها و ... .
Note

از خصوصیات *-data که مربوط به HTML5 می شوند، در سراسر جی کوئری موبایل استفاده شده است تا برای دستگاه های موبایل، جذابیت و قابلیت لمسی بودن به ارمغان بیاید. 


اضافه کردن صفحات در جی کوئری موبایل

در جی کوئری موبایل شما می توانید صفحات چندگانه را در یک فایل HTML ایجاد کنید. 

هر صفحه را به وسیله ی یک id یکتا از دیگر صفحات جدا کنید و سپس از خصوصیت href استفاده کنید تا صفحات را به یکدیگر لینک کنید. 

مثال

<div data-role="page" id="pageone">
  <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="page" id="pageone">
  <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>
خودتان امتحان کنید »
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی