Question

我正在尝试创建一个非常基本的listview弹出窗口。我只是看不到它的工作。这是我到目前为止的代码

        <div data-role="page">
        <div data-role="content">
            <div id="map"></div>
            <a href="#filter" class="map_buttons" id="map_filter_button" data-rel="dialog">Filter</a>
            <a href="#menu" class="map_buttons" id="map_manu_button" data-rel="dialog">Menu</a>
            <a href="#report_popupMenu" class="map_buttons" id="map_report_button" data-rel="popup" data-inline="true" data-transition="slideup">Report</a>
        </div>
    </div>

<div id="report_popupMenu" data-role="popup">
    <ul id="report_categories" data-role="listview" data-inset="true\" style="width:210px;">
        <li data-role=\"divider\" data-theme=\"b\">Choose Category.</li>
        <li  data-theme=\"b\">Choose Category.</li>
        <li  data-theme=\"b\">Choose Category.</li>
        <li data-theme=\"b\">Choose Category.</li>
    </ul>
</div>

<div id="report_popupMenu" data-role="popup">
    <ul id="report_categories" data-role="listview" data-inset="true\" style="width:210px;">
        <li data-role=\"divider\" data-theme=\"b\">Choose Category.</li>
        <li  data-theme=\"b\">Choose Category.</li>
        <li  data-theme=\"b\">Choose Category.</li>
        <li data-theme=\"b\">Choose Category.</li>
    </ul>
</div>

我正在使用以下CDN

我希望弹出窗口位于屏幕的中心。我所做的一直是关注这个网站http://view.jquerymobile.com/1.3.0/docs/widgets/popup/#&ui-state=dialog，但它只是不起作用。任何帮助将不胜感激。

以下是从配置文件中加载

的代码

$(document).ready(function() {

var map = null;
init();
popuateCat();
function init() {
    var mapProp = {
        center : new google.maps.LatLng(51.508742, -0.120850),
        zoom : 5,
        mapTypeId : google.maps.MapTypeId.ROADMAP,
        disableDefaultUI : true,
    };
    map = new google.maps.Map(document.getElementById("map"), mapProp);

}

function popuateCat() {

    $.ajax({
        url : "configs/reportCatagories.config",
        dataType : "xml",
        success : function(data) {
        $("#report_categories").append("<li data-role=\"divider\" data-theme=\"b\">Choose Category.</li>");
            $(data).find("Category").each(function() {
                var dataString = $(this).text();
                var cat = '<li><a href=\"#newReport\" id=\"' + dataString + '\">' + dataString + '</a></li>';
                $("#report_categories").append(cat);
            });
        }
    });

}

}）;

Answer 1

工作示例：http://jsfiddle.net/Gajotres/QGhYN/

属性 data-position-to="window" 会添加到弹出式div中。它将以弹出窗口为中心。

<div data-role="page" id="index">
    <div data-theme="b" data-role="header">
        <h1>Index page</h1>
    </div>

    <div data-role="content">
        <a href="#report_popupMenu" data-rel="popup" data-role="button" data-inline="true" data-transition="pop">Basic Popup</a>
        <div id="report_popupMenu" data-role="popup" data-position-to="window">
            <ul id="report_categories" data-role="listview" data-inset="true\" style="width:210px;">
                <li data-role=\"divider\" data-theme=\"b\">Choose Category.</li>
                <li  data-theme=\"b\">Choose Category.</li>
                <li  data-theme=\"b\">Choose Category.</li>
                <li data-theme=\"b\">Choose Category.</li>
            </ul>
        </div>
    </div>
</div>

Answer 2

根据文档，你必须将弹出div放在页面div中。像这样：

<div data-role="page">
  <div data-role="popup">
  </div>
</div>

我相信你的不在页面div中，检查你的结束div标签。

制作列表视图弹出窗口

2 个答案: