جی کوئری موبایل-تم ها
آموزش تم ها در جی کوئری موبایل
جی کوئری موبایل، دو نوع تم مختلف را ارائه می دهد، که عبارتند از: "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>
 |
از تم a برای بیشتر عناصر استفاده می شود و عناصر فرزند اغلب این تم را از عناصر والد خود به ارث می برند. |
|---|
تم گذاری بر روی header و footer
مثال
<div data-role="footer" data-theme="b"></div>
تم گذاری برای header و footer در جعبه های گفتگو
مثال
<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
</div>
تم گذاری برای دکمه ها
تم گذاری برای آیکن ها
مثال
تم گذاری برای پاپ آپ ها
تم گذاری دکمه ها در header و footer
مثال
<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>
تم گذاری نوارهای هدایتی
مثال
<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>
تم گذاری پنل ها
تم گذاری بر روی پیش ساخته ها و محتوا
مثال
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
تم گذاری بر روی لیست ها
مثال
<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">
<li><a href="#">Agnes</a></li>
</ul>
</div>
تم گذاری بر روی فرم ها
مثال
<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>
تم گذاری بر روی فرم های پیش ساخته
مثال
<legend>Click me - I'm collapsible!</legend>
اضافه کردن تم جدید
جی کوئری موبایل همچنین به شما اجازه می دهد تا تم های جدیدی را به صفحات موبایلی خود اضافه کنید.
با ویرایش کردن فایل CSS مورد نظر(در صورتی که جی کوئری موبایل را دانلود کرده اید) می توانید تم جدیدی را تعریف کنید. کافی است که استایل خود را کپی کنید و کلاس های مورد نظر خود را به وسیله ی یک نام تک حرفی(c-z) تغییر نام دهید و سپس رنگ ها و فونت های مورد نظر خود را تنظیم کنید.
شما همچنین می توانید استایل های جدیدی را با استفاده از کلاس های تم در سند HTML، اضافه کنید. برای این کار کلاس "(ui-bar-(a-z" را برای نوار ابزارها اضافه کنید و کلاس "(ui-body-(a-z" را برای محتوا و کلاس "(ui-page-theme-(a-z" را برای صفحه ی مورد نظر اضافه کنید.
مثال
.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>
|
در ورژن های قبلی جی کوئری موبایل، از جاوااسکریپت برای این استفاده می شد که مشخص کنیم چطور یک عنصر باید از عنصر والدش، تم را به ارث ببرد. از ورژن 1.4 به بعد، توجه این فریم ورک بر این بود که کارایی را بهتر کند بنابراین جاوااسکریپت کنار رفت و به جای آن از css خالض استفاده شد. تیم جی کوئری موبایل یک ابزار را درست کرد که به شما کمک می کند که تم دلخواه خود را بسازید. نام آن ابزار ThemeRoller است. شما همچنین می توانید از این ابزار استفاده کنید تا تم های قدیمی خود را به روز کنید و آنها را با ورژن های جدید، سازگار کنید. |
|---|
- نوشته شده توسط احسان عباسی
- بازدید: 5427
