JQuery Mobile + Phonegap：探讨列表视图的形成（表视图）

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 如下图所示

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