با jQuery Mobile یک وب سایت موبایل ایجاد کنید

محتوا

• چگونه چندین صفحه را در یک فایل HTML رمزگذاری کنیم
• شرح
• نحوه استفاده از کادرهای گفتگو و انتقال
• انتقالاتی که می توانند استفاده شوند
• شرح
• نحوه ایجاد دکمه ها
• شرح
• نحوه ایجاد نوار پیمایش
• نحوه کدگذاری HTML برای یک نوار پیمایش:
• نحوه قالب بندی محتوا با jQuery Mobile
• سبک های پیش فرضی که jQuery Mobile استفاده می کند
• شرح
• نحوه استفاده از مضامین بر روی عناصر HTML
• دو روش برای استفاده از یک موضوع:
• شرح
• چشم انداز

این یک گزیده ویرایش شده از فصل 15 است Murach’s HTML5 و CSS3 توسط زاک رووالکابا و آن بوهم.

jQuery Mobile یک کتابخانه جاوا اسکریپت متفرقه ، منبع باز و رایگان است که می توانید از آن برای توسعه وب سایت های موبایل استفاده کنید. این کتابخانه به شما امکان می دهد صفحاتی را ایجاد کنید که مانند صفحه های یک برنامه تلفن همراه بومی و ظاهری هستند.

اگرچه jQuery Mobile در حال حاضر به عنوان یک نسخه آزمایشی بتا در دسترس است ، این نسخه در حال حاضر تمام ویژگی های مورد نیاز شما را برای ایجاد یک وب سایت عالی تلفن همراه فراهم می کند. در نتیجه می توانید بلافاصله از آن استفاده کنید. همچنین می توانید انتظار داشته باشید که این نسخه به طور مداوم ارتقا یابد ، بنابراین jQuery Mobile فقط بهتر خواهد شد.

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

چگونه چندین صفحه را در یک فایل HTML رمزگذاری کنیم

بر خلاف روش توسعه صفحات وب برای یک وب سایت صفحه نمایش ، jQuery Mobile به شما امکان می دهد چندین صفحه را در یک فایل HTML ایجاد کنید. این را با شکل 15-7 نشان می دهد. در اینجا می توانید دو صفحه از یک سایت به همراه HTML برای این صفحات را مشاهده کنید. آنچه تعجب آور است این است که هر دو صفحه در یک فایل HTML رمزگذاری شده اند.

برای هر صفحه ، شما یک عنصر div را با عنوان "page" به عنوان مقدار ویژگی data-role کد می کنید. سپس ، در داخل هر یک از عناصر div ، عناصر div را برای عنوان ، محتوا و پاورقی هر صفحه کد می کنید. بعداً ، هنگامی که فایل HTML بارگیری می شود ، اولین صفحه در متن پرونده نمایش داده می شود.

برای پیوند دادن بین صفحات موجود در پرونده HTML ، از متغیرهایی استفاده می کنید که در شکل 7-11 از فصل 7 نشان داده شده است. به عنوان مثال ، عنصر a> در صفحه اول در این مثال با ضربه زدن کاربر به "#toobin" h2 یا عنصر img که به عنوان محتوای این لینک کدگذاری شده است. این به عنصر div با "toobin" به عنوان ویژگی id اشاره دارد ، این بدان معنی است که با ضربه زدن روی پیوند خواننده به صفحه دوم پرونده منتقل می شود.

اگرچه این مثال فقط دو صفحه را نشان می دهد ، شما می توانید بسیاری از صفحات را در یک فایل HTML کدگذاری کنید. به یاد داشته باشید که همه صفحات همراه با تصاویر ، جاوا اسکریپت و پرونده های CSS با یک فایل HTML بارگذاری می شوند. در نتیجه ، اگر صفحات زیادی را در یک پرونده ذخیره کنید ، زمان بارگیری بیش از حد خواهد شد. وقتی این اتفاق می افتد ، می توانید صفحات خود را به بیش از یک فایل HTML تقسیم کنید.

HTML برای دو صفحه در متن یک فایل HTML:

