Question

我实际上是使用ui-grid在我的页面上显示一些信息。这是基本结构：

<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>

然后，您可以通过设置data-rel =“dialog”：

从链接启动它

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

或代码：

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

<强> DEMO

<强>更新

虽然您没有提及它或为其添加标记，但看起来您可能正在使用jQueryUI对话框，而不是jQM对话框？如果是这样，请将对话框标记放在jQM data-role =“page”div中，并使用display：none;。然后，当您初始化对话框时，UL将看起来像jQM列表视图：

更新了 DEMO

在对话框中显示ui-grid

1 个答案: