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

追加された行はこの色です。
削除された行はこの色です。
jQuery Mobileによる自動装飾後のHTML へ行く。
[[jQuery Mobile を使用してスマホサイト構築]] > jQuery Mobileによる自動装飾後のHTML
* jQuery Mobileによる自動装飾後のHTML [#ce66cf46]

#html(<div style="padding-left:20px">)
各領域には、以下のように自動的にclassの追加やHTMLの変更が行われる。

*** data-role=header [#wa24ff7e]

装飾前
#mycode{{
&lt;div data-role="header" &gt;
ヘッダ領域
&lt;/div&gt;
}}

装飾後
#mycode{{
&lt;div data-role="header" class="ui-header ui-bar-a" role="banner"&gt;
ヘッダ領域
&lt;/div&gt;
}}

*** data-role=navbar [#te57761a]

装飾前
#mycode{{
&lt;div data-role="navbar" &gt;
ナビゲーション領域
&lt;/div&gt;
}}

装飾後
#mycode{{
&lt;div data-role="navbar" class="ui-navbar ui-mini" role="navigation"&gt;
ナビゲーション領域
&lt;/div&gt;
}}

*** data-role=content [#ca862f6f]

装飾前
#mycode{{
&lt;div data-role="content" &gt;
コンテンツ領域
&lt;/div&gt;
}}

装飾後
#mycode{{
&lt;div data-role="content" class="ui-content" role="main"&gt;
コンテンツ領域
&lt;/div&gt;
}}

*** data-role=footer [#le16119a]

装飾前
#mycode{{
&lt;div data-role="footer" &gt;
フッター
&lt;/div&gt;
}}

装飾後
#mycode{{
&lt;div data-role="footer" class="ui-footer ui-bar-a" role="contentinfo"&gt;
フッター
&lt;/div&gt;
}}

*** Aタグ [#yc4ce0c8]

装飾前
#mycode{{
&lt;a href="test.html"&gt;link1&lt;/a&gt;
}}

装飾後
#mycode{{
&lt;a href="test.html" class="ui-link"&gt;link1&lt;/a&gt;
}}

*** input type="button" [#l86acaf7]

装飾前
#mycode{{
&ltinput type="button" value="button1" &gt;
}}

装飾後
#mycode{{
&lt;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"&gt;
&lt;span class="ui-btn-inner"&gt;&lt;span class="ui-btn-text"&gt;button1&lt;/span>&lt;/span&gt;
&lt;input type="button" value="button1" class="ui-btn-hidden" data-disabled="false"&gt;
&lt;/div&gt;
}}

*** input type="text" [#a39ebd80]

装飾前
#mycode{{
&lt;input type="text" name="text1" value="" &gt;
}}

装飾後
#mycode{{
&lt;div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c"&gt;
&lt;input type="text" name="text1" value="" class="ui-input-text ui-body-c"&gt;
&lt;/div&gt;
}}

*** input type="submit" [#vf2817c0]

装飾前
#mycode{{
&lt;input type="submit" value="button1" &gt;
}}

装飾後
#mycode{{
&lt;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"&gt;
&lt;span class="ui-btn-inner"&gt;&lt;span class="ui-btn-text"&gt;button1&lt;/span&gt;&lt;/span&gt;
&lt;input type="submit" value="button1" class="ui-btn-hidden" data-disabled="false"&gt;
&lt;/div&gt;
}}

*** select [#a6dd7663]

装飾前
#mycode{{
&lt;select name="select1"&gt;
&lt;option value="value1"&gt;value1&lt;/option&gt;
&lt;option value="value2"&gt;value2&lt;/option&gt;
&lt;/select&gt;
}}

装飾後
#mycode{{
&lt;div class="ui-select"&gt;
    &lt;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"&gt;
        &lt;span class="ui-btn-inner"&gt;
            &lt;span class="ui-btn-text"&gt;&lt;span&gt;value1&lt;/span&gt;&lt;/span&gt;
            &lt;span class="ui-icon ui-icon-arrow-d ui-icon-shadow"&gt;&nbsp;&lt;/span&gt;
        &lt;/span&gt;
        &lt;select name="select1"&gt;
        &lt;option value="value1"&gt;value1&lt;/option&gt;
        &lt;option value="value2"&gt;value2&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;
&lt;/div&gt;
}}

*** input type="checkbox" [#ea72ffac]

装飾前
#mycode{{
&lt;label for="checkbox1" &gt;checkbox1&lt;/label&gt;
&lt;input type="checkbox" id="checkbox1" name="checkbox1" value="1"&gt;
}}

装飾後
#mycode{{
&lt;div class="ui-checkbox"&gt;
    &lt;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"&gt;
        &lt;span class="ui-btn-inner"&gt;
            &lt;span class="ui-btn-text"&gt;checkbox1&lt;/span&gt;
            &lt;span class="ui-icon ui-icon-checkbox-off ui-icon-shadow"&gt;&amp;nbsp;&lt;/span&gt;
        &lt;/span&gt;
    &lt;/label&gt;
    &lt;input type="checkbox" id="checkbox1" name="checkbox1" value="1"&gt;
&lt;/div&gt;
}}
※チェックボックスがON状態になった時は、data-icon=checkbox-onに、classが ui-checkbox-on、ui-icon-checkbox-on に変わる。

*** input type="radio" [#r5b7aeb5]

#html(</div>)