Question

这是我的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>

以下是我使用Chrome检查时Element的外观：

<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">&nbsp;</span>
           </div>
        </li>
    </ul>

请注意，由于某种原因，li的属性呈现为data-iconpos =“right”。

这是正在加载的JS文件：

<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.mobile-1.3.2.js"></script>

为什么data-iconpos =“left”的任何想法都不会坚持下去？

由于

Answer 1

我找到了问题的根源。

在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被硬编码为“right”。我不知道为什么他们这样做。我可以理解默认值，但我没有理由看到硬编码值。利用一个简单的变量来尝试拉动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") || "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
                });

我用可能的iconpos值测试了这个，完全没有属性，到目前为止在所有情况下都能正常运行。

如果有人知道为什么这个值需要硬编码为“正确”，请告诉我......但我非常有信心这一变化对于实际使data-iconpos正常运行是必要的。

data-iconpos =“left”在页面渲染时变成data-iconpos =“right”

1 个答案: