【发布时间】：2014-09-30 01:44:25
【问题描述】：
我目前正在使用 intel xdk/app 设计器中的拖放功能创建一个应用程序。该应用程序的想法是为用户创建基本教程并使用地理定位工具。我主要通过使用英特尔网站上的应用初学者教程来创建应用程序。这些教程非常适用于添加图像和页面之间导航等基础知识。但是，当我添加地理定位时，该程序在最好的时候脾气暴躁且冻结，删除了几页。我已将代码复制到 word 中，当我将代码复制回来尝试恢复页面时，应用程序已开始在页眉顶部显示页脚。页眉和令人讨厌的，甚至是仍然在底部的页脚本身，都被压缩到屏幕的一侧，并且没有按应有的方式均匀分布。到目前为止我正在使用的代码如下。
<!DOCTYPE html>
<html>p
<!--HTML5 doctype-->
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Pragma" content="no-cache">
<script type="text/javascript" charset="utf-8" src="intelxdk.js"></script>
<script type="text/javascript" language="javascript">
var isIntel=window.intel&&window.intel.xdk
// This event handler is fired once the intel libraries are ready
function onDeviceReady() {
//hide splash screen now that our app is ready to run
intel.xdk.device.hideSplashScreen();
setTimeout(function () {
$.ui.launch();
}, 50);
}
//initial event handler to detect when intel is ready to roll
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
</script>
<script src="js/appframework.ui.min.js"></script>
<script>
if(isIntel)
$.ui.autoLaunch = false;
$.ui.useOSThemes = true; //Change this to false to force a device theme
$.ui.blockPageScroll();
$(document).ready(function () {
if ($.ui.useOSThemes && (!$.os.ios||$.os.ios7))
$("#afui").removeClass("ios");
});
</script>
<link href="css/icons.css" rel="stylesheet" type="text/css">
<link href="css/af.ui.css" rel="stylesheet" type="text/css">
<script>
function get_location() {
navigator.geolocation.getCurrentPosition(show_map);
}
function show_map(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
document.write("latitude :" + latitude + "<br>");
document.write("longitude :" + longitude + "<br>");
}
</script>
</head>
<body>
<div id="afui" class="ios">
<div id="header" class="header"></div>
<div id="content" style="">
<div class="panel" title="Main" data-nav="nav_0" id="main" selected="selected"
style="" data-appbuilder-object="page" data-header="header_0" data-footer="default_footer">
<div class="container" style="width: 100%; height: 100%; position: relative;" data-appbuilder-object="container">
<img src="images/intel.jpg" style="width: 100%; height: auto;" alt="Title" data-appbuilder-object="image"
class="" title="Main Screen">
<div class="text_item" data-appbuilder-object="text" style="text-align: center;">Welcome to the Tutorials App.
<br>Please select an option.</div>
</div>
</div>
<div class="panel" title="About" data-nav="nav_0" id="page_1" data-appbuilder-object="page"
style="width: 100%; height: 100%;" data-header="header_0" data-footer="default_footer">
<div class="container" style="width: 100%; height: 100%;" data-appbuilder-object="container">
<img src="images/intel.jpg" style="width: auto; height: 40%; display: block; margin-left: auto; margin-right: auto;"
alt="Title" data-appbuilder-object="image" class="" title="About">
<div class="text_item" data-appbuilder-object="text" style="text-align: center;">The about screen
<br>about
</div>
</div>
</div>
<div class="panel" title="Tutorials" data-nav="nav_0" id="page_2" data-appbuilder-object="page"
style="" data-header="header_0" data-footer="default_footer">
<ul class="list" data-appbuilder-object="list" style="">
<li><a href="#page_3">HTML Tutorial</a>
</li>
<li><a href="#page_4">CSS Tutorial</a>
</li>
<li><a href="#page_5">Geolocation</a>
</li>
</ul>
</div>
<div class="panel" title="HTML Tutorial" data-nav="nav_0" id="page_3" data-appbuilder-object="page"
style="" data-header="header_0" data-footer="footer_1">
<div class="container" style="width: 100%; height: 100%; position: relative;" data-appbuilder-object="container">
<img src="images/intel.jpg" style="width: 100%; margin-top: 100px;" alt="Title"
data-appbuilder-object="image" class="" title="intel">
<div class="text_item" data-appbuilder-object="text" style="text-align: center;">Use HTML like this.
<iframe width="100%" src="//www.youtube.com/embed/9gTw2EDkaDQ" frameborder="0"
allowfullscreen=""></iframe>
</div>
</div>
</div>
<div class="panel" title="CSS Tutorial" data-nav="nav_0" id="page_4" data-appbuilder-object="page"
style="width: 100%;" data-header="header_0" data-footer="footer_2">
<div class="container" style="width: 100%; height: 100%; position: relative;" data-appbuilder-object="container">
<img src="images/intel.jpg" style="width: 100%; margin-top: 100px;" alt="Title"
data-appbuilder-object="image" class="" title="intel1">
<div class="text_item" data-appbuilder-object="text" style="text-align: center;">Use CSS like this</div>
</div>
</div>
<div class="panel" title="Geolocation" data-nav="nav_0" id="page_5" data-appbuilder-object="page"
style="width: 100%;" data-header="header_0" data-footer="footer_3">
<div class="container" style="width: 100%; height: 100%;" data-appbuilder-object="container">
<img src="images/intel.jpg" style="width: 100%; margin-top: 100px;" alt="Title"
data-appbuilder-object="image" class="" title="intel2">
<div class="text_item" data-appbuilder-object="text" style="text-align: center;">Find Geolocation here</div>
<a class="button" href="#page_7" style="width: 100%;" data-appbuilder-object="button"
data-transition="slide" id="button_8" onclick="get_location();">Geolocation</a>
</div>
</div>
<div class="panel" title="Display Location" data-nav="nav_0" id="page_7" data-appbuilder-object="page"
style="" data-footer="default_footer" data-header="header_0"></div>
<div id="navbar" class="footer">
<footer><a href="#main" class="icon home" style="">Home</a><a href="#page_1"
class="icon info" style="">About</a><a href="#page_2" class="icon star"
style="">Tutorials</a><a href="#page_7" class="icon key" style="">Resources</a>
</footer>
</div>
</div>
<div id="navbar" class="footer">
<footer><a href="#main" class="icon home" style="">Home</a><a href="#page_1" class="icon info"
style="">About</a><a href="#page_2" class="icon star" style="">Tutorials</a>
<a
href="#page_7" class="icon key" style="">Resources</a>
</footer>
</div>
<header id="header_0" data-appbuilder-object="header">
<h1 class="apptitle"> Tutorials App</h1>
</header>
<nav id="nav_0" data-appbuilder-object="nav">
<h1>Side Menu</h1>
</nav>
<footer id="footer_1" data-appbuilder-object="footer"><a href="#page_1" class="icon left">Previous</a><a href="#main" class="icon home">Home</a>
<a href="#page_4" class="icon right">Next</a>
</footer>
<footer id="footer_2" data-appbuilder-object="footer"><a href="#page_3" class="icon left">Previous</a><a href="#main" class="icon home">Home</a>
<a href="#page_5" class="icon right">Next</a>
</footer>
<footer id="footer_3" data-appbuilder-object="footer"><a href="#page_4" class="icon left">Previous</a><a href="#main" class="icon home">Home</a>
<a href="#page_7" class="icon right">Next</a>
</footer>
<footer id="default_footer" data-appbuilder-object="footer"><a href="#main" class="icon home">Home</a><a href="#page_1" class="icon info">About</a>
<a href="#page_2" class="icon star">Tutorials</a><a href="#page_7" class="icon key">Resources</a>
</footer>
</body>
</div>
</html>
任何帮助都将不胜感激，这个英特尔 XDK/应用程序开发人员似乎不是使用 HTML5 的直接方式。是否可以在不删除所有受影响的页眉和页脚或无需重做所有导航链接的情况下解决此问题？
我已经对此进行了搜索，但到目前为止还没有合理的答案。
【问题讨论】：
标签： html css header emulation footer