div data-role = "page"> سرصفحه data-role = "header"> h1> SJV Town Hall / h1> / header> بخش data-role = "content"> h3> سخنرانان 2011-2012 / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> 19 اکتبر 2011 / h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>! - عناصر باقی مانده از بلندگوها - -> / section> footer data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "page" id = "toobin"> سرآیند data-role = "header"> h1> SJV Town Hall / h1> / header> section data-role = "content"> h3> The Supreme Nine: br> Black Robed Secrets / h3> img src = "images / toobin_court.cnn.webp" alt = "Jeffrey Toobin "> p> نویسنده پرفروش ترین فروش تحسین شده ، i> The Nine:! - کپی ادامه دارد -> / بخش> footer data-role =" footer "> h4> © 2011 / h4> / footer> / div>

شرح

• هنگامی که از jQuery Mobile استفاده می کنید ، لازم نیست برای هر صفحه یک فایل HTML جداگانه تهیه کنید. درعوض ، در داخل عنصر بدنه یک فایل HTML ، شما برای هر صفحه یک عنصر div را کد می کنید که ویژگی داده-نقش آن روی "صفحه" تنظیم شده است.
• برای هر عنصر div ، مشخصه id را روی یک مقدار مکان نگهدار تنظیم می کنید که با ویژگی های href در عناصر a> صفحات دیگر قابل دسترسی است.

نحوه استفاده از کادرهای گفتگو و انتقال

شکل 15-8 نحوه ایجاد یک جعبه محاوره ای را نشان می دهد که با ضربه زدن روی پیوند باز می شود. برای انجام این کار ، کادر محاوره را دقیقاً مانند هر صفحه کدگذاری می کنید. اما در عنصر a> که به آن صفحه می رود ، شما یک ویژگی data-rel را با عنوان "dia-log" به عنوان مقدار آن کد می کنید.

همانطور که نمونه های این شکل نشان می دهد ، پرونده jQuery Mobile CSS قالب جعبه محاوره ای متفاوت از یک صفحه وب معمولی را دارد. به طور پیش فرض ، یک کادر محاوره ای دارای یک پس زمینه تیره با متن پیش زمینه سفید است ، و هدر و پاورقی به عرض صفحه نمی رسد. یک جعبه گفتگو همچنین دارای یک "X" در هدر است که کاربر باید برای بازگشت به صفحه قبلی روی آن ضربه بزند.

وقتی یک عنصر a> را وارد می کنید که به صفحه یا جعبه گفتگوی دیگری می رود ، می توانید از ویژگی data-transfer برای تعیین یکی از شش انتقال خلاصه شده در جدول در این شکل استفاده کنید. هر یک از این انتقال ها به منظور تقلید از تأثیری است که دستگاه تلفن همراه مانند آیفون از آن استفاده می کند.

انتقالاتی که می توانند استفاده شوند

HTML که صفحه را به عنوان جعبه محاوره ای با انتقال "pop" باز می کند:

a href = "# toobin" data-rel = "گفتگوی" data-transfer = "pop">

HTML که صفحه را با انتقال "محو" باز می کند:

a href = "# toobin" data-transfer = "fade">

شرح

• HTML برای یک کادر محاوره ای با کدگذاری هر صفحه کدگذاری می شود. با این حال ، عنصر a> که به صفحه پیوند دارد شامل ویژگی data-rel با مقدار "dialog" است. برای بستن کادر گفتگو ، کاربر X را در عنوان کادر لمس می کند.
• برای تعیین نحوه باز شدن یک صفحه یا جعبه گفتگو ، می توانید از ویژگی data-transfer با یکی از مقادیر جدول بالا استفاده کنید. اگر دستگاهی از انتقال مورد نظر شما پشتیبانی نكند ، این ویژگی نادیده گرفته می شود.
• یک ظاهر طراحی شده برای یک جعبه محاوره ای توسط فایل jQuery Mobile CSS انجام می شود.

نحوه ایجاد دکمه ها

شکل 15-9 نحوه استفاده از دکمه ها برای پیمایش از یک صفحه به صفحه دیگر را نشان می دهد. برای این کار ، شما فقط ویژگی data-role را برای یک عنصر a> به "دکمه" تنظیم می کنید ، و jQuery Mobile بقیه کارها را انجام می دهد.
با این حال ، می توانید برخی از ویژگی های دیگر را نیز برای دکمه ها تنظیم کنید. اگر به عنوان مثال ، می خواهید دو یا چند دکمه در کنار هم ظاهر شوند ، مانند دو دکمه اول در این شکل ، می توانید ویژگی data-inline را روی "true" تنظیم کنید.

