Question

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

Query Mobile拥有丰富的主题系统，可让您完全控制如何设置页面和表单的样式。默认情况下，所有表单元素都在容器将自动采用相同的主题颜色样本他们的父母。这允许表单元素混合到它们的布局中最小的工作。 data-theme属性可以应用于任何单独的表单元素，用于应用任何字母主题颜色在您的设计中创建对比度和重点。

然而，似乎最近发布的jQuery Mobile（1.2）已经不再适用了，我注意到表单元素现在继承自data-theme的{{1}}而不是他们的page更直接的父母。

例如，给出以下标记

<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输入，select和radio组将使用 c主题 swatch（继承自listview），但当使用JQM 1.2输入时，select和radio group将而是使用 a 样本。

即使容器具有`data-role =“fieldcontain”（例如我提供的示例中的无线电组），情况似乎也是如此。

直接在元素上设置data-theme仍然有效但除此之外我认为之前的行为在我的情况下使得更清晰的标记我有相当多的标记，我宁愿不必遍历每个元素和单独添加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>

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

1 个答案: