布局关于使用css，Jquery和JQtouch的iPhone应用程序的问题
[英]Layout Question about an iPhone app that uses css, Jquery and JQtouch
问题描述
I'm learning how to build an iphone site using Johnathan Stark's O'Reilly Building iPhone Apps book. 
我正在学习如何使用Johnathan Stark的O'Reilly Building iPhone Apps书构建一个iphone网站。 For the purposes of this question, you will be able to understand my problem by looking at it from the desktop at www.saudialberta.com . 出于这个问题的目的，您可以通过www.saudialberta.com上的桌面查看来了解我的问题。 If you look at the home page, it has two panels, Dates and About . 如果您查看主页，它有两个面板， Dates和About 。 If you click on 'Dates,' it opens a new page with 6 days on it. 如果您点击“日期”，则会打开一个新页面，其中包含6天。
Question: If you look at the html below, I'm trying to understand what allows the unordered list inside "Dates" to open on a new page, rather than just appear below "Dates" on the same page, and, for that matter, what allows the "p" element inside "About" to appear on a new page rather than just below the About div, as the html would suggest. 问题：如果你查看下面的html，我试图理解是什么允许“Dates”中的无序列表在新页面上打开，而不是仅仅出现在同一页面上的“Dates”下面，并且就此而言什么允许“关于”里面的“p”元素出现在一个新的页面而不是在关于div的下面，正如html所暗示的那样。
Notice that there's no styling id or class on the "p" element inside the "about" div. 请注意，“about”div中的“p”元素上没有样式ID或类。 Since "Dates" and "About" are both "toolbars" i'm guessing it's something in the toolbar css. 由于“Dates”和“About”都是“工具栏”，我猜它是工具栏css中的东西。 The book also uses jqtouch and jquery, but there's nothing in those files (that I can see) that manipulates these html elements. 这本书也使用了jqtouch和jquery，但是那些操作这些html元素的文件（我可以看到）中没有任何内容。
Toolbar CSS 工具栏CSS
.toolbar {
-webkit-box-sizing: border-box;
border-bottom: 1px solid #000;
padding: 10px;
height: 45px;
background: url(img/toolbar.png) #000000 repeat-x;
position: relative;
}
.black-translucent .toolbar {
margin-top: 20px;
}
.toolbar > h1 {
position: absolute;
overflow: hidden;
left: 50%;
top: 10px;
line-height: 1em;
margin: 1px 0 0 -75px;
height: 40px;
font-size: 20px;
width: 150px;
font-weight: bold;
text-shadow: rgba(0,0,0,1) 0 -1px 1px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
color: #fff;
}
HTML HTML
<html>
<head>
<title>Kilo</title>
<link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css">
<link type="text/css" rel="stylesheet" media="screen" href="themes/jqt/theme.css">
<link type="text/css" rel="stylesheet" media="screen" href="kilo.css">
<script type="text/javascript" src="jqtouch/jquery.js"></script>
<script type="text/javascript" src="jqtouch/jqtouch.js"></script>
<script type="text/javascript" src="kilo.js"></script>
</head>
<body>
<div id="home">
<div class="toolbar">
<h1>Kilo</h1>
<a class="button flip" href="#settings">Settings</a>
</div>
<ul class="edgetoedge">
<li class="arrow"><a href="#dates">Dates</a></li>
<li class="arrow"><a href="#about">About</a></li>
</ul>
</div>
<div id="about">
<div class="toolbar">
<h1>About</h1>
<a class="button back" href="#">Back</a>
</div>
<div>
<p>Kilo gives you easy access to your food diary.</p>
</div>
</div>
<div id="dates">
<div class="toolbar">
<h1>Dates</h1>
<a class="button back" href="#">Back</a>
</div>
<ul class="edgetoedge">
<li class="arrow"><a id="0" href="#date">Today</a></li>
<li class="arrow"><a id="1" href="#date">Yesterday</a></li>
<li class="arrow"><a id="2" href="#date">2 Days Ago</a></li>
<li class="arrow"><a id="3" href="#date">3 Days Ago</a></li>
<li class="arrow"><a id="4" href="#date">4 Days Ago</a></li>
<li class="arrow"><a id="5" href="#date">5 Days Ago</a></li>
</ul>
</div>
<div id="date">
<div class="toolbar">
<h1>Date</h1>
<a class="button back" href="#">Back</a>
<a class="button slideup" href="#createEntry">+</a>
</div>
<ul class="edgetoedge">
<li id="entryTemplate" class="entry" style="display:none">
<span class="label">Label</span>
<span class="calories">000</span>
<span class="delete">Delete</span>
</li>
</ul>
</div>
<div id="createEntry">
<div class="toolbar">
<h1>New Entry</h1>
<a class="button cancel" href="#">Cancel</a>
</div>
<form method="post">
<ul class="rounded">
<li><input type="text" placeholder="Food" name="food" id="food" autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
<li><input type="text" placeholder="Calories" name="calories" id="calories" autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
<li><input type="submit" class="submit" name="action" value="Save Entry" /></li>
</ul>
</form>
</div>
<div id="settings">
<div class="toolbar">
<h1>Settings</h1>
<a class="button cancel" href="#">Cancel</a>
</div>
<form method="post">
<ul class="rounded">
<li><input placeholder="Age" type="text" name="age" id="age" /></li>
<li><input placeholder="Weight" type="text" name="weight" id="weight" /></li>
<li><input placeholder="Budget" type="text" name="budget" id="budget" /></li>
<li><input type="submit" class="submit" name="action" value="Save Changes" /></li>
</ul>
</form>
</div>
</body>
</html>
1 个解决方案
解决方案1
2 已采纳 2011-04-07 00:19:43
jqtouch treats all top level divisions as pages. jqtouch将所有顶级部门视为页面。 So because they are top level divisions, the javascript in jqtouch takes control of them, and styles them appropriately. 因为它们是顶级分区，jqtouch中的javascript控制它们，并适当地设置它们的样式。 Then converts links that match the id to reveal the pages. 然后转换与id匹配的链接以显示页面。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.