JQuery Mobile+Phonegap：列表视图（table view）形成的探测

Question

我使用以下 jQuery mobile phonegap 代码实现了一个left side list view in split view

        <div data-role="page"  id="main" data-hash="false">

            <div data-role="header">
                <h1>Main</h1>
            </div><!-- /header -->

            <div data-role="content" data-theme="c">    




                <ul data-role="listview" data-theme="c" data-header-theme="a">





                    <li>first Row contains 8 list items
                        <ul>
                            <li data-role="list-divider" data-header-theme="c">One item</li>  <!----------- Section Header -------->
                            <li><a href="#siteInfo" data-panel="main">One item</a></li>
                            <li><a href="#siteContacts" data-panel="main">One itemts</a></li>
                            <li><a href="#siteProviders" data-panel="main">One item</a></li>

                            <li data-role="list-divider" data-divider-theme="c">One item</li>  <!---------- Section Header -------->
                            <li><a href="#equipment" data-panel="main">One item</a></li>
                            <li><a href="#scroll" data-panel="main">One itemrts</a></li>
                            <li><a href="#context" data-panel="main">One iteme</a></li>
                            <li><a href="#context" data-panel="main">Data commissioned</a></li>
                        </ul>
                    </li>
                    <li>Second Row contains 8 list items
                        <ul>
                            <li data-role="list-divider" data-header-theme="a">One item</li> 
                            <li><a href="#siteInfo" data-panel="main">One item</a></li>
                            <li><a href="#siteContacts" data-panel="main">One itemts</a></li>
                            <li><a href="#siteProviders" data-panel="main">One item</a></li>

                            <li data-role="list-divider" data-divider-theme="c">One item</li>  <!---------- Section Header -------->
                            <li><a href="#equipment" data-panel="main">One item</a></li>
                            <li><a href="#scroll" data-panel="main">One itemrts</a></li>
                            <li><a href="#context" data-panel="main">One iteme</a></li>
                            <li><a href="#context" data-panel="main">Data commissioned</a></li>                     
                        </ul>
                    </li>


                    <li>3rd Row contains 8 list items
                        <ul>
                            <li data-role="list-divider" data-header-theme="c">One item</li>  <!----------- Section Header -------->
                            <li><a href="#siteInfo" data-panel="main">One item</a></li>
                            <li><a href="#siteContacts" data-panel="main">One itemts</a></li>
                            <li><a href="#siteProviders" data-panel="main">One item</a></li>

                            <li data-role="list-divider" data-divider-theme="c">One item</li> 
                            <li><a href="#equipment" data-panel="main">One item</a></li>
                            <li><a href="#scroll" data-panel="main">One itemrts</a></li>
                            <li><a href="#context" data-panel="main">One iteme</a></li>
                            <li><a href="#context" data-panel="main">Data commissioned</a></li>
                        </ul>
                    </li>
                    <li>4th Row contains 8 list items
                        <ul>
                            <li data-role="list-divider" data-header-theme="a">One item</li>  
                            <li><a href="#siteInfo" data-panel="main">One item</a></li>
                            <li><a href="#siteContacts" data-panel="main">One itemts</a></li>
                            <li><a href="#siteProviders" data-panel="main">One item</a></li>

                            <li data-role="list-divider" data-divider-theme="c">One item</li>  
                            <li><a href="#equipment" data-panel="main">One item</a></li>
                            <li><a href="#scroll" data-panel="main">One itemrts</a></li>
                            <li><a href="#context" data-panel="main">One iteme</a></li>
                            <li><a href="#context" data-panel="main">Data commissioned</a></li>                     
                        </ul>
                    </li>

当我在 xcode 中执行 jQuery 时工作正常，但表格视图如下所示，但不是正常的列表视图

list items are in a separate box but not as a list如下图所示

但我想要一个 normal list，如下图 2 所示

Answer 1

我认为您不能像以前那样嵌套listview - 要么将外部列表放入list-divider 标记中，要么将多个listview 列表一个接一个地创建。

也就是说，要么这样：

<div data-role="content" data-theme="c">    
    <ul data-role="listview" data-theme="c" data-header-theme="a">
         <li data-role="list-divider" data-header-theme="c">first Row contains 8 list items</li>  <!----------- Section Header -------->
         <li><a href="#siteInfo" data-panel="main">One item</a></li>
         <li><a href="#siteContacts" data-panel="main">One itemts</a></li>
         <li><a href="#siteProviders" data-panel="main">One item</a></li>

         <li data-role="list-divider" data-divider-theme="c">One item</li>  <!---------- Section Header -------->
         <li><a href="#equipment" data-panel="main">One item</a></li>
         <li><a href="#scroll" data-panel="main">One itemrts</a></li>
         <li><a href="#context" data-panel="main">One iteme</a></li>
         <li><a href="#context" data-panel="main">Data commissioned</a></li>

         <li data-role="list-divider" data-header-theme="c">Second Row contains 8 list items</li>  <!----------- Section Header -------->
         <li data-role="list-divider" data-header-theme="a">One item</li> 
         <li><a href="#siteInfo" data-panel="main">One item</a></li>
         <li><a href="#siteContacts" data-panel="main">One itemts</a></li>
         [...]

或者像这样：

<div data-role="content" data-theme="c">    
    <ul data-role="listview" data-theme="c" data-header-theme="a">
         <li data-role="list-divider" data-header-theme="c">first Row contains 8 list items</li>  <!----------- Section Header -------->
         <li><a href="#siteInfo" data-panel="main">One item</a></li>
         <li><a href="#siteContacts" data-panel="main">One itemts</a></li>
         <li><a href="#siteProviders" data-panel="main">One item</a></li>

         <li data-role="list-divider" data-divider-theme="c">One item</li>  <!---------- Section Header -------->
         <li><a href="#equipment" data-panel="main">One item</a></li>
         <li><a href="#scroll" data-panel="main">One itemrts</a></li>
         <li><a href="#context" data-panel="main">One iteme</a></li>
         <li><a href="#context" data-panel="main">Data commissioned</a></li>
    </ul>

    <ul data-role="listview" data-theme="c" data-header-theme="a">
         <li data-role="list-divider" data-header-theme="c">Second Row contains 8 list items</li>  <!----------- Section Header -------->
         <li data-role="list-divider" data-header-theme="a">One item</li> 
         <li><a href="#siteInfo" data-panel="main">One item</a></li>
         <li><a href="#siteContacts" data-panel="main">One itemts</a></li>
         [...]