javascript - 元素不再从父级继承数据主题

Question

根据jQuery Mobile Docs容器内的任何表单元素都将采用该容器的data-theme

Query Mobile has a rich theming system that gives you full control of how pages and forms are styled. By default all form elements inside a container will automatically adopt the same theme color swatch as their parent. This allows form elements to blend into their layouts with minimal work. The data-theme attribute can be applied to any individual form element to apply any of the lettered theme color swatches to create contrast and emphasis in your designs.

然而，随着 jQuery Mobile (1.2) 的最新版本的出现，情况似乎不再如此，我注意到表单元素现在继承自 的 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:

With JQM 1.1

With JQM 1.2

使用 JQM 1.1 时，输入、选择和单选组将使用 c 主题 样本(继承自 listview)，但使用 JQM 1.2 时，输入、选择和单选组将使用radio 组将使用 a 样本。

即使容器具有“data-role=”fieldcontain”(例如我提供的示例中的单选组)，情况似乎也是如此。

直接在元素上设置data-theme仍然有效，但除此之外，我认为以前的行为可以使标记更清晰，在我的情况下，我有相当多的标记，我宁愿不必遍历每个元素并单独添加数据主题。

有人知道某种方法可以恢复到 1.1 行为吗？

Answer 1

我仍然没有在任何地方发现这种行为变化的记录，但我已经找到了此问题的部分解决方法。使用 ui-body-(加上 swatch 的字母)类添加样本会导致元素从父级继承数据主题。

例如

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