موضوعات jQuery Mobile

موضوعات jQuery Mobile

jQuery Mobile فراهم‌کننده پنج نوع مختلف موضوع استایل است، از "a" تا "e" - هر موضوع دارای دکمه‌های، نوارها، بلوک‌های محتوایی با رنگ‌های مختلف و غیره می‌باشد. یکی از موضوعات jQuery Mobile از اثرات و رنگ‌های قابل مشاهده متعدد تشکیل شده است.

برای شخصی‌سازی ظاهر برنامه، از ویژگی data-theme استفاده کنید و یک حرف به آن اختصاص دهید:}}

<div data-role="page" data-theme="a|b|c|d|e">
مقدار توضیح مثال
a پیش‌فرض. نوشته سفید بر روی پس‌زمینه سیاه. آزمایش
b نوشته سفید بر روی پس‌زمینه آبی / نوشته سیاه بر روی پس‌زمینه خاکستری آزمایش
c نوشته سیاه بر روی پس‌زمینه خاکستری روشن آزمایش
d نوشته سیاه بر روی پس‌زمینه سفید آزمایش
e نوشته سیاه بر روی پس‌زمینه نارنجی آزمایش

توضیح:موضوع مورد علاقه خود را ترکیب کنید!

به طور پیش‌فرض، jQuery Mobile از موضوع "a" برای سربرگ و پایشانگل استفاده می‌کند، و از موضوع "c" برای محتوای سربرگ استفاده می‌کند (نخود سیاه). اما شما می‌توانید موضوعات را ترکیب کنید.

صفحه، محتوا و پایشانگل موضوعی

مثال

<div data-role="header" data-theme="b"></div>
<div data-role="content" data-theme="a"></div>
<div data-role="footer" data-theme="e"></div>

آزمایش کنید

صفحه صحبت موضوعی

مثال

<a href="#pagetwo" data-rel="dialog">برو به صفحه صحبت موضوعی</a>
<div data-role="page" id="pagetwo" data-overlay-theme="e">
  <div data-role="header" data-theme="b"></div>
  <div data-role="content" data-theme="a"></div>
  <div data-role="footer" data-theme="c"></div>
</div>

آزمایش کنید

کامپوننت‌های موضوعی

مثال

<a href="#" data-role="button" data-theme="a">Button</a>
<a href="#" data-role="button" data-theme="b">Button</a>
<a href="#" data-role="button" data-theme="c">Button</a>

آزمایش کنید

آیکون‌های موضوعی

مثال

<a href="#" data-role="button" data-icon="plus" data-theme="e">Plus</a>

آزمایش کنید

سربرگ و پایشانگل‌های موضوعی

مثال

<div data-role="header">
  <a href="#" data-role="button" data-icon="home" data-theme="b">خانه</a>
  <h1>به صفحه اصلی من خوش آمدید</h1>
  <a href="#" data-role="button" data-icon="search" data-theme="e">جستجو</a>
</div>
<div data-role="footer">
  <a href="#" data-role="button" data-theme="b" data-icon="plus">دکمه 1</a>
  <a href="#" data-role="button" data-theme="c" data-icon="plus">دکمه 2</a>
  <a href="#" data-role="button" data-theme="e" data-icon="plus">دکمه 3</a>
</div>

آزمایش کنید

نواری موضوع‌بندی شده

مثال

<div data-role="footer" data-theme="e">
  <h1>متن پایش را اینجا وارد کنید</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="b">دکمه 1</a></li>
      <li><a href="#" data-icon="arrow-r">دکمه 2</a></li>
      <li><a href="#" data-icon="arrow-r">دکمه 3</a></li>
      <li><a href="#" data-icon="search" data-theme="a" >دکمه 4</a></li>
    </ul>
  </div> 
</div>

آزمایش کنید

دکمه‌ها و محتوای قابل فروپاشی موضوع‌بندی شده

مثال

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <h1>روی من کلیک کنید - من قابل فروپاشی هستم!</h1>
  <p>من محتوای گسترش‌یافته هستم.</p>
</div>

آزمایش کنید

لیست موضوع‌بندی شده

مثال

<ul data-role="listview" data-theme="e">
  <li><a href="#">مورد لیست</a></li>
  <li data-theme="a"><a href="#">عنصر لیست</a></li>
  <li data-theme="b"><a href="#">مورد لیست</a></li>
  <li><a href="#">مورد لیست</a></li>
</ul>

آزمایش کنید

دکمه‌های تقسیم موضوع‌بندی شده

مثال

<ul data-role="listview" data-split-theme="e">

آزمایش کنید

لیست‌های قابل فروکش موضوع‌بندی شده

مثال

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <ul data-role="listview">
    <li><a href="#">آگنس</a></li>
  </ul>
</div>

آزمایش کنید

فرم‌های موضوع‌بندی شده

مثال

<label for="name">نام کامل:</label>
<input type="text" name="text" id="name" data-theme="a">
<label for="colors">رنگ مورد علاقه خود را انتخاب کنید:</label>
<select id="colors" name="colors" data-theme="b">
  <option value="red">قرمز</option>
  <option value="green">سبز</option>
  <option value="blue">آبی</option>
</select>

آزمایش کنید

فرم‌های قابل فروکش موضوع‌بندی شده

مثال

<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>کلیک کنید - من قابل فروکش هستم!</legend>

آزمایش کنید

افزودن موضوع جدید

jQuery Mobile همچنین به شما اجازه می‌دهد تا موضوع جدیدی به صفحات موبایل اضافه کنید.

برای افزودن یا ویرایش موضوع جدید، از فایل‌های CSS (مثلاً jQuery Mobile که دانلود کرده‌اید) استفاده کنید. فقط یک بخش از استایل را کپی کنید و با استفاده از نام حروف (f-z) کلاس‌ها را تغییر نام دهید، سپس آن‌ها را به رنگ و فونتی که دوست دارید تغییر دهید.

شما همچنین می‌توانید از استفاده از کلاس‌های موضوعی در مستندات HTML برای افزودن استایل جدید استفاده کنید - برای نوار ابزار از کلاس ui-bar-(a-z) استفاده کنید و برای محتوا از کلاس ui-body-(a-z) استفاده کنید:

مثال

<style>
.ui-bar-f
{
رنگ:سبز;
رنگ پس‌زمینه:زرد;
}
.ui-body-f
{
وزن فون:قوی;
رنگ:سبز کبود;
}
</style>

آزمایش کنید