Question

我正在使用jQuery Mobile构建单页面应用程序。

在标题中，我有一个“菜单”按钮，用于打开带有列表视图的弹出窗口。

我想定义这个弹出对话框并将其重用于所有页面。

在页面外重用弹出窗口工作正常，但弹出窗口中的listview没有得到增强（因为listview内部使用父页面来解析列表中包含的链接）。

问题：是否可以在页面外使用listview小部件？（我知道我可能需要指定一个基本网址来实现，但我认为这不会有问题。）

Answer 1

不，不可能。当您创建一个动态弹出窗口时，它不会驻留在单个页面中，它将起作用，因为弹出窗口从未打算用于/页面。但是，另一方面，listview 要求列表位于父页面中。 listview的refresh方法期望它在父级中。查看在列表视图刷新时调用的此函数：

_createSubPages: function () {
    var parentList = this.element,
        parentPage = parentList.closest(".ui-page"), //<-- This line
        parentUrl = parentPage.jqmData("url"), 
        parentId = parentUrl || parentPage[0][$.expando],
        parentListId = parentList.attr("id"),
        o = this.options,
        dns = "data-" + $.mobile.ns,
        self = this,
        persistentFooterID = parentPage.find(":jqmData(role='footer')").jqmData("id"),
        hasSubPages;

      // blah blee blah

    }).listview();

请参阅函数中的第二行。它希望有一个页面。艰难的运气兄弟：）

PS：这是我能得到的最接近的：http://jsfiddle.net/hungerpain/8qq62/1/

修改

这是一种hacky方式。您可以在<span/> data-role=page中动态创建隐藏 div，并在其中添加<ul/>。然后你可以刷新它，之后你可以将它移动到动态弹出窗口。然后你将不得不删除隐藏的span元素。这是代码：

$.extend({ "makePopup": function (array) { //you could add more if you want here, such as callbacks to the click function of the button,etc. var $popup; //creat popup element $popup = $("<div/>", { "data-role": "popup", "data-theme": "a", "data-overlay-theme": "a", "data-transition": "pop" }).popup(); //create list $list = $("<ul/>", { "data-role": "listview", "id": "templist" }).html(function () { var li = []; for (var i = 0; i < array.length; i++) { li.push($("<li/>").html(array[i])); } return li; }) //create close element var $close = $("<a/>", { "data-role": "button", "html": "Close", "href": "#", "data-theme": "a" }).on("click", function () { //click event of close element $(this).closest("[data-role=popup]").popup("close"); }).buttonMarkup(); //add a span to page, refresh list, etc $.mobile.activePage.append("<span id='temp'></span>").find("#temp").hide().append($list).promise().done(function () { $(this).find("#templist").listview().listview("refresh"); }); //create content div - makes a nice jQM page structure. var $content = $("<div/>", { "data-role": "content", //move li to popup }).append($("#temp").find("#templist"), $close); //remove span $("#temp").remove(); //append $close to $content, then append $content to $popup $content.appendTo($popup) return $popup; } });

你可以将数组传递给它：

$.makePopup(["Sweet Child 'O Mine", "Summer of '69", "Smoke in the Water", "Enter Sandman", "I thought I've seen everything"]).popup("open");

这是一个更新的演示：http://jsfiddle.net/hungerpain/8qq62/7/

但显然这很黑。

初始化页面外的列表视图

1 个答案: