我有一个应用程序,该应用程序的页面从表中选择了所有ID,并且在html中显示了特定的信息位。接下来,我想做的就是将所有这些元素作为一个整体链接到第二层。
此下移页面将显示与该行的ID绑定的所有信息,是否可以动态方式构建它?
我正在使用jQuery mobile构建页面,我想使用1个模板并将相关的html元素附加到其中,并使用ID绑定信息填充每个模板。
我希望这是有道理的,任何指导或建议将不胜感激。
上面的模型代表了我想要实现的目标,左图显示了表中所有行的列表,单击其中的一个行后,您将被带到另一页,仅包含该特定ID的信息。
我可以为列表中的每个项目实现此功能吗?
这是一个很好的导航示例,实现起来并不难。
由于信息是连贯的(每个数据库行都具有相同的列),因此仅创建一个空模板(edit:现在基于PasteBin):
<div data-role="page" id="route_details">
<div data-role="header">
<a data-rel="back"><i class="fa fa-arrow-left"></i></a>
<h1 id="walkTitle"></h1>
</div>
<div data-role="main" class="ui-content">
<div class="finishedRouteInfo">
<div class="mapDetails" style="width: 100%; height: 150px;"></div>
<div class="ui-grid-a">
<div class="ui-block-a home_btns no_border">
<div class="ui-block-a finishedDistance"><i class="fa fa-map-marker"></i></div>
<div class="ui-block-b"><p>Distance <br/><span id="finalDistance" class="value"></span></p></div>
</div>
<div class="ui-block-b home_btns">
<div class="ui-block-a finishedDistance"><i class="fa fa-clock-o"></i></div>
<div class="ui-block-b finishedDuration"><p>Duration <br/><span class="value" id="finalDuration"></span></p></div>
</div>
<span class="horizontalSplitter"></span>
<div class="walkDescription"></div>
</div>
</div>
</div>
PasteBin中的代码无法正常工作,因为您正在使用具有相同ID(即finalDistance
,finalDuration
)的元素创建多个页面。另外,您正在创建许多用户可能永远看不到的页面。
因此,简化您的加载功能:
var last_results = [];
$(document).on("pageinit", "#my-routes", function() {
db.transaction(function(t){
t.executeSql('SELECT * FROM WALKS', [], querySuccess, errorCB);
});
function querySuccess(t, results, Element) {
last_results = results;
}
});
并在显示包含路线详细信息的页面之前延迟内容/地图的创建:
$("#route_details").on("pagecontainerbeforeshow", function()
{
// use your DB data
var data = last_results.rows.item(clicked_route);
$("#walkTitle).html(data.WalkTitle);
$(".walkDescription").html(data.WalkDescription);
// ...create the map and fill the rest...
});
您只需要将每条路线链接到此页面,使用以下方式设置clicked_route
点击链接的时间:
<a class="walkPage" href="#route_details" data-route="0">Route 0</a>
<a class="walkPage" href="#route_details" data-route="1">Route 1</a>
<a class="walkPage" href="#route_details" data-route="2">Route 2</a>
JavaScript:
$(document).on("click", ".walkPage") {
clicked_route = parseInt($(this).attr("data-route"));
});
...由于必须在两个不同的页面中显示路线图,因此请重构代码,以便轻松创建地图并将其添加到任何页面。
希望它足够清楚地完全实施它。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句