元素不再從父級繼承數據主題

Question

根據jQuery Mobile Docs，容器內的任何表單元素都將采用該容器的data-theme

Query Mobile具有豐富的主題系統，可讓您完全控制頁面和表單的樣式。 默認情況下，容器內的所有表單元素將自動采用與其父元素相同的主題色樣。 這樣就可以以最少的工作將表單元素融合到其布局中。 可以將data-theme屬性應用於任何單個表單元素，以應用任何帶字母的主題色樣，以在設計中創建對比度和重點。

但是，似乎在jQuery Mobile（1.2）的最新版本中這不再成立，我注意到表單元素現在從page的data-theme繼承，而不是從其更直接的父元素繼承。

例如給出以下標記

<div data-role="page">
<div data-role="header"><h3>Header</h3></div>
<div data-role="content" data-theme="a">
      <ul data-role="listview" data-inset="true" data-theme="c">
        <li>
            <input type="button" value="test" />
        </li>
        <li>
            <select >
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
            </select>
        </li>
         <li>
           <div data-role="fieldcontain"  data-theme="c" >
         <fieldset data-role="controlgroup"  data-theme="c"  data-type="horizontal" >
            <legend>Group Size</legend>

            <input type="radio" name="testRdoGrp" id="testRdoGrp1" checked="checked" value="1" />
            <label for="testRdoGrp1">1</label>       
            <input type="radio" name="testRdoGrp" id="testRdoGrp2" value="2" />
            <label for="testRdoGrp2">2</label>

         </fieldset>
        </div>
        </li>
    </ul>
</div>
<div data-role="footer"><h3>Footer</h3></div>
</div>

Jsbins：

使用JQM 1.1

使用JQM 1.2

使用JQM 1.1，input，select和radio組將使用c主題色板（從listview繼承），但是使用JQM 1.2時，input，select和radio組將使用a色板。

即使對於具有`data-role =“ fieldcontain”的容器（例如，在我提供的示例中的無線電組），情況似乎也是如此。

將data-theme直接設置在元素上仍然可行，但除此之外，我認為以前的行為可以使標記更整潔，我有很多標記，我寧願不必遍歷每個元素並單獨添加data-theme 。

有誰知道某種還原到1.1行為的方式嗎？

Answer 1

我仍然沒有在任何地方記錄這種行為上的變化，但是我發現了針對此問題的部分解決方法。 使用ui-body- （加上swatch的字母）類添加樣例ui-body-使元素從父級繼承數據主題。

例如

<ul data-role="listview" class="ui-body-c" data-inset="true" data-theme="c">
    <li>
        <input type="button" value="test" />
    </li>
</ul>