jQuery 移动列表视图和面板

Posted 2023-05-09

【中文标题】jQuery 移动列表视图和面板

【英文标题】：jQuery mobile listview and panel

【发布时间】：2015-05-25 03:06:12

【问题描述】：

基本上我正在使用 jQuery mobile 设计这个移动应用程序。我很新，但我尝试了不同的方法，但没有成功。我正在尝试编写代码，以便当您单击列表视图项时，将打开一个面板，其中包含选定的列表视图 h1（包含列表项的标题）和 p（其中包含输入的描述文本代码在这里）。这是我的 html：

<div data-role="panel" id="event-details" data-position="right" data-theme="b" data-display="overlay">
    <h1>Hello World</h1>
</div>
<ol data-role="listview" id="show-events" data-theme="a" data-filter="true">
    <li data-name="3A Cold-rooms & Aircons" class="ui-shadow" data-icon="my-right-white">
        <a href="#event-details" class="events-list">
            <img src="img/flower.png" class="listImage"  />
            <h2>3A Cold-rooms & Aircons</h2>
            <p>Patio & Outdoor Furniture</p>
            <p>GARDEN & OUTDOOR ROOMS</p>
        </a>
    </li>

列表视图中有各种项目。

【问题讨论】：

您是否尝试过任何 javascript，或者您可以展示您尝试过的内容吗？如果问题是从头开始为您制作一切，那么很难提供帮助。

我已经粘贴了下面的代码..但我不知道如何在点击列表内的标签内获取文本

【参考方案1】：

$('#show-events').children('li').bind('click', function(e) 


          var htxt='<h2>' +   $(this).attr('data-name') + '</h2>';
          var ptxt='<p>' + txt + '</p>';
     var stringText =htxt+ptxt;
 $("ol#plannerList").append('<li data-icon="false" class="libgPlanner ui-shadow">' + '<a class="planner-btn" href="#map-page">' + stringText + '</a>' + '</li>').listview('refresh');

        

    );