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

Question

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

我需要两个要求：

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

2。将图像视图添加到行的左侧（使用img src =“egg.jpg”）

1。 Auto Deviders： -

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

所以，我使用了AutoDividers 作为设置deviders的最佳选项，如下所示但不起作用。

我使用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。 Imgae Src

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

<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。如果它在那里工作，那么在应用程序中尝试。