iPhone WebApp mit jQueryMobile

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>

Dieser Beitrag wurde unter HTML5 abgelegt und mit , , , , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *