data-iconpos=“left” turning into data-iconpos=“right” when page renders

问题

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">&nbsp;</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

回答1:

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.

来源：https://stackoverflow.com/questions/20124808/data-iconpos-left-turning-into-data-iconpos-right-when-page-renders

标签

jquery

html

jquery-mobile