Aplicațiile mobile sunt construite pe simplitatea transvazare lucruri pe care le-ar doriți să le afișați.
Crearea unui buton în jQuery Mobile
Un buton în jQuery Mobile pot fi create în trei moduri:
- Folosind <input> elementul
- Folosind <button> Elementul cu class="ui-btn"
- Folosirea <a> elementului cu class="ui-btn"
Butoanele din jQuery Mobile sunt decorate în mod automat, ceea ce le face atractive și utilizabile pe ambele dispozitive mobile și computere desktop. Vă recomandăm să folosiți <a> elementul cu class="ui-btn" pentru a lega între pagini, și <input> sau <button> elemente pentru depunerea formularului.
Notă: Înainte de versiunea 1.4, am folosit data-role="button" atribut pentru a crea un buton pe jQuery Mobile. Ca de 1.4, utilizarea cadru CSS clase la butoane de stil ( cu excepția <input> butoane).
Butoane de navigare
Pentru a lega între pagini de butoane, folosiți <a> elementul cu class="ui-btn" :
Butoane grupaøi
jQuery Mobile oferă o modalitate ușoară pentru gruparea butoane împreună.
Utilizați data-role="controlgroup" de data-type="horizontal|vertical" data-role="controlgroup" atribut , împreună cu data-type="horizontal|vertical" de data-type="horizontal|vertical" , într - un element container, pentru a specifica dacă butoanele de grup orizontal sau vertical:
Exemplu
<div data-role="controlgroup" data-type="horizontal" >
<a href="#" class="ui-btn">Button 1</a>
<a href="#"
class="ui-btn">Button 2</a>
<a href="#"
class="ui-btn">Button 3</a>
</div>
Încearcă - l singur » În mod implicit, butoanele grupate sunt grupate pe verticală, fără margini și spațiu între ele. Și doar primul și ultimul buton are colțuri rotunjite, ceea ce creează un aspect frumos atunci când grupate împreună.
butoanele de
Pentru a crea un buton înapoi, utilizați data-rel="back" atribut ( Note: this will ignore the anchor's href value) :
Butoane inline
În mod implicit, butoanele ia pe întreaga lățime a ecranului. Dacă doriți un buton care este doar la fel de mare ca și conținutul său, sau dacă doriți două sau mai multe butoane să apară una lângă alta, se adaugă "ui-btn-inline" clasa:
Mai multe clase CSS pentru butoane Link
| Clasă | Descriere | Exemplu |
|---|---|---|
| ui-btn-b | Schimbă culoarea butonului la un fundal negru cu text alb (default is gray background with black text) . | Incearca-l |
| ui-corner-all | Adaugă colțuri rotunjite la butonul | Incearca-l |
| ui-mini | Face butonul mai mici | Incearca-l |
| ui-shadow | Adaugă umbre butonul | Incearca-l |
Dacă doriți să utilizați mai mult de o clasă, separați fiecare clasă , cu un spațiu, cum ar fi: class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow" de class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"
În mod implicit, <input> butoane au umbra si colturi rotunjite. <a> și <button> Elementul nu.
Pentru o referință completă de clase CSS pentru stiluri comune, accesați jQuery Mobile CSS Clase de referință .
Următorul capitol demonstrează cum să atașați pictograme pentru butoane.