jQuery Mobileによる自動装飾後のHTML - 闘うITエンジニアの覚え書き

各領域には、以下のように自動的にclassの追加やHTMLの変更が行われる。

data-role=header †

装飾前

<div data-role="header" >
ヘッダ領域
</div>

装飾後

<div data-role="header" class="ui-header ui-bar-a" role="banner">
ヘッダ領域
</div>

data-role=navbar †

装飾前

<div data-role="navbar" >
ナビゲーション領域
</div>

装飾後

<div data-role="navbar" class="ui-navbar ui-mini" role="navigation">
ナビゲーション領域
</div>

data-role=content †

装飾前

<div data-role="content" >
コンテンツ領域
</div>

装飾後

<div data-role="content" class="ui-content" role="main">
コンテンツ領域
</div>

data-role=footer †

装飾前

<div data-role="footer" >
フッター
</div>

装飾後

<div data-role="footer" class="ui-footer ui-bar-a" role="contentinfo">
フッター
</div>

Aタグ †

装飾前

<a href="test.html">link1</a>

装飾後

<a href="test.html" class="ui-link">link1</a>

input type="button" †

装飾前

<input type="button" value="button1" >

装飾後

<div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span"
      data-theme="c" data-disabled="false" class="ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all" aria-disabled="false">
<span class="ui-btn-inner"><span class="ui-btn-text">button1</span></span>
<input type="button" value="button1" class="ui-btn-hidden" data-disabled="false">
</div>

input type="text" †

装飾前

<input type="text" name="text1" value="" >

装飾後

<div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c">
<input type="text" name="text1" value="" class="ui-input-text ui-body-c">
</div>

input type="submit" †

装飾前

<input type="submit" value="button1" >

装飾後

<div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span"
     data-theme="c" data-disabled="false" class="ui-submit ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" aria-disabled="false">
<span class="ui-btn-inner"><span class="ui-btn-text">button1</span></span>
<input type="submit" value="button1" class="ui-btn-hidden" data-disabled="false">
</div>

select †

装飾前

<select name="select1">
<option value="value1">value1</option>
<option value="value2">value2</option>
</select>

装飾後

<div class="ui-select">
    <div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="arrow-d"
            data-iconpos="right" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-right ui-btn-up-c">
        <span class="ui-btn-inner">
            <span class="ui-btn-text"><span>value1</span></span>
            <span class="ui-icon ui-icon-arrow-d ui-icon-shadow"> </span>
        </span>
        <select name="select1">
        <option value="value1">value1</option>
        <option value="value2">value2</option>
        </select>
    </div>
</div>

input type="checkbox" †

装飾前

<label for="checkbox1" >checkbox1</label>
<input type="checkbox" id="checkbox1" name="checkbox1" value="1">

装飾後

<div class="ui-checkbox">
    <label for="checkbox1" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span"
                data-icon="checkbox-off" data-theme="c" data-mini="false"
                class="ui-checkbox-off ui-btn ui-btn-corner-all ui-fullsize ui-btn-icon-left ui-btn-up-c">
        <span class="ui-btn-inner">
            <span class="ui-btn-text">checkbox1</span>
            <span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">&nbsp;</span>
        </span>
    </label>
    <input type="checkbox" id="checkbox1" name="checkbox1" value="1">
</div>

※チェックボックスがON状態になった時は、data-icon=checkbox-onに、classが ui-checkbox-on、ui-icon-checkbox-on に変わる。

input type="radio" †