我正在尝试使用 jQuery Mobile 构建本机移动应用程序,然后将其包装在 PhoneGap 中。这是我第一次尝试构建移动应用程序,我有点迷失在一个通常很简单的话题上。我的应用程序将允许用户浏览高中橄榄球队的比分、赛程和统计数据。我有一个页面,在下拉列表中显示所有团队(#search-schedules)。用户将选择一个团队,发布团队 ID 值,并且该团队的日程安排显示在另一个页面 (#schedules) 上。我包含一个 custome.js 文件,其中包含整个应用程序所需的所有 jQuery。到目前为止我所拥有的(处理这个问题)如下。非常感谢任何关于实现这一目标的最佳方式的方向。
这是用户选择团队的页面:
<div data-role="page" id="search-schedules">
<div data-role="header"><h1>Find Schedules</h1></div>
<div data-role="content">
<p align="center"><strong>Select a school from the list below to view their schedule</strong></p>
<form id="schedules-form" data-transition="pop" data-direction="reverse" />
<div align="center" data-role="fieldcontain">
<select name="school" id="school-select">
<option value="">Select A School</option>
</select>
<p><input type="submit" id="submit" name="submit" value="Get Schedule" data-theme="b" /></p>
</div>
</form>
</div>
<ul data-role="listview" data-dividertheme="e">
<li><a href="#home" data-transition="slide">Home Page</a></li>
</ul>
<div data-role="footer"><h1>Footer</h1></div>
</div>
这是将显示计划的页面:
<div data-role="page" id="schedules">
<div data-role="header"><h1>Schedules</h1></div>
<div data-role="content">
<h2 align="center"></h2>
<div id="schedule-div"></div>
</div>
<ul data-role="listview" data-dividertheme="e">
<li><a href="index.php" data-transition="slide">Home Page</a></li>
</ul>
<div data-role="footer"><h1>Footer</h1></div>
</div>
这是提交表单的 JS:
$('#schedules-form').bind('submit', function (e) {
e.preventDefault();
$.post(serviceURL + 'schedules.php', $(this).serialize(), function(response) {
$.mobile.changePage('#schedules', {
transition: 'slide'
});
});
});
这是显示日程的 JS:
$('#schedules').live('pageshow', function(event) {
var team = ''; // How do I grab a POST variable?
$.post(serviceURL + 'schedules.php', team, function(data) {
var games = data.item;
$.each(games, function(index, game) {
$('#schedule-div').append('<p>' + game.game_date + ' - ' + game.visitor_team + ' @ ' + game.home_team + '</p>');
});
$('#schedule-div').listview('refresh');
});
};