جی کوئی موبائل تھیم

جی کوئی موبائل تھیم

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

اگر آپ اپنی ایپلیکیشن کی شکل کا تخصیص کرنا چاہتے ہیں تو 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">بٹن</a>
<a href="#" data-role="button" data-theme="b">بٹن</a>
<a href="#" data-role="button" data-theme="c">بٹن</a>

خود کو کچھ کریں

تھیم کئے آئیکن

مثال

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

خود کو کچھ کریں

پہلوی اور پاچھلوی میں تھیم کئے بٹن

مثال

<div data-role="header">
  Home
  
Welcome To My Homepage

  Search
</div>


  Button 1
  Button 2
  Button 3
</div>

خود کو کچھ کریں

主题化的导航栏

مثال


  
Insert Footer Text Here

خود کو کچھ کریں

主题化的可折叠按钮和内容

مثال

<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>

خود کو کچھ کریں

نئی تھیموں کو شامل کریں

جی کوئری موبائل ساتھی طور پر نئی تھیموں کو موبائل پیج میں شامل کرسکتا ہے۔

نئی تھیموں کو شامل یا ترمیم کرنے کیلئے پلیئر CSS فائل کو ویرائی کریں (مثلاً جی کوئری موبائل کو ڈاؤن لوڈ کیا گیا ہے)۔ صرف ایک قسماً سائز کو کاپی کریں، اور حرف کا نام (f-z) استعمال کرکے کلاس کو نام بدل دیں، سپس پسند کی رنگ اور فونٹ میں ترمیم کریں:

بھی آپ HTML ڈاکومن میں تھیم کلاس استعمال کرکے نئی سائزوں کو شامل کرسکتے ہیں - تولی بار کو کلاس ui-bar-(a-z) اور محتوا کو کلاس ui-body-(a-z) شامل کرسکتے ہیں:

مثال

<style>
.ui-bar-f
{
رنگ:سبز;
پرنلنگ رنگ:برنجی;
}
.ui-body-f
{
فونٹ وزن:بولڈ;
رنگ:لائل;
}
</style>

خود کو کچھ کریں