jquery - JQuery Mobile+Phone Gap：列表视图（表格视图）的格式化问题

Question

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

        <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>
         [...]