jQuery Mobile的只有一个许多列表项弹出 [英] jquery mobile only one popup for many list items

问题描述

我有以下的code与为每个列表项选项弹出一个jQuery Mobile的列表视图。

想只有一个，其中的链接的id传递给它，而不是每个列表项目的新popuo的弹出窗口。怎样才能ID传递到弹出？

 ＆LT; D​​IV数据角色=页面＆GT;
        ＆LT; D​​IV数据角色=头＆GT;
             ＆LT; H1＆gt;我的网页＆LT; / H1＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV数据角色=内容＆GT;
            ＆LT; UL数据角色=列表视图＆GT;
                ＆LT;李＆GT;＆LT; A HREF =＃thepopupID =5数据的rel =弹出数据位置为=窗口数据过渡=啪＆GT;＆LT; H2＆GT;项目1＆LT; / H 2＆GT;＆下; / A＆GT;                ＆LT; /李＆GT;
                ＆LT;李＆GT;＆LT; A HREF =＃购买ID =6数据相对=弹出数据位置为=窗口数据过渡=啪＆GT;＆LT; H2＆GT;项目2版; / H 2＆GT;＆下; / A＆GT;
            ＆LT; P＆GT;项目2描述＆LT; / P＆GT;＆LT; / A＆GT;                ＆LT; /李＆GT;
            ＆LT; / UL＆GT;
            ＆LT; D​​IV数据角色=弹出ID =thepopup＆GT;
                ＆LT; UL数据角色=列表视图＆GT;
                    ＆LT;立GT;＆LT; A HREF =view.php的id = 5？＆gt;查看详情＆LT; / A＆GT;＆LT; /李＆GT;
这里的5应高于点击项目的ID
                    ＆LT;立GT;＆LT; A HREF =？edit.php ID = 5＆gt;编辑＆LT; / A＆GT;＆LT; /李＆GT;
                    ＆LT;立GT;＆LT;数据-REL =后面的href =＃＆GT;取消＆LT; / A＆GT;＆LT; /李＆GT;
                ＆LT; / UL＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
 

解决方案

首先，弹出的DIV应该是直接孩子的页的DIV。

其次，你可以调用的弹出的编程在单击列表项。点击后，检索的点击项的ID 的并将其添加到在弹出的链接，然后打开它。

  $（李一）。在（点击，功能（E）{    //获取ID
    VAR ITEM_ID = $（本）.attr（ID）;    //在弹出的id为更新链接检索
    //排除取消按钮[数据相对=回]
    $（＃thepopup李一：没有（：jqmData（相对=回））），每个（函数（）{。
        VAR电流= $（本）.attr（的href）分裂（=）。
        变种HREF =当前[0] +=+ ITEM_ID;
        $（本）.attr（HREFHREF）;
    }）;    //打开弹出与期望的转变
    $（＃thepopup）。弹出（开放，{
        转型：啪
    }）;
}）;
 

  

演示

I have the following code for a jquery mobile list view with popup of options for each list item.

Would like to have only one popup where the id of the link is passed to it instead of a new popuo for each list item. How can one pass the id into the popup?

    <div data-role="page">
        <div data-role="header">
             <h1>My page</h1> 
        </div>
        <div data-role="content">
            <ul data-role="listview">
                <li><a href="#thepopup" id="5" data-rel="popup" data-position-to="window" data-transition="pop"><h2>Item 1</h2></a>

                </li>
                <li><a href="#purchase" id="6" data-rel="popup" data-position-to="window" data-transition="pop"><h2>Item 2</h2></a>
            <p>Item 2 description</p></a>

                </li>
            </ul>
            <div data-role="popup" id="thepopup">
                <ul data-role="listview">
                    <li><a href="view.php?id=5">View details</a></li> 
HERE THE "5" SHOULD BE THE ID OF THE ITEM CLICKED ABOVE
                    <li><a href="edit.php?id=5">Edit</a></li>
                    <li><a data-rel="back" href="#">Cancel</a></li>
                </ul>
            </div>
        </div>
    </div>

解决方案

First off, popup div should be a direct child of page div.

Secondly, you can call popup programmatically upon clicking a list item. Once clicked, retrieve id of clicked item and add it to links in popup, then open it.

$("li a").on("click", function (e) {

    // retrieve id
    var item_id = $(this).attr("id");

    // update links in popup with id retrieved
    // exclude cancel button [data-rel=back]
    $("#thepopup li a:not(:jqmData(rel=back))").each(function () {
        var current = $(this).attr("href").split("=");
        var href = current[0] + "=" + item_id;
        $(this).attr("href", href);
    });

    // open popup with desired transition
    $("#thepopup").popup("open", {
        "transition": "pop"
    });
});

Demo

这篇关于jQuery Mobile的只有一个许多列表项弹出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！