在 jQuery Mobile 中激活弹出窗口

Posted 2023-05-09

【中文标题】在 jQuery Mobile 中激活弹出窗口

【英文标题】：Activating Popup in jQuery Mobile

【发布时间】：2016-10-01 15:38:36

【问题描述】：

我在 jQuery Mobile 应用程序中将一堆会议会话信息格式化为列表视图小部件。目前，我在每个 li 中都有一个段落，其中包含更长的会话描述，并且我将其样式设置为 display:none。我已经将整个 li 包裹在一个目前无处可去的链接中。我正在寻找有关如何在有人单击 li 时以编程方式将隐藏段落作为弹出小部件打开的帮助。通常我认为弹出激活链接与 div 的唯一 id 相关，而我的许多会话描述目前没有。而且我的内容在 href 元素中，而不是与它分开。有人可以建议一个明智的方法来弹出这个隐藏的段落吗？我希望避免为每个描述创建单独的 id，甚至可能避免将段落包装在弹出的特殊 div 中。这是我当前的 li 代码...

<li class="preconference_1-day"><a href="#">
<h3>Conflict Management and Peacebuilding as a Clas-s-room Management Tool</h3>
<p> Presented by <strong>Some University</strong></p>
<p>Location: McPherson Lab, Room 1035</p>
<p class="ui-li-aside"><strong>9:00 AM</strong></p>
<p style="display:none">Description: Participants will be introduced to a...</p></a>
</li>   

我正在使用 jquery-2.2.4 和 jquery.mobile-1.4.5

【参考方案1】：

一个简单的方法是使用 data 属性来存储额外的信息

例如 <li data-extra="Description: The second set..." class="preconference_1-day">

代码

//The list item click function
$("#listview > li").on("click", function() 
//Get whats in the data attribute from item clicked
var extra = $(this).attr("data-extra");
//Empty whats inside the popup, append data, and open the popup
$("#mypopup").empty().append("<p>"+extra+"</p>").popup("open");
);

The Popup Widget and all its options

About the data-* attribute

Demo

【讨论】：

Tasos 不错！ OP 仍然可以在您的方法中使用隐藏的 div，特别是如果需要弹出内容中的 html 标记：jsfiddle.net/xbj9xabh/1

@ezanker -- 是的，我知道，但是 DOM 中有更多数据

感谢代码示例。虽然我最初更喜欢 ezanker 的示例（我对多个项目的 li 代码更改较少），但我遇到了一些与移动页面创建功能相关的令人困惑的挑战。不确定是我的 IDE 预览模式还是什么。无论如何，根据您的示例，我现在已经克服了障碍。感谢您的帮助！