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

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

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">Go To The Themed Dialog Page</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="#">List Item</a></li>
  <li data-theme="a"><a href="#">List Item</a></li>
  <li data-theme="b"><a href="#">List Item</a></li>
  <li><a href="#">List Item</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="#">Agnes</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>

آپ خود سجائیئے

ਨਵੀਂ ਥੀਮ ਜੋੜਣ

ਜੂਐੱਲੀ ਮੋਬਾਇਲ ਨੇ ਤੁਹਾਨੂੰ ਮੋਬਾਇਲ ਪੇਜ ਨੂੰ ਨਵੀਂ ਥੀਮ ਜੋੜਨ ਦੀ ਆਗਿਆ ਦਿੱਤੀ ਹੈ:

ਨਵਾਂ ਜਾਂ ਸੰਸ਼ੋਧਿਤ ਥੀਮ ਜੋੜਣ ਲਈ ਸੀਐੱਸਐੱਸ ਫਾਈਲ (ਜਿਵੇਂ ਕਿ ਜੂਐੱਲੀ ਮੋਬਾਇਲ ਨੂੰ ਡਾਊਨਲੋਡ ਕੀਤਾ ਹੋਇਆ) ਸੰਸ਼ੋਧਿਤ ਕਰੋ। ਸਿਰਫ਼ ਇੱਕ ਹਿੱਸੇ ਦੀ ਸਟਾਈਲ ਕਾਪੀ ਕਰੋ ਅਤੇ ਅੱਕਰ ਨਾਮ (f-z) ਨਾਲ ਕਲਾਸ ਨੂੰ ਨਾਮ ਦੇਣ, ਫਿਰ ਤੁਸੀਂ ਪਸੰਦੀਦਾ ਰੰਗ ਅਤੇ ਫੰਟ ਨੂੰ ਸੰਸ਼ੋਧਿਤ ਕਰ ਸਕਦੇ ਹੋ:

ਤੁਸੀਂ ਹੈਲਜ਼ ਦੌਰਾਨ ਥੀਮ ਕਲਾਸ ਦੀ ਮਦਦ ਨਾਲ ਨਵੀਂ ਸਟਾਈਲ ਜੋੜ ਸਕਦੇ ਹੋ - ਟੂਲਬਾਰ ਨੂੰ ਕਲਾਸ ui-bar-(a-z) ਦੇਣ ਅਤੇ ਸਮੱਗਰੀ ਨੂੰ ਕਲਾਸ ui-body-(a-z) ਦੇਣ:

مثال

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

آپ خود سجائیئے