اگر می خواهید یکی از 18 نمادی را که توسط jQuery Mobile ارائه شده اند به یک دکمه اضافه کنید ، همچنین ویژگی data-icon را کد می کنید. به عنوان مثال ، دکمه سوم در این مثال از نماد "حذف" و دکمه چهارم از نماد "خانه" استفاده می کند. همه این نمادها مانند آیکون هایی هستند که ممکن است در یک برنامه تلفن همراه بومی مشاهده کنید. اتفاقاً این آیکون ها پرونده های جداگانه ای نیستند که صفحه باید به آنها دسترسی داشته باشد. در عوض ، آنها توسط کتابخانه jQuery Mobile ارائه می شوند.

اگر می خواهید دو یا چند دکمه را به صورت افقی گروه بندی کنید ، مانند دکمه های بله ، خیر ، و شاید در این شکل ، می توانید عناصر a> را برای دکمه ها در یک عنصر div که "گروه کنترل" به عنوان ویژگی نقش داده خود کد کنید و "افقی" به عنوان ویژگی نوع داده آن. یا ، برای گروه بندی عمودی دکمه ها ، می توانید ویژگی نوع داده را به "عمودی" تغییر دهید.

اگر ویژگی data-rel را برای یک دکمه روی "برگشت" و ویژگی href را به نماد پوند (#) تنظیم کنید ، دکمه به صفحه ای که آن را فراخوانده است برمی گردد. به عبارت دیگر ، دکمه مانند دکمه برگشت کار می کند. این آخرین دکمه در محتوای صفحه است.

دو دکمه آخر نحوه نمایش دکمه ها در صفحه صفحه را نشان می دهد. در اینجا ، نمادها و متن ها در یک زمینه سیاه سفید هستند. در این حالت ، ویژگی کلاس برای پاورقی روی "ui-bar" تنظیم شده است ، که به jQuery Mobile می گوید که باید کمی بیشتر فضای اطراف محتوای پاورقی را بگذارد. در این مورد در شکل 15-12 بیشتر خواهید آموخت.

HTML برای دکمه های موجود در بخش:

! - برای دکمه های درون خطی ، صفت data-line را روی true تنظیم کنید -> a href = "#" data-role = "button" data-inline = "true"> لغو / a> a href = "#" داده -role = "button" data-inline = "true"> OK / a>! - برای افزودن نماد به یک دکمه ، از ویژگی data-icon استفاده کنید -> دکمه href = "#" data-role = " "data-icon =" delete "> Delete / a> a href =" # "data-role =" button "data-icon =" home "> Home / a>! - برای گروه بندی دکمه ها ، از یک عنصر div با استفاده از ویژگی هایی که دنبال می شوند -> div data-role = "controlgroup" data-type = "horizontal"> a href = "#" data-role = "button" data-icon = "check"> Yes / a> a href = "#" data-role = "button" data-icon = "arrow-d"> خیر / a> a href = "#" data-role = "دکمه"> شاید / a> / div>! - به یک دکمه برگشت را کد کنید ، ویژگی data-rel را به عقب تنظیم کنید -> a href = "#" data-role = "button" dat-rel = "back" data-icon = "back"> بازگشت به صفحه قبلی / a >

HTML دکمه های موجود در پاورقی:

footer data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> افزودن به Facebook / a> a href = "http: //www.twitter.com "data-role =" button "data-icon =" plus "> این صفحه را توییت کنید / a> / footer>

شرح

• برای افزودن یک دکمه به یک صفحه وب ، شما یک عنصر a> را کد می کنید که ویژگی داده نقش آن روی "دکمه" تنظیم شده است.

نحوه ایجاد نوار پیمایش

شکل 15-10 نشان می دهد که چگونه می توانید یک نوار پیمایش به یک صفحه وب اضافه کنید. برای انجام این کار ، شما یک عنصر div را کد می کنید که نقش داده آن روی "navbar" تنظیم شده است. در این عنصر ، شما یک عنصر ul را کدگذاری می کنید که شامل عناصر li است که شامل عناصر a> برای موارد موجود در نوار پیمایش است. اما توجه داشته باشید که شما ویژگی data-role را برای عناصر a> کدگذاری نمی کنید.

برای تغییر رنگ موارد در نوار پیمایش ، کد موجود در این مثال شامل ویژگی data-theme-b برای هر مورد است. در نتیجه ، jQuery Mobile رنگ پس زمینه هر مورد را از سیاه ، که پیش فرض است ، به آبی جذاب تغییر می دهد. علاوه بر این ، این کد ویژگی کلاس را برای دکمه فعال به "ui-btn-active" تنظیم می کند بنابراین jQuery Mobile رنگ دکمه فعال را به آبی روشن تر تغییر می دهد. این نشان می دهد که چگونه می توانید قالب بندی مورد استفاده jQuery Mobile را تغییر دهید و در ادامه اطلاعات بیشتری درباره آن خواهید گرفت.

HTML برای نوار پیمایش:

header data-role = "header"> h1> SJV Town Hall / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-theme = "b "> صفحه اصلی / a> / li> li> a href =" # بلندگو "data-icon =" star "data-theme =" b "> بلندگوها / a> / li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> تماس با ما / a> / li> / ul> / div> / header>

نحوه کدگذاری HTML برای یک نوار پیمایش:

• یک عنصر div را در عنصر هدر کد کنید. سپس ، ویژگی data-role را برای عنصر div به "navbar" تنظیم کنید.
• درون عنصر div ، یک عنصر ul را کدگذاری کنید که شامل یک عنصر li برای هر پیوند است.
• در داخل هر عنصر li ، یک عنصر a> را با یک ویژگی href کدگذاری کنید که از یک مکان نگهدار برای صفحه ای که پیوند باید به آن برود استفاده می کند. سپس ، ویژگی data-icon را روی نماد مورد نظر خود تنظیم کنید.
• برای مورد فعال در نوار پیمایش ، ویژگی کلاس را روی "ui-btn-active" تنظیم کنید.سپس ، رنگ این مورد نسبت به سایر موارد موجود در نوار پیمایش سبک تر خواهد بود.
• همچنین باید از ویژگی data-theme استفاده کنید تا یک تم jQuery Mobile برای هر مورد در نوار پیمایش اعمال کند. در غیر این صورت ، دکمه های موجود در نوار همان رنگ باقی سربرگ خواهد بود. برای کسب اطلاعات بیشتر در مورد استفاده از مضامین ، به شکل 15-12 مراجعه کنید.

نحوه قالب بندی محتوا با jQuery Mobile

همانطور که قبلاً مشاهده کرده اید ، jQuery Mobile به طور خودکار اجزای یک صفحه وب را بر اساس سبک صفحه خود قالب بندی می کند. اکنون ، در مورد آن و همچنین نحوه تنظیم یک ظاهر طراحی پیش فرض که jQuery Mobile استفاده می کند ، بیشتر خواهید آموخت.

سبک های پیش فرضی که jQuery Mobile استفاده می کند

شکل 15-13 سبک های پیش فرض را نشان می دهد که jQuery Mobile برای عناصر مشترک HTML استفاده می کند. jQuery Mobile با تمام سبک های خود به موتور رندر مرورگر متکی است بنابراین سبک ظاهری آن حداقل است. این زمان بارگذاری را سریع حفظ می کند و سربار اضافی CSS را که به صفحه تحمیل می کند به حداقل می رساند.

همانطور که مشاهده می کنید ، سبک سازی jQuery Mobile به قدری موثر است که نیازی به تغییر سبک آن با تهیه شیوه نامه CSS خود ندارید. به عنوان مثال ، فاصله بین موارد موجود در لیست غیر مرتب شده و قالب بندی جدول هر دو به همان شکلی که هستند قابل قبول هستند. همچنین ، نوع سیاه در پس زمینه خاکستری با قالب بندی برای برنامه های تلفن همراه بومی سازگار است.

شرح

• به طور پیش فرض ، jQuery Mobile به طور خودکار سبک ها را به عناصر HTML برای یک صفحه اعمال می کند. این سبک ها نه تنها جذاب هستند ، بلکه از سبک های بومی مرورگر نیز تقلید می کنند.
• به طور پیش فرض ، jQuery Mobile مقدار کمی padding را در سمت چپ ، راست ، بالا و پایین هر صفحه تلفن همراه اعمال می کند.
• به طور پیش فرض ، پیوندها کمی بزرگتر از متن معمولی هستند. این کار باعث می شود کاربر به راحتی بتواند روی پیوندها ضربه بزند.
• به طور پیش فرض ، لینک ها با رنگ آبی به عنوان رنگ قلم زیر خط دار شده اند.

نحوه استفاده از مضامین بر روی عناصر HTML

در بعضی موارد ، شما می خواهید سبک های پیش فرضی را که jQuery Mobile استفاده می کند تغییر دهید. قبلاً آن را در نوار پیمایش شکل 15-10 مشاهده کرده اید. برای تغییر سبک های پیش فرض ، می توانید از پنج موضوعی که jQuery Mobile ارائه می دهد استفاده کنید. این موارد در شکل 15-12 خلاصه شده است. در اینجا دوباره ، این مضامین برای تقلید از ظاهر یک برنامه تلفن همراه بومی است.

یکی از راه های استفاده از تم ها کدگذاری یک صفت data-theme با حرف حرف به عنوان مقدار آن است. این را در نوار پیمایش در شکل 15-10 مشاهده کردید و این را می توانید در کد نوار پیمایش دوم در این شکل مشاهده کنید. در اینجا ، ویژگی data-theme موضوع "e" را برای عنوان و عنوان "d" را برای موارد موجود در نوار پیمایش اعمال می کند.

روش دیگر برای اعمال مضامین ، تنظیم ویژگی کلاس برای یک عنصر بر روی نام کلاس است که یک موضوع را نشان می دهد. این با اولین مثال بعد از جدول نشان داده شده است. در اینجا ، از ویژگی کلاس برای اعمال هر دو کلاس "ui-bar" و "ui-bar-b" بر روی عنصر div استفاده می شود. در نتیجه ، جی کوئری موبایل ابتدا یک شکل دهی پیش فرض خود را برای یک میله به عنصر اعمال می کند و سپس موضوع b را برای آن یک ظاهر طراحی می کند. در صفحات بعدی ، نمونه های دیگری از این نوع یک ظاهر طراحی را مشاهده خواهید کرد.

لطفا توجه داشته باشید که در جدول این شکل آمده است که از تم e کم استفاده شود. دلیلش این است که از رنگ نارنجی استفاده می کند که برای لهجه زدن یک مورد درست است ، اما در دوزهای بزرگ جذاب نیست. این را سربرگ و نوار پیمایش دوم در این شکل نشان می دهد ، که وقتی رنگ آن را مشاهده می کنید ناخوشایند است.

به طور کلی ، بهتر است با سبک های پیش فرض و سه مضمون اول که معمولاً به خوبی با هم کار می کنند ، همراه باشید. سپس ، وقتی فکر می کنید به چیز دیگری احتیاج دارید ، می توانید مضامین d و e را تجربه کنید.

HTML برای هدر دوم و نوار پیمایش:

header data-role = "header" data-theme = "e"> h1> SJV Town Hall / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home "data-theme =" d "> صفحه اصلی / a> / li> li> a href =" # بلندگو "data-icon =" star "data-theme =" d "> بلندگوها / a> / li> li> a href = "# news" id = "news" data-icon = "grid" data-theme = "d"> News / a> / li> / ul> / div> / header>

پنج تم jQuery Mobile:

دو روش برای استفاده از یک موضوع:

با استفاده از ویژگی data-theme:

li> a href = "# home" data-icon = "home" data-theme = "b"> صفحه اصلی / a> / li>

با استفاده از یک ویژگی کلاس که موضوع را نشان می دهد:

div> Bar / div>

شرح

• با استفاده از پنج تمی که با jQuery Mobile گنجانده شده است ، می توانید سبک های پیش فرض را برای عناصر HTML تنظیمات مناسبی انجام دهید.
• اگرچه می توانید از شیوه نامه CSS خود با یک برنامه jQuery Mobile استفاده کنید ، اما باید از انجام آن در هر زمان ممکن خودداری کنید.

چشم انداز

استفاده از دستگاه های تلفن همراه طی چند سال گذشته به طرز چشمگیری افزایش یافته است. به همین دلیل ، طراحی وب سایتهایی که استفاده از آنها آسان است از اهمیت بیشتری برخوردار می شوند. اگرچه این معمولاً به معنای ایجاد یک وب سایت جداگانه است ، این می تواند جنبه مهمی برای حفظ حضور شما در اینترنت باشد.

خوشبختانه ، کار با ایجاد jQuery Mobile کار ساخت یک وب سایت تلفن همراه بسیار آسان شده است. دیگر صفحات وب تلفن همراه محدود به صفحات ایستا نیستند که حاوی عناوین ، پاراگراف ها ، پیوندها و تصاویر کوچک هستند. با jQuery Mobile ، توسعه دهندگان وب می توانند وب سایت های غنی از ویژگی ایجاد کنند که مانند برنامه های تلفن همراه بومی به نظر می رسند.