1
Я создал мобильный список ниже с JQuery, и это рендеринг просто отлично. Мне нужна помощь, когда вы нажимаете на определенный элемент списка - прямо сейчас я установил, что он переходит на новую страницу и показывает идентификатор resteraunt. То, что я хочу попробовать, это то, что на новой странице будет отображаться одна и та же информация о конкретной записи в виде списка, что означает, что вся информация, которая у меня была в элементе списка, была отображена на новой странице только в простой абзац. Это я пытаюсь разгадать этот динамический список, где у меня проблемы. Кто-нибудь может помочь? Я бы очень благодарен за это - информация о базе данных читается отлично!JQuery Mobile List Нажмите
<html>
<head>
<meta charset="utf-8" />
<title>Find A Deal</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
img.fullscreen {
max-height: 100%;
max-width: 100%;
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
$(document).on('pagebeforeshow', '#index', function(){
$("#list").empty();
var url="http://localhost/test/json3.php";
$.getJSON(url,function(json){
//loop through deals
$.each(json.deals,function(i,dat){
$("#list").append("<li><a id='"+dat.restaurantid+"'><h1>"+dat.name+"</h1><p>"+dat.dname+"</p></a></li>");
$(document).on('click', '#'+dat.restaurantid, function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
listObject.itemID = $(this).attr('id');
$.mobile.changePage("#index2", { transition: "slide"});
event.handled = true;
}
});
});
$("#list").listview('refresh');
});
});
$(document).on('pagebeforeshow', '#index2', function(){
$('#index2 [data-role="content"]').html('You have selected Link' + listObject.itemID);
});
var listObject = {
itemID : null
}
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header" data-position="fixed">
<h1>Current Deals</h1>
</div>
<div data-role="content">
<div class="content-primary">
<ul id="list" data-role="listview" data-filter="true"></ul>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="http://localhost/findadeal/index.html" data-icon="home">Home</a></li>
<li><a href="http://localhost/findadeal/mydeal.html" data-icon="grid">My Deals</a></li>
</ul>
</div>
</div>
</div>
<!--New Page -->
<div data-role="page" id="index2">
<div data-role="header">
<h1> Find A Deal </h1>
</div>
<div data-role="content">
<a data-role="button" href="#page1" data-icon="star" data-iconpos="left">Get Deal </a>
</div>
<footer data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li><a href="index.html" data-icon="home">Home</a></li>
<li><a href="#index" data-icon="grid">My Deals</a></li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
Извините, у меня было ощущение, что я неправильно объясняю, что я надеюсь достичь, так это то, что когда пользователь нажимает на один из элементов в исходном списке, он загружает новую страницу. На этой новой странице «dat.restaurantid, dat.name и dat.dname» только для этого выбранного элемента списка вытащили из базы данных и отобразили на новой странице в виде абзаца (
). Я надеюсь что объясняет вещи лучше? Извиняюсь! – user2025934Я обновил сообщение. Выбранный идентификатор элемента списка передается из индекса страницы в индекс 2. Точно так же вы можете передать любую информацию из индекса страницы на страницу index2. Когда событие pagebeforeshow запускается для страницы index2, вы знаете выбранный идентификатор, чтобы вы могли показывать конкретные данные на основе выбранного идентификатора. –