سبد (0)

تبلیغات

جی کوئری موبایل-تم ها

آموزش تم ها در جی کوئری موبایل

جی کوئری موبایل، دو نوع تم مختلف را ارائه می دهد، که عبارتند از: "a" و "b" . هریک از این دونوع تم در رنگ ها و دکمه ها و نوارها و ... با یکدیگر متفاوت هستند. 

برای شخصی سازی کردن ظاهر اپلیکیشن خود، از خصوصیت data-theme استفاده کنید و آن برابر با a یا b کنید: 

 

کد

<div data-role="page" data-theme="a|b">
مقدارتوضیحاتمثال
a

متن سیاه رنگ، و پس زمینه ی خاکستری برای محتوای صفحه

متن سیاه رنگ، و پس زمینه ی خاکستری برای header و footer

متن سیاه رنگ، و پس زمینه ی خاکستری ورشن برای دکمه ها

متن سفید رنگ، و پس زمینه ی آبی برای دکمه های فعال

متن آبی برای لینک ها

متن خاکستری روشن(برای placeholder) و یا متن سیاه رنگ(برای مقدار) و پس زمینه ی سفید رنگ برای فیلد های ورودی

امتحان کنید
b

متن سفید رنگ، و پس زمینه به رنگ خاکستری سیاه، برای محتوای صفحه

متن سفید رنگ، و پس زمینه به رنگ خاکستری تیره برای header و footer. 

متن سفید رنگ، و پس زمینه ی زغالی رنگ برای دکمه ها

متن سفید رنگ، و پس زمینه ی آبی فیروزه ای برای دکمه های فعال

متن آبی فیروزه ای برای لینک ها

متن خاکستری(برای placeholder) و یا متن سفید(برای مقدار) و پس زمینه ی سیاه رنگ برای فیلدهای ورودی

امتحان کنید

برای دکمه هایی که دارای "class="ui-btn می باشند، از کلاس "ui-btn-a|b" استفاده کنید تا دکمه را به رنگ خاکستری(پیش فرض) و یا سیاه درآورید:

کد

<a href="#" class="ui-btn ui-btn-a|b">Button</a>
 
Note

از تم a برای بیشتر عناصر استفاده می شود و عناصر فرزند اغلب این تم را از عناصر والد خود به ارث می برند. 


تم گذاری بر روی header و footer

مثال

<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
خودتان امتحان کنید »

 تم گذاری برای header و footer در جعبه های گفتگو

مثال

<div data-role="page" data-dialog="true" id="pagetwo">
  <div data-role="header" data-theme="b"></div>
  <div data-role="footer" data-theme="b"></div>
</div>
خودتان امتحان کنید »

تم گذاری برای دکمه ها

مثال

<a href="#" class="ui-btn ui-btn-b">Black Button</a>
خودتان امتحان کنید »

تم گذاری برای آیکن ها

مثال

<a href="#" class="ui-btn ui-btn-b ui-icon-search ui-btn-icon-notext">Search</a>
خودتان امتحان کنید »

تم گذاری برای پاپ آپ ها

مثال

<div data-role="popup" id="myPopup" data-theme="b">
خودتان امتحان کنید »

تم گذاری دکمه ها در header و footer

مثال

<div data-role="header">
  <a href="#" class="ui-btn ui-btn-b">Home</a>
  <h1>Welcome To My Homepage</h1>
  <a href="#" class="ui-btn">Search/a>
</div>

<div data-role="footer">
  <a href="#" class="ui-btn ui-btn-b">Add Me On Facebook</a>
  <a href="#" class="ui-btn">Add Me On Twitter</a>
  <a href="#" class="ui-btn ui-btn-b">Add Me On Instagram</a>
</div>
خودتان امتحان کنید »

تم گذاری نوارهای هدایتی

مثال

