1

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

Query Mobile 拥有丰富的主题系统，可让您完全控制页面和表单的样式。默认情况下，容器内的所有表单元素将自动采用与其父级相同的主题色板。这允许表单元素以最少的工作融入其布局。data-theme 属性可以应用于任何单独的表单元素，以应用任何字母主题色板来在您的设计中创建对比和强调。

然而，随着 jQuery Mobile (1.2) 的最新版本，这似乎不再正确，我注意到表单元素现在继承自data-themeofpage而不是它们更直接的父级。

例如给出以下标记

<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>

杰宾斯：

使用 JQM 1.1

使用 JQM 1.2

使用 JQM 1.1 时，输入、选择和单选组将使用c 主题色板（继承自listview），但在使用 JQM 1.2 时，输入、选择和单选组将改为使用a色板。

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

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

有谁知道恢复到 1.1 行为的某种方法？

4

1 回答 1

0

我仍然没有在任何地方发现这种行为变化，但我找到了解决这个问题的部分解决方法。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>
于 2012-11-08T22:06:22.383 回答