Ganz frisch reingekommen: jQueryMobile 1.0.
Das beliebte JavaScript Framework gibt es jetzt auch in einer mobilen Fassung, die insbesondere die von Smartphones lieb gewonnene Touch- und Gesten-Funktionalität umsetzt.
Zweiter Grund zur vorweihnachtlichen Freude ist der ThemeRoller: ein recht praktisches Tool, wenn man ein iPhone bzw. Smartphone-Interface gestalten möchte, ohne das Rad und die CSS Dateien jedes mal neu erfinden zu müssen.
In Kombination lassen sich damit schnell WebApps entwerfen, die sich anfühlen, wie native iPhone Apps aber doch auf HTML5 und JavaScript zurückgreifen.
Fangen wir unverzagt mit dem HTML Code an, den zwar lang ist, dafür aber keine Verständnisschwierigkeiten bereiten sollte und alle denkbaren Steuerungsfelder liefert. Empfehlung: einfach mal kopieren und
<div class="preview ui-shadow swatch">
<div role="banner" data-role="header" data-form="ui-bar-b"
data-theme="b" data-swatch="b" class="ui-header ui-bar-b">
<a title=" Home " data-icon="home" data-role="button"
data-theme="b" data-iconpos="notext" class="ui-btn-left
ui-btn ui-btn-icon-notext ui-btn-corner-all ui-shadow ui-btn-up-b">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text"> Home </span>
<span class="ui-icon ui-icon-home ui-icon-shadow"
data-form="ui-icon"></span>
</span>
</a>
<h1 aria-level="1" role="heading" tabindex="0" class="ui-title">B</h1>
<a title=" Navigation " data-icon="grid" data-role="button"
data-theme="b" data-iconpos="notext" class="ui-btn-right ui-btn
ui-btn-icon-notext ui-btn-corner-all ui-shadow ui-btn-up-b">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text"> Navigation </span>
<span class="ui-icon ui-icon-grid ui-icon-shadow"
data-form="ui-icon"></span>
</span>
</a>
</div>
<div role="main" data-role="content" data-form="ui-body-b"
data-theme="b" class="ui-content ui-body-b">
<p>
Sample text and <a data-theme="b" href="#"
data-form="ui-body-b" class="ui-link">links</a>.
</p>
<div data-role="fieldcontain" class="ui-field-contain
ui-body ui-br">
<fieldset data-role="controlgroup" class="ui-corner-all
ui-controlgroup ui-controlgroup-vertical">
<li data-form="ui-bar-b" role=""
data-role="list-divider" class="ui-li ui-li-divider
ui-btn ui-bar-b ui-corner-top ui-btn-up-undefined"
data-swatch="b">List Header</li>
<div class="ui-radio"><input type="radio" checked="checked"
value="choice-1" id="radio-choice-1-b" name="radio-choice-b">
<label class="ui-corner-none ui-btn ui-btn-icon-left
ui-radio-on ui-btn-up-b" data-form="ui-btn-up-b"
for="radio-choice-1-b" data-theme="b">
<span class="ui-btn-inner ui-corner-top">
<span class="ui-btn-text">Radio 1</span>
<span class="ui-icon ui-icon-shadow ui-icon-radio-on">
</span></span></label></div>
<div class="ui-radio"><input type="radio" value="choice-2"
id="radio-choice-2-b" name="radio-choice-b">
<label data-form="ui-btn-up-b" for="radio-choice-2-b"
data-theme="b" class="ui-btn ui-btn-icon-left ui-radio-off
ui-btn-up-b"><span class="ui-btn-inner"><span class="ui-btn-text">
Radio 2</span><span class="ui-icon ui-icon-shadow
ui-icon-radio-off"></span></span></label></div>
<div class="ui-checkbox"><input type="checkbox" checked="checked"
class="custom" id="checkbox-1" name="checkbox-1"><label
data-form="ui-btn-up-b" for="checkbox-1" data-theme="b"
class="ui-btn ui-btn-icon-left ui-corner-bottom ui-controlgroup-last
ui-checkbox-off ui-btn-up-b"><span class="ui-btn-inner ui-corner-bottom
ui-controlgroup-last"><span class="ui-btn-text">Checkbox</span>
<span class="ui-icon ui-icon-shadow ui-icon-checkbox-off"></span>
</span></label></div>
</fieldset>
</div>
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
<fieldset data-type="horizontal" data-role="controlgroup"
class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal">
<div class="ui-radio"><input type="radio" checked="checked"
value="list" id="radio-view-a-b" name="radio-view-b">
<label data-form="ui-btn-up-b" for="radio-view-a-b"
data-theme="b" class="ui-btn ui-radio-on ui-btn-active
ui-corner-left ui-btn-up-b"><span class="ui-btn-inner ui-corner-left">
<span class="ui-btn-text">On</span></span></label></div>
<div class="ui-radio"><input type="radio" value="grid"
id="radio-view-b-b" name="radio-view-b">
<label data-form="ui-btn-up-b" for="radio-view-b-b"
data-theme="b" class="ui-btn ui-radio-off ui-corner-right
ui-controlgroup-last ui-btn-up-b"><span class="ui-btn-inner
ui-corner-right ui-controlgroup-last">
<span class="ui-btn-text">Off</span></span></label></div>
</fieldset>
</div>
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
<div class="ui-select"><a href="#" role="button"
id="select-choice-1-button" aria-haspopup="true"
aria-owns="select-choice-1-menu" data-theme="b"
class="ui-btn ui-btn-icon-right ui-btn-corner-all
ui-shadow ui-btn-up-b" data-form="ui-btn-up-b">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Option 3</span>
<span class="ui-icon ui-icon-arrow-d ui-icon-shadow"
data-form="ui-icon"></span></span></a>
<select data-form="ui-btn-up-b" data-theme="b" data-native-menu="false"
id="select-choice-1" name="select-choice-1" tabindex="-1">
<option value="standard">Option 1</option>
<option value="rush">Option 2</option>
<option value="express">Option 3</option>
<option value="overnight">Option 4</option>
</select></div>
</div>
<input type="text" data-form="ui-body-b" class="input ui-input-text
ui-body-null ui-corner-all ui-shadow-inset ui-body-b" value="Text Input">
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
<input type="number" data-type="range" data-theme="b" data-form="ui-body-b"
max="100" min="0" value="0" name="slider" class="ui-slider-input
ui-input-text ui-body-b ui-corner-all ui-shadow-inset">
<div role="application" class="ui-slider ui-btn-down-b ui-btn-corner-all"
data-form="ui-btn-down-b" data-theme="b"><a class="ui-slider-handle ui-btn
ui-btn-corner-all ui-shadow ui-btn-up-b" href="#" data-theme="b" role="slider"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="36" aria-valuetext="36"
title="36" aria-labelledby="undefined-label" style="left: 36%;"
data-form="ui-btn-up-b"><span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text"></span></span></a></div>
</div>
<div data-theme="b" class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow
ui-btn-up-b" aria-disabled="false"><span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Button</span><span class="ui-icon ui-icon-star ui-icon-shadow">
</span></span><button data-form="ui-btn-up-b" data-theme="b" data-icon="star"
class="ui-btn-hidden" aria-disabled="false">Button</button></div>
</div>
</div>