<div data-role="footer" data-theme="b">
  <h1>Insert Footer Text Here</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="a">Button 1</a></li>
      <li><a href="#" data-icon="arrow-r">Button 2</a></li>
      <li><a href="#" data-icon="arrow-r">Button 3</a></li>
      <li><a href="#" data-icon="search" data-theme="a">Button 4</a></li>
    </ul>
  </div> 
</div>
خودتان امتحان کنید »

تم گذاری پنل ها

مثال

<div data-role="panel" id="myPanel" data-theme="b">
خودتان امتحان کنید »

تم گذاری بر روی پیش ساخته ها و محتوا

مثال

<div data-role="collapsible" data-theme="b" data-content-theme="b">
  <h1>Click me - I'm collapsible!</h1>
  <p>I'm the expanded content.</p>
</div>
خودتان امتحان کنید »

تم گذاری بر روی لیست ها

مثال

<ul data-role="listview" data-theme="b">
  <li><a href="#">List Item</a></li>
  <li><a href="#">List Item</a></li>
  <li data-theme="a"><a href="#">List Item</a></li>
  <li><a href="#">List Item</a></li>
</ul>
خودتان امتحان کنید »

تم گذاری بر روی دکمه های split

مثال

<ul data-role="listview" data-split-theme="b">
خودتان امتحان کنید »

تم گذاری بر روی لیست های پیش ساخته

مثال

<div data-role="collapsible" data-theme="b" data-content-theme="b">
  <ul data-role="listview">
    <li><a href="#">Agnes</a></li>
  </ul>
</div>
خودتان امتحان کنید »

تم گذاری بر روی فرم ها

مثال

<label for="name">Full Name:</label>
<input type="text" name="text" id="name" data-theme="b">

<label for="colors">Choose Favorite Color:</label>
<select id="colors" name="colors" data-theme="b">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>
خودتان امتحان کنید »

تم گذاری بر روی فرم های پیش ساخته

مثال

<fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
<legend>Click me - I'm collapsible!</legend>
خودتان امتحان کنید »

اضافه کردن تم جدید

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

با ویرایش کردن فایل CSS مورد نظر(در صورتی که جی کوئری موبایل را دانلود کرده اید) می توانید تم جدیدی را تعریف کنید. کافی است که استایل خود را کپی کنید و کلاس های مورد نظر خود را به وسیله ی یک نام تک حرفی(c-z) تغییر نام دهید و سپس رنگ ها و فونت های مورد نظر خود را تنظیم کنید. 

شما همچنین می توانید استایل های جدیدی را با استفاده از کلاس های تم در سند HTML، اضافه کنید. برای این کار کلاس "(ui-bar-(a-z" را برای نوار ابزارها اضافه کنید و کلاس "(ui-body-(a-z" را برای محتوا و کلاس "(ui-page-theme-(a-z" را برای صفحه ی مورد نظر اضافه کنید.

مثال

<style>
.ui-bar-f {
    color: red;
    background-color: yellow;
}

.ui-body-f {
    font-weight: bold;
    color: white;
    background-color: purple;
}

.ui-page-theme-f {
    font-weight: bold;
    background-color: green;
}
</style>
خودتان امتحان کنید »
Note

در ورژن های قبلی جی کوئری موبایل، از جاوااسکریپت برای این استفاده می شد که مشخص کنیم چطور یک عنصر باید از عنصر والدش، تم را به ارث ببرد. 

از ورژن 1.4 به بعد، توجه این فریم ورک بر این بود که کارایی را بهتر کند بنابراین جاوااسکریپت کنار رفت و به جای آن از css خالض استفاده شد. 

تیم جی کوئری موبایل یک ابزار را درست کرد که به شما کمک می کند که تم دلخواه خود را بسازید. نام آن ابزار ThemeRoller است. شما همچنین می توانید از این ابزار استفاده کنید تا تم های قدیمی خود را به روز کنید و آنها را با ورژن های جدید، سازگار کنید. 

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی