jQuery Mobile ပုံစံ

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">Home</a>
  <h1>Welcome To My Homepage</h1>
  <a href="#" data-role="button" data-icon="search" data-theme="e">Search</a>
</div>
<div data-role="footer">
  <a href="#" data-role="button" data-theme="b" data-icon="plus">Button 1</a>
  <a href="#" data-role="button" data-theme="c" data-icon="plus">Button 2</a>
  <a href="#" data-role="button" data-theme="e" data-icon="plus">Button 3</a>
</div>

ကိုယ်တိုင် ကျင်းပပြီ

အကျိန်တူသော ခြောက်ပေါ်

အကျိုး

<div data-role="footer" data-theme="e">
  <h1>Insert Footer Text Here</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="b">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="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">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

ကိုယ်တိုင် ကျင်းပပြီ

အက္ခရာအုပ်အုပ်ကို ဖွင့်ပေးသော အက္ခရာအုပ်

အကျိုး

<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>ကျွန်ုပ်ကို စွန့်တည်ပါ - ကျွန်ုပ် ဖြိုက်နိုင်သည်!</legend>

ကိုယ်တိုင် ကျင်းပပြီ

အခွဲအား ထပ်ပေါင်းရမည်

jQuery Mobile သည် အမြန်မြန်စွာ သည့် အခွဲအား ထပ်ပေါင်းရမည်

ကျမ်းသား CSS ဖုံးဖြင့် အခွဲအား ထပ်ပေါင်းသို့မဟုတ် ပြုပြင်ရမည် - ဒီအခွဲကို ထပ်ပေါင်းပြီး၊ အက္ခရာများ (f-z) ကို အသုံးပြု၍ အက္ခရာအမည် ပြုလုပ်၍၊ ကျွန်ုပ်၏ အိမ်ချိန် အရောင်နှင့် အက္ခရာများ ကို ပြုပြင်ပါ

ကျမ်းသားအမှတ် 1: ကျမ်းသား HTML တွင် အသုံးပြုသော အက္ခရာများ ဖြင့် ခွဲထွက်သည့် စက်မှုအဖြစ် အခွဲအား ထပ်ပေါင်းရမည် - တည်တယ်အုတ်ချောင်းများကို အက္ခရာ ui-bar-(a-z) ဖြင့် ပေါင်းစပ်ပြီး၊ အသုံးပြုကို ui-body-(a-z) ဖြင့် ပေါင်းစပ်ပါနှင့်

အကျိုး

<style>
.ui-bar-f
{
color:green;
background-color:yellow;
}
.ui-body-f
{
font-weight:bold;
color:purple;
}
</style>

ကိုယ်တိုင် ကျင်းပပြီ