آموزش jQuery Mobile > مقدمه آموزش jQuery Mobile
آموزش طراحی صفحات ( Pages ) در jQuery Mobile
مقدمه طراحی صفحات در jQuery Mobile:
نحوه طراحی صفحات در jQuery Mobile را با ارایه یک مثال عملی و سپس تشریح آن آموزش
می دهیم . به کد زیر دقت کنید ، سپس نکات آن را آموزش خواهیم داد :
|
کد
|
<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>
|
|
خروجی
|
مشاهده خروجی مثال
|
توضیح کد مثال :
- تگ <div> با خاصیت " data-role = " pages ، قسمت اصلی صفحه و محدوده آن
را تعیین می کند . سایر محتویات بایستی درون این تگ قرار بگیرند .
- تگ <div> با خاصیت" data-role = " header ، یک هدر یا سر عنوان را در بالای
صفحه ایجاد می کند که از آن معمولا برای قرار دادن دکمه های اصلی ، عنوان یا دکمه جستجو
استفاده می شود .
- تگ <div> با خاصیت" data-role = " main ، بدنه اصلی صفحه را مشخص کرده و
محتویات اصلی آن ( مثل متن ها ، دکمه ها ، فرم ها و ... ) درون آن قرار می گیرند .
- در تگ <div> با خاصیت " data-role = " main ، یک class با عنوان " ui-content
" قرار داده ایم که حاشیه و فواصل دور صفحه را تعیین می کند .
- تگ <div> با خاصیت " data-role = " footer ، یک فوتر یا قسمت پایینی را
برای صفحه ایجاد می کند .
نکته 1 : درون تمامی این تگ ها ، می توانید انواع تگ ها و محتویات مثل پاراگراف
ها ، عکس ها ، عنوان ها و ... را قرار دهید .
طراحی چند صفحه با هم در jQuery Mobile :
در jQuery Mobile می توانید چندین صفحه را در یک
فایل HTML ایجاد کنید . هر صفحه بایستی توسط یک تگ <div> مستقل و با
خاصیت " data-role = " page و id منحصر به فرد تعریف شود .
همانند کد زیر دو صفحه را در فایل HTML ایجاد کرده و سپس توسط خاصیت 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>
|
استفاده از صفحات به عنوان کادرهای نمایش هشدار یا متن ( Dialog Box ) :
یک Dialog Box ، نوعی از پنجره است که برای نمایش اطلاعاتی خاص یا دریافت ورودی از
کاربر ، به وی نشان داده می شود .
برای باز شدن یک صفحه به صورت پنجره متحرک ( Dialog Box ) ، در زمانی که کاربر بر روی
لینک صفحه کلیک می کند ، همانند کد زیر ، بایستی مقدار خاصیت " data-dialog =
" true را قرار دهید . به مثال زیر توجه کنید :
|
کد
|
// کد صفحه اول
<div data-role="page" id="pageone">
<div data-role="header">
<h1>صفحه
خانه</h1>
</div>
<div data-role="main" class="ui-content">
<p> خوش
آمدید </p>
<a href="#pagetwo">به
صفحه دیالوگ باکس بروید</a>
</div>
<div data-role="footer">
<h1> متن پا صفحه
</h1>
</div>
</div>
// کد دیالوگ باکس
<div data-role="page" data-dialog="true"
id="pagetwo">
<div
data-role="header">
<h1>
این یک دیالوگ باکس است </h1>
</div>
<div data-role="main" class="ui-content">
<p>
یک دیالوگ باکس ، نوعی از پنجره است که برای نمایش اطلاعاتی خاص یا دریافت ورودی از
کاربر ، به وی نشان داده می شود </p>
<a href="#pageone">بازگشت
به صفحه اول</a>
</div>
<div data-role="footer">
<h1>پا
صفحه دیالوگ باکس</h1>
</div>
</div>
|
|
خروجی
|
مشاهده خروجی مثال
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :