jQuery Mobile tema

jQuery Mobile tema

jQuery Mobile erbjuder fem olika stilteman, från "a" till "e" - varje tema har olika färgade knappar, paneler, innehållsblock och så vidare. Ett tema i jQuery Mobile är sammansatt av flera synliga effekter och färger.

För att anpassa utseendet på din applikation, använd data-theme-attributet och tilldela en bokstav till detta attribut:

<div data-role="page" data-theme="a|b|c|d|e">
Värde Beskrivning Exempel
a Standard. Vit text på svart bakgrund. Test
b Vit text på blå bakgrund / svart text på grå bakgrund Test
c Svart text på ljusgrå bakgrund Test
d Svart text på vit bakgrund Test
e Svart text på orange bakgrund Test

Tips:Blanda dina favoritmönster!

Som standard använder jQuery Mobile "a"-tema för rubrik och fotnoter, och "c"-tema för rubrikinnehåll (ljusgrå). Men du kan fritt blanda teman.

Tematiserade sidor, innehåll och fotnoter

Exempel

<div data-role="header" data-theme="b"></div>
<div data-role="content" data-theme="a"></div>
<div data-role="footer" data-theme="e"></div>

Prova själv

Tematiserade dialoger

Exempel

<a href="#pagetwo" data-rel="dialog">Gå till den tematiserade dialogsidan</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>

Prova själv

Tematiserade knappar

Exempel

<a href="#" data-role="button" data-theme="a">Knapp</a>
<a href="#" data-role="button" data-theme="b">Knapp</a>
<a href="#" data-role="button" data-theme="c">Knapp</a>

Prova själv

Tematiserade ikoner

Exempel

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

Prova själv

Rubrik och fotnoter med temabutiker

Exempel

<div data-role="header">
  <a href="#" data-role="button" data-icon="home" data-theme="b">Hem</a>
  <h1)Välkommen till min startsida</h1>
  <a href="#" data-role="button" data-icon="search" data-theme="e">Sök</a>
</div>
<div data-role="footer">
  <a href="#" data-role="button" data-theme="b" data-icon="plus">Knapp 1</a>
  <a href="#" data-role="button" data-theme="c" data-icon="plus">Knapp 2</a>
  <a href="#" data-role="button" data-theme="e" data-icon="plus">Knapp 3</a>
</div>

Prova själv

Tematiserad navigationsfält

Exempel

<div data-role="footer" data-theme="e">
  <h1>Infoga fottext här</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="b">Knapp 1</a></li>
      <li><a href="#" data-icon="arrow-r">Knapp 2</a></li>
      <li><a href="#" data-icon="arrow-r">Knapp 3</a></li>
      <li><a href="#" data-icon="search" data-theme="a" >Knapp 4</a></li>
    </ul>
  </div> 
</div>

Prova själv

Tematiserade fällbara knappar och innehåll

Exempel

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <h1>Klicka mig - jag är fällbar!</h1>
  <p>Jag är utökad innehåll.</p>
</div>

Prova själv

Tematiserad lista

Exempel

<ul data-role="listview" data-theme="e">
  <li><a href="#">List Element</a></li>
  <li data-theme="a"><a href="#">List Item</a></li>
  <li data-theme="b"><a href="#">List Element</a></li>
  <li><a href="#">List Element</a></li>
</ul>

Prova själv

Thematiska delade knappar

Exempel

<ul data-role="listview" data-split-theme="e">

Prova själv

Thematiska fällbara listor

Exempel

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <ul data-role="listview">
    <li><a href="#">Agnes</a></li>
  </ul>
</div>

Prova själv

Thematiska formulär

Exempel

<label for="name">Fullständigt Namn:</label>
<input type="text" name="text" id="name" data-theme="a">
<label for="colors">Välj favoritfärg:</label>
<select id="colors" name="colors" data-theme="b">
  <option value="red">Röd</option>
  <option value="green">Grön</option>
  <option value="blue">Blå</option>
</select>

Prova själv

Thematiska fällbara formulär

Exempel

<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>Klicka mig - jag är fällbar!</legend>

Prova själv

Lägg till nya ämnen

jQuery Mobile tillåter också att du lägger till nya ämnen till mobil sidor.

Lägg till eller redigera nya ämnen genom att redigera CSS-filen (t.ex. om du har laddat ner jQuery Mobile). Kopiera bara ett stycke stil, och byt namn på klassen med bokstäverna (f-z), sedan justera till dina favoritfärger och teckensnitt.

Du kan också lägga till nya stilar genom att använda ämnesklasser i HTML-dokument - lägg till klassen ui-bar-(a-z) för verktygsfältet och klassen ui-body-(a-z) för innehållet:

Exempel

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

Prova själv