[英]Elements no longer inherit data-theme from parent
According to the jQuery Mobile Docs any form element inside a container will adopt the data-theme
of that container 根据jQuery Mobile Docs,容器内的任何表单元素都将采用该容器的
data-theme
Query Mobile has a rich theming system that gives you full control of how pages and forms are styled.
Query Mobile具有丰富的主题系统,可让您完全控制页面和表单的样式。 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.
可以将data-theme属性应用于任何单个表单元素,以应用任何带字母的主题色样,以在设计中创建对比度和重点。
However it seems that with the most recent release of jQuery Mobile (1.2) this is no longer true, I've noticed that form elements now inherit from the data-theme
of the page
instead of their more immediate parent. 但是,似乎在jQuery Mobile(1.2)的最新版本中这不再成立,我注意到表单元素现在从
page
的data-theme
继承,而不是从其更直接的父元素继承。
For example given the following markup 例如给出以下标记
<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: Jsbins:
Using JQM 1.1 the input, select and radio group will use the c theme swatch (inherited from the listview
), but when using JQM 1.2 the input, select and radio group will instead use the a swatch. 使用JQM 1.1,input,select和radio组将使用c主题色板(从
listview
继承),但是使用JQM 1.2时,input,select和radio组将使用a色板。
This seems to be the case even with container's that have the `data-role="fieldcontain" (such as the radio group in the example I provided). 即使对于具有`data-role =“ fieldcontain”的容器(例如,在我提供的示例中的无线电组),情况似乎也是如此。
Setting the data-theme
directly on the element still works but besides that I think the previous behavior makes for cleaner markup in my case I have quite a bit of markup and I would rather not have to go through each element and individually add the data-theme
. 将
data-theme
直接设置在元素上仍然可行,但除此之外,我认为以前的行为可以使标记更整洁,我有很多标记,我宁愿不必遍历每个元素并单独添加data-theme
。
Does any one know of some way to revert to the 1.1 behavior? 有谁知道某种还原到1.1行为的方式吗?
I still haven't found this change in behavior documented anywhere, but I've found a partial workaround for this issue. 我仍然没有在任何地方记录这种行为上的变化,但是我发现了针对此问题的部分解决方法。 Adding the swatch using the
ui-body-
(plus the letter for the swatch
) class causes the elements to inherit the data-theme from the parent. 使用
ui-body-
(加上swatch
的字母)类添加样例ui-body-
使元素从父级继承数据主题。
For example 例如
<ul data-role="listview" class="ui-body-c" data-inset="true" data-theme="c">
<li>
<input type="button" value="test" />
</li>
</ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.