گروه مقاله : جاوا اسكريپت Java Script
تاريخ انتشار : 1396/06/08 - 11:28
كد :7826
در این آموزش ما نحوه کد نویسی برای ایجاد صفحات در کتابخانه جی کوئری موبایل را آموزش می دهیم
ایجاد یک صفحه
در زیر یک صفحه جی کوئری موبایل را ایجاد کرده ایم:
مثال:
<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>
مشاهده نتیجه
نکته : این کد ها فقط در آخرین نسخه مرورگر Chrome قابل مشاهده می باشند.در مرورگرهای دیگر شما کد ها به اجرا گذاشته نشده و صرفه نمایش داده میشوند.
توضیح این مثال:
دستور data-role="page" صفحه ای را که در مرورگر به نمایش در میاید را مشخص می کنید.
دستور data-role="header" یک هدر در بالای سایت اضافه می کند که عنوان سایت و دکمه جستجو میتواند در این قسمت قرار بگیرد.
دستور data-role="main" محتوای صفحه را مشخص می کند ، مثلا عکس ها ، متن ها و فرم ها و غیره .
کلاس ui-content به محتوای صفحه padding و margin اضافه می کند.
دستور data-role="footer" پاصفحه سایت را اجرا می کند.
در داخل این کانتینرها، شما میتوانید از تگ های HTML هم استفاده کنید. تگ های برای افزودن متن ، عکس ، عنوان ، لیست و غیره .
صفت data-* در HTML5 برای دستور تاچ شدن در موبایل کاربرد دارد.
افزودن صفحه با کتابخانه jQuery Mobile
در کتابخانه جی کوئری موبایل شما میتوانید چندین صفحه در یک فایل 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>
مشاهده نتیجه
براي بهره مندي از مشاوره تخصصي در زمینه طراحی سایت در کرج با شرکت سارگون تماس بگيريد