Question

我正在学习如何使用Johnathan Stark的O'Reilly Building iPhone Apps书建立一个iphone网站。出于这个问题的目的，您可以通过www.saudialberta.com上的桌面查看来了解我的问题。如果您查看主页，它有两个面板，Dates和About。如果您点击“日期”，则会打开一个新页面，其中包含6天。

问题：如果您查看下面的html，我正在尝试了解允许“日期”中的无序列表在新页面上打开的内容，而不是仅显示在“日期”下方在同一页面上，就此而言，允许“关于”内部的“p”元素出现在新页面而不是正好位于About div之下，正如html所暗示的那样。

请注意，“about”div中的“p”元素上没有样式ID或类。由于“Dates”和“About”都是“工具栏”，我猜它是工具栏css中的东西。这本书也使用了jqtouch和jquery，但是那些操作这些html元素的文件（我可以看到）中没有任何内容。

工具栏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>
    <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>

Answer 1

jqtouch将所有顶级部门视为页面。因为它们是顶级分区，jqtouch中的javascript控制它们，并适当地设置它们的样式。然后转换与id匹配的链接以显示页面。

布局关于使用css，Jquery和JQtouch的iPhone应用程序的问题

1 个答案: