Question

基本上我正在使用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" alt="" />
            <h2>3A Cold-rooms & Aircons</h2>
            <p>Patio & Outdoor Furniture</p>
            <p>GARDEN & OUTDOOR ROOMS</p>
        </a>
    </li>

列表视图中有各种各样的项目。

Answer 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');

        }

    });

jQuery移动列表视图和面板

1 个答案: