I jQuery Mobile er der ca. 30 widgets til rådighed til indsættelse i header, main eller footer.
| Navn | Betegnelse | Default kode | Link |
|---|
| Button | Knap. |
<div class="ui-btn ui-input-btn ui-shadow">
</div>
|   
 |
| Checkboxradio | Input type 'checkbox' og input type 'radio button'. |
<label><input type="checkbox" name="checkbox-0"> Ja </label>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom">
<label for="checkbox-1"> Ja</label>
<p><br /></p>
----------
<fieldset data-role="controlgroup">
<legend>Vælg et kæledyr:</legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked">
<label for="radio-choice-1">Kat</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2">
<label for="radio-choice-2">Hamster</label>
<input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3">
<label for="radio-choice-3">Hund</label>
<input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4">
<label for="radio-choice-4">Krokodille</label>
</fieldset>
|
|
| Collapsible | "Drop-down" med et underfelt, der kan indeholde tekst, billeder, video etc. |
<div data-role="collapsible">
<h1>Overskrift, der vises hele tiden</h1>
<p>Tekst, billeder, video etc. der vises ved klik på overskriften</p>
</div> <!-- slut collapsible -->
|
|
| Collapsible set | Flere Collapsible samlet i et sæt. |
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>Sæt 1</h3>
<p>Kan indeholde tekst, billede og video.</p>
</div>
<div data-role="collapsible">
<h3>Sæt 2</h3>
<p><img src="/felles/logoer/jquery-mobile.png" alt="JQUERY mobile logo" /></p>
</div>
</div>
|
|
| Control group | Flere links samlet i en blok |
<div data-role="controlgroup">
<a href="#" class="ui-btn ui-corner-all">Ja</a>
<a href="#" class="ui-btn ui-corner-all">No</a>
<a href="#" class="ui-btn ui-corner-all">Måske</a>
</div>
|
|
| Filterable content | Søgefelt og blok med checkbokse. Kun checkbokse, der i teksten (id-feltet) indeholder søgte bogstaver forbliver viste. |
<form>
<input type="text" data-type="search" id="filterable-input">
</form>
<form data-role="controlgroup" data-filter="true" data-input="#filterable-input">
<label for="pizza">
Pizza
<input type="checkbox" id="pizza">
</label>
<label for="goulash">
Gullash
<input type="checkbox" id="gullash">
</label>
<label for="falafel">
Falafel
<input type="checkbox" id="falafel">
</label>
<label for="spring-rolls">
Forårsruller
<input type="checkbox" id="forårsruller">
</label>
</form>
|
|
| Fixed toolbar | Er blevet flyttet til Toolbar. | | |
| Flipswitch | Kontakt baseret på checkboks. Teksterne 'On' og 'Off' kan ikke ændres. |
<fieldset>
<div data-role="fieldcontain">
<label for="checkbox-based-flipswitch">Checkbox-based:</label>
<input type="checkbox" id="checkbox-based-flipswitch" data-role="flipswitch">
</div>
</fieldset>
|
|
| Footer | Er blevet flyttet til Toolbar. | | |
| Header | Er blevet flyttet til Toolbar. | | |
| Listview | Normal uordnet liste i lodret format. Foranstillede 'punkter' er flyttet til højre margin. |
<ul data-role="listview">
<li><a href="acura.html">Alfa</a></li>
<li><a href="audi.html">Bravo</a></li>
<li><a href="bmw.html">Charlie</a></li>
</ul>
|
|
| Loader | Viser 'spinner' mens jQm henter Ajax-data.? | Ingen HTML-data |
|
| Navbar | Menu med eller uden ikoner. Kan indsættes i 'header', 'main' og 'footer'.
Til 'data-role="page"' på hver side knyttes 'id="sidexx"' med ident for siden. Samme ident indsættes i en af listens linier. |
<div data-role="page" id="sidexx">
--------------------------
<div data-role="navbar">
<ul>
<li><a href="#sidexx" data-icon="grid">Side 1</a></li>
<li><a href="#side02" data-icon="grid">Side 2</a></li>
<ul>
</div> <!-- navbar slut -->
|
|
| Page | Container, deer indeholder den enkelte side i en SPA-opbygning (Single Page Application) |
<div data-role="page" data-dialog="true">
<div data-role="header">
<h2>Are you sure?</h2>
</div>
<div class="ui-content" role="main">
<h2>Are you sure you wish to exit the application?</h2>
<p>You have unsaved changes. If you exit without saving them, you will lose them.</p>
<div class="ui-grid-a">
<div class="ui-block-a">
<a href="#" id="exit-button" class="ui-btn ui-btn-b ui-shadow ui-corner-all">Exit</a>
</div>
<div class="ui-block-b">
<a href="#" id="cancel-button" class="ui-btn ui-shadow ui-corner-all">Canel</a>
</div>
</div>
</div>
</div>
|
|
| Page container | Den ydre container i en SPA-opbygning (Site indbygget i en enkelt html-fil.). Den indeholder et antal page-widgets, der hver indeholder en enkelt sides data. |
<doctype html>
<html>
<head>
<title>Multipage example<title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div role="main" class="ui-content">
<a href="#page2" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go To Page 2</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div role="main" class="ui-content">
<a href="#page1" data-rel="back" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go Back To Page 1</a>
</div>
</div>
</body>
| |
| Panel | Paneler, der glider ind fra højre eller venstre side. De kan glide ind på 3 forskellige måder. Skal placeres oven over "header" eller neden under "footer".
Skal startes med et link inde i 'header', 'main' eller 'footer,. |
<div data-role="panel" id="mypanel1">
<p>Her er data til panel 1.</p>
<p><a href="#main" data-rel="close">Luk panel 1</a></p>
</div><!-- /panel -->
<div data-role="panel" id="mypanel2" data-position="right" data-display="push">
<p>Her er data til panel 2.</p>
</div><!-- /panel -->
----------
<p><&;a href="#mypanel1">Åbn panel 1</a></p>
<p><&;a href="#mypanel2">Åbn panel 2</a></p>
|
|
| Pop up | Popup vinduer i mange parameterstyrede variationer. |
<a href="#popupBasic" data-rel="popup">Åbn Popup</a>
----------
<div data-role="popup" id="popupBasic">
<p>Basis pop-up uden optioner.</p>
</div>
|
|
| Rangeslider | Input type glider mellem minimum og maksimum værdier. |
<div data-role="rangeslider">
<label for="range-1a">Glider:</label>
<input name="range-1a" id="range-1a" min="0" max="100" value="0" type="range" />
<label for="range-1b">Glider:</label>
<input name="range-1b" id="range-1b" min="0" max="100" value="100" type="range" />
</div>
|
|
| Select menu | Drop down menu |
<label for="select-choice-0" class="select">Forsendelsesmåded:</label>
<select name="select-choice-0" id="select-choice-0">
<option value="standard">Standard: 7 dage</option>
<option value="rush">Hurtigt: 3 dage</option>
<option value="express">Express: næste dag</option>
<option value="overnight">Natten over</option>
</select>
|
|
| Slider | Input type glider |
<label for="slider-1">Input slider:<label>
<input type="range" name="slider-1" id="slider-1" value="60" min="0" max="100">
|
|
| Table | Traditionel tabel |
<table data-role="table" id="my-table" data-mode="reflow">
<thead>
<tr>
<th>Nummer<th>
<th>Film titel</th>
<th>År</th>
<th><abbr title="Rotten Tomato Rating">Nummer</abbr></th>
<th>Set antal gange</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td><a href="foo.com" data-rel="external">Citizen Kane</a></td>
<td>1941</td>
<td>100%</td>
<td>74</td>
</tbody>
</table>
| |
| Column-toggle table | Traditionel tabel, hvori visning af de enkelte kolonner dynamisk kan kobles til og fra. Der skal blive 1 kolonne tilbage. |
<div data-role="popup" id="table-column-toggle-popup" class="ui-table-columntoggle-popup">
<fieldset data-role="controlgroup">
<label>Nr.<input type="checkbox" checked data-cacheval="false" locked="true"></input></label>
<label>År<input type="checkbox" checked data-cacheval="false" locked="true"></input></label>
<label>Rating<input type="checkbox" checked data-cacheval="false" locked="true"></input></label>
<label>Antal visninger<input type="checkbox" checked data-cacheval="false" locked="true"></input></label>
</fieldset>
</div>
<a href="#table-column-toggle-popup" class="ui-table-columntoggle-btn ui-btn ui-btn-b ui-corner-all ui-shadow ui-mini" data-rel="popup">Kolonner...</a>
<table data-role="table" id="table-column-toggle" data-mode="columntoggle" data-enhanced="true" class="ui-table ui-table-columntoggle" data-column-btn-theme="b">
<thead>
<tr>
<th data-priority="2" data-colstart="1" class="ui-table-priority-2 ui-table-cell-visible">Nr</th>
<th data-colstart="2">Titel</th>
<th data-priority="3" data-colstart="3" class="ui-table-priority-3 ui-table-cell-visible">År</th>
<th data-priority="1" data-colstart="4" class="ui-table-priority-1 ui-table-cell-visible"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
<th data-priority="5" data-colstart="5" class="ui-table-priority-5 ui-table-cell-visible">Antal visninger</th>
</tr>
</thead>
<tbody>
<tr>
<th class="ui-table-priority-2 ui-table-cell-visible">1</th>
<td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
<td class="ui-table-priority-3 ui-table-cell-visible">1941</td>
<td class="ui-table-priority-1 ui-table-cell-visible">100%</td>
<td class="ui-table-priority-5 ui-table-cell-visible">74</td>
</tr>
<tr>
<th class="ui-table-priority-2 ui-table-cell-visible">2</th>
<td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
<td class="ui-table-priority-3 ui-table-cell-visible">1942</td>
<td class="ui-table-priority-1 ui-table-cell-visible">97%</td>
<td class="ui-table-priority-5 ui-table-cell-visible">64</td>
</tr>
</tbody>
</table>
|
|
| Reflow table | Styring af hvordan kolonner i en tabel skal vises under hinanden, når tabellen bliver 'klemt' af responsiveness. |
|
|
| Tabs | Faneblade baseret på liste. |
<div data-role="navbar">
<ul>
<li><a href="#fragment-1">Æbler</a></li>
<li><a href="#fragment-2">Pærer</a></li>
<li><a href="#fragment-3">Bananer</a></li>
</ul>
</div>
<div id="fragment-1">
<p>Indhold til den første tab.</p>
</div>
<div id="fragment-2">
<p>Indhold til den anden.</p>
</div>
<div id="fragment-3">
<p>Indhold til den tredie tab.</p>
</div>
</div>
|
|
| Text input | Input type text felt. |
<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" value="">
|
|
| Toolbar | En Toolbar er 'indmad' i header og footer i form af tekst og / eller links |
<a href="index.html" data-icon="delete">Slet/lt;/a>
<h1>Ret kontakt</h1>
<a href="index.html" data-icon="check">Gem</a>
----------
<a href="index.html" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-icon-right ui-icon-plus"&Tilføj</a>
<a href="index.html" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-icon-right ui-icon-arrow-u">Op</a>
<a href="index.html" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-icon-right ui-icon-arrow-d">Ned</a>
|
|
| Andre |
|---|
| Layout grids | Grids er ikke widgets, men CSS-klasser til at kolonneopdele widgets med. | | |
| Form | | | |
jQuery mobile - Opbyg Widgets.
