在對話框中顯示一個UI網格

Question

我實際上使用UI網格在我的頁面上顯示一些信息。這裏是基本結構：

<ul data-role="listview" data-inset="true" data-icon="false" style="min-width:350px"> 
       <li style="text-align: center !important"> 
        <label>SCHEDULE</label> 
       </li> 
       <li data-role="list-divider"> 
        <div class="ui-grid-b"> 
         <div class="ui-block-a" style="width:33%">Title 1</div> 
         <div class="ui-block-b" style="width:34%">Title 2</div> 
         <div class="ui-block-c" style="width:33%">Title 3</div> 
        </div> 
       </li> 
       <li> 
        <a href="#"> 
         <div class="ui-grid-b"> 
          <div class="ui-block-a" style="width:33%">Info1</div> 
          <div class="ui-block-b" style="width:34%">Info2</div> 
          <div class="ui-block-c" style="width:33%">Info3</div> 
         </div> 
        </a> 
       </li> 
</ul> 

現在我想要在對話框中有相同類型的結構。這是我如何初始化我的對話框：

<div id="dialog" class="dialog" title="Parts"> 
     <ul data-role="listview" data-inset="true" data-icon="false"> 
      <li data-role="list-divider"> 
       <div class="ui-grid-solo"> 
        <div class="ui-block-a">Header Name</div> 
       </div> 
      </li> 
      <li> 
       <a href="#"> 
        <div class="ui-grid-solo"> 
         <div class="ui-block-a">Info1</div> 
        </div> 
       </a> 
      </li> 
     </ul> 
    </div> 
(...) 
</body> 
<script> 
$('#dialog').dialog(
    { 
     autoOpen: false, 
    }); 

然後，一個按鈕裏面，我激活與該行的對話框：

$('#dialog').dialog('open'); 

出於某種原因，結果是不普通頁面和對話框內部相同。下面是它的外觀：在一個正常頁面

在對話框：

我搜索了很多關於這一點，我無法找到一個解決方案。任何理論將不勝感激。

P.S.我使用的是jQuery mobile 1.3.2。

Answer 1

一個JQM 1.3.x的對話是剛剛推出的對話框正常JQM頁面：

<div data-role="page" id="page2"> 
    <div data-role="header"> 
     <h1>My page</h1> 
    </div> 
    <div data-role="content"> 
     <ul data-role="listview" data-inset="true" data-icon="false" style="min-width:350px"> 
      <li style="text-align: center !important"> 
       <label>SCHEDULE</label> 
      </li> 
      <li data-role="list-divider"> 
       <div class="ui-grid-b"> 
        <div class="ui-block-a" style="width:33%">Title 1</div> 
        <div class="ui-block-b" style="width:34%">Title 2</div> 
        <div class="ui-block-c" style="width:33%">Title 3</div> 
       </div> 
      </li> 
      <li> <a href="#"> 
        <div class="ui-grid-b"> 
        <div class="ui-block-a" style="width:33%">Info1</div> 
        <div class="ui-block-b" style="width:34%">Info2</div> 
        <div class="ui-block-c" style="width:33%">Info3</div> 
        </div> 
       </a> 
      </li> 
     </ul> 
    </div> 
</div> 

然後，您可以設置數據的rel =「對話框中的」從鏈接啓動它：

<a href="#page2" data-rel="dialog">Open dialog</a> 

或代碼：

$.mobile.changePage("#page2", { 
    role: "dialog" 
}); 

DEMO

UPDATE：

你雖然沒有提到它或添加標記它，它看起來就像你可能會使用jQueryUI的對話框，而不是JQM對話框？如果是這樣，請將對話框標記放在jQM data-role =「page」div中，並顯示：none ;.然後，當你初始化的對話框中，UL會看起來像一個JQM列表視圖：

更新DEMO