问题描述
这是我的HTML：
< body>
< li data-icon =viewpolicydata-iconpos =left>< a href =pages / myPolicy / myPolicy.html>查看我的政策< / a>< / li> ;
< li>< a class =ui-icon-viewidcardshref =pages / autoVehicles / autoVehicles.html>查看自动ID卡< / a>< / li>
< li>< a class =ui-icon-paybillhref =pages / payMyBill / payMyBill.html> Pay My Bill< / a>< / li>
< li>< a class =ui-icon-roadsidehref =pages / roadside / roadside.html>路边/意外援助< / a>< / li>
< a>< a class =ui-icon-claimscenterhref =pages / claimCenter / claimCenter.html> Claim Center< / a>< / li>
< / ul>
< / body>
以下是我用Chrome浏览它时Element的外观：
< ul data-role =listviewdata-inset =truedata-iconpos =left
data-theme = content-list-main
class =ui-listview ui-listview -inset ui-corner-all ui-shadow>
data-shadow =falsedata-iconshadow =truedata-wrapperels = div
data-theme =content-list-main
class =ui-btn ui-btn-icon-right ui-li-have-arrow ui-li ui-first-child ui-last-child ui-btn-up-content-list-main>
< div class =ui-btn-inner ui-li>
< div class =ui-btn-text>
< a href =pages / myPolicy / myPolicy.htmlclass =ui-link-inherit>查看我的政策< / a>
< / div>
< span class =ui-icon ui-icon-viewpolicy ui-icon-shadow>& nbsp;< / span>
< / div>
< / li>
< / ul>
请注意，由于某些原因，li的属性呈现为data-iconpos =right。
这里是加载的JS文件：
< script src =js /的jquery-1.10.2.js>< /脚本>
< script src =js / jquery.mobile-1.3.2.js>< / script>
任何想法为什么data-iconpos =left根本就不会粘住？
谢谢
我找到了问题的根源。
$ b
在jquery.mobile-1.3.2.js的第6322行中，您会发现以下代码块：
if（create ||！item.hasClass（ui-li））{
itemTheme = item.jqmData（theme）|| o.theme;
a = this._getChildrenByTagName（item [0]，a，A）;
var isDivider =（item.jqmData（role）===list-divider）;
if（a.length&！isDivider）{
icon = item.jqmData（icon）;
item.buttonMarkup（{
wrapperEls：div，
shadow：false，
corners：false，
iconpos：right，
icon：a.length> 1 || icon === false？false：icon || listicon || o.icon，
theme：itemTheme
}）;
你可以在第6334行看到iconpos被硬编码为正确。我不知道他们为什么这样做。我可以理解一个默认值，但我没有理由使用硬编码值。使用一个简单的变量来试图为li提供iconpos提供了一个合适的解决方案。
if（create ||！item .hasClass（ui-li））{
itemTheme = item.jqmData（theme）|| o.theme;
a = this._getChildrenByTagName（item [0]，a，A）;
var isDivider =（item.jqmData（role）===list-divider）;
var ipos = item.jqmData（iconpos）|| 对;
if（a.length&！isDivider）{
icon = item.jqmData（icon）;
item.buttonMarkup（{
wrapperEls：div，
shadow：false，$ b $ corner：false，
iconpos：ipos，
icon：a.length> 1 || icon === false？false：icon || listicon || o.icon，
theme：itemTheme
}）;
我已经用可能的iconpos值进行了测试，完全没有这个属性，它的行为正确到目前为止所有情况。
请让我知道是否有人知道为什么这个值需要被硬编码为正确......但我相当有信心实际上使data-iconpos正确运行是必要的。
Here is my HTML:
<body>
<ul data-role="listview" data-inset="true" data-iconpos="left" data-theme="content-list-main">
<li data-icon="viewpolicy" data-iconpos="left"><a href="pages/myPolicy/myPolicy.html">View My Policy</a></li>
<li><a class="ui-icon-viewidcards" href="pages/autoVehicles/autoVehicles.html">View Auto ID Cards</a></li>
<li><a class="ui-icon-paybill" href="pages/payMyBill/payMyBill.html">Pay My Bill</a></li>
<li><a class="ui-icon-roadside" href="pages/roadside/roadside.html">Roadside/Accident Assistance</a></li>
<li><a class="ui-icon-claimscenter" href="pages/claimCenter/claimCenter.html">Claim Center</a></li>
</ul>
</body>
Here is what the Element looks like when I inspect it with Chrome:
<ul data-role="listview" data-inset="true" data-iconpos="left"
data-theme="content-list-main"
class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
<li data-icon="viewpolicy" data-iconpos="right" data-corners="false"
data-shadow="false" data-iconshadow="true" data-wrapperels="div"
data-theme="content-list-main"
class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-first-child ui-last-child ui-btn-up-content-list-main">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="pages/myPolicy/myPolicy.html" class="ui-link-inherit">View My Policy</a>
</div>
<span class="ui-icon ui-icon-viewpolicy ui-icon-shadow"> </span>
</div>
</li>
</ul>
Notice the li's attribute renders as data-iconpos="right" for some reason.
Here's the JS files being loaded:
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.mobile-1.3.2.js"></script>
Any ideas why data-iconpos="left" simply won't stick?
Thanks
I found the source of the problem.
In jquery.mobile-1.3.2.js, line 6322, you will find the following chunk of code:
if ( create || !item.hasClass( "ui-li" ) ) {
itemTheme = item.jqmData( "theme" ) || o.theme;
a = this._getChildrenByTagName( item[ 0 ], "a", "A" );
var isDivider = ( item.jqmData( "role" ) === "list-divider" );
if ( a.length && !isDivider ) {
icon = item.jqmData( "icon" );
item.buttonMarkup({
wrapperEls: "div",
shadow: false,
corners: false,
iconpos: "right",
icon: a.length > 1 || icon === false ? false : icon || listicon || o.icon,
theme: itemTheme
});
You can see right there on line 6334 that the iconpos gets hardcoded to "right". I have no idea why they are doing this. I can understand a default value, but there's no reason for a hardcoded value as I can see. Utilizing a simple variable that will attempt to pull the iconpos for the li provides a suitable fix.
if ( create || !item.hasClass( "ui-li" ) ) {
itemTheme = item.jqmData( "theme" ) || o.theme;
a = this._getChildrenByTagName( item[ 0 ], "a", "A" );
var isDivider = ( item.jqmData( "role" ) === "list-divider" );
var ipos = item.jqmData("iconpos") || "right";
if ( a.length && !isDivider ) {
icon = item.jqmData( "icon" );
item.buttonMarkup({
wrapperEls: "div",
shadow: false,
corners: false,
iconpos: ipos,
icon: a.length > 1 || icon === false ? false : icon || listicon || o.icon,
theme: itemTheme
});
I've tested this with possible iconpos values and the complete lack of the attribute altogether and it behaves correctly in all situations thus far.
Please let me know if anyone knows why that value would need to be hardcoded to "right" ... but I'm pretty confident this change is necessary to actually make data-iconpos behave properly.
这篇关于数据iconpos = QUOT;左"变成data-iconpos =“right”当页面呈现时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！