jQuery Mobile+PhoneGap listViews：列表视图属性问题 Auto-Divider 和 Img Source 无法正常工作

Question

我已经使用 jQuery Mobile 和 Phone-Gap 实现了一个 iPhone 应用程序。

我需要两个要求：

1.按字母顺序设置分隔符（使用自动分隔符）

2。在行的左侧添加一个图像视图（使用 img src="egg.jpg"）

1.自动分配器：-

I used list-divides A,F,J,R for this table image 适合 少量数据 but for large amount of data we need to use 自动分隔符。

所以，我使用 AutoDividers 作为设置分隔符的最佳选项，如下所示但它不起作用。

我已经使用 listodividers 获得了图表中显示的上述格式

<ul data-role="listview" data-autodividers="true" class="ui-listview">
      <li><a href="astra.html">Astra</a></li>
      <li><a href="zappa.html">Frank Zappa</a></li>
      <li><a href="tull.html">Jethro Tull</a></li>
      <li><a href="radiohead.html">Radiohead</a></li>
      <li><a href="who.html">The Who</a></li>
    </ul>

2。图片来源

我使用 <img src="egg.jpg"/> 作为设置图像的最佳选项，如下所示但它不起作用。

<ul data-role="listview" data-autodividers="true" class="ui-listview">
                        <li><img src="egg.jpg"/> 
                            <a href="#egg" data-panel="main">Egg......</a>
                        </li>
                        <li><img src="egg.jpg"/>  
                            <a href="#egg" data-panel="main">Egg......</a>
                        </li>
                        <li><img src="egg.jpg"  class="ui-li-icom"/>  
                            <a href="#egg" data-panel="main">Egg......</a> 
                        </li>
                        <li><img src="album-bb.jpg" class="ui-li-thumb"/>
                            <a href="#egg" data-panel="main">Egg......</a>
                        </li>
                    </ul>

图像显示在文本上或单元格上方，用于列表项中提到的不同格式

Why these are not working for properly my app......?

我使用 xcode 4.1

Cordova 1.7.0 for phoneGap

Answer 1

这样使用

<li>
     <a href="#egg" data-panel="main">
         <img src="egg.jpg"/>  
         <p>Egg......</p>
     </a>
 </li>

Answer 2

我认为您的问题与 PhoneGap 无关。我建议您在 Chrome 或 Firefox 等浏览器中浏览您的页面，并使用开发人员工具检查您的 CSS。如果它在那里工作，然后在应用程序中尝试。