Question

我想制作基于iPad HTML5 / CSS3的应用程序，我发现了JQuery Mobile并试图使用它。这就是它的样子：

Screenshot from my mobile app

这是摘要页面，当用户点击其中一个网格元素时，它应该转到正确的详细信息页面。（点击网格“a”应该转到id为“blockA”等的内页......）。

我遇到了一些问题，但在网上找不到任何明确的线索。

我想要修复标题+照片和摘要+“信息”栏。我找到的唯一解决方案是将标题div复制/粘贴到我的“blockA”页面和其他5个我发现非常烦人的页面中。基本上我希望修复我的顶部屏幕，并在底部屏幕上更改链接导航。我想过使用jquery append方法等，但有没有“原生”方法呢？
我的标题非常难以带来，就像你可以在图片上看到它一样。我不得不改变一下CSS。有没有更简单的方法？我可能错过了JQuery结构CSS中的一些类？找不到JQM的任何详尽的班级列表。
如何在不修改CSS的情况下为不同的组件设置高度。

以下是我的一些HTML代码：

    <body>
    <div data-role="page" id="page_main" style="min-height: 496px; ">
        <div data-role="header" id="nav-header-pleiades" data-add-back-btn="true" data-back-btn-text="Retour à la sélection">
            <h1>Dossier de <span class='ptaGetUser' attribute-value='Name'>Mr. XXXXXXX</span></h1>
            <ul data-role="listview">
                <li class="pta-file-content" data-icon="custom" data-theme="c">
                    <img class="pta-img-collab" src="img/collab/Pic-S.jpg"/>
                    <div class="ui-grid-a">
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='title'>Mr.</span> <span class='ptaGetUser' attribute-value='firstname'>Whatever</span> <span class='ptaGetUser' attribute-value='lastname'>X</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='mail'>whatever.x@mail.com</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='birthdate'>09/03/1984</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='phone'>0450090909</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='work_id'>1656486m</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='assignment'>Ingénieur débutant</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='status'>Status</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='building'>Company</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p>Employé depuis <span class='ptaGetUser' attribute-value='employee_since'>01/09/2010</span></p>
                        </div>
                    </div>
                </li>
            </ul>
            <h1 class="ui-title">Informations</h1>
        </div>

            <div class="ui-grid-b">
                <div class="ui-block-a">
                    <a href="#blockA"><span id='ptaGetUserBlockA'>a</span></a>
                </div>
                <div class="ui-block-b">
                    <a href="#blockB"><span id='ptaGetUserBlockB'>b</span></a>
                </div>
                <div class="ui-block-c">
                    <a href="#blockC"><span id='ptaGetUserBlockC'>c</span></a>
                </div>
                <div class="ui-block-a">
                    <a href="#blockD"><span id='ptaGetUserBlockD'>d</span></a>
                </div>
                <div class="ui-block-b">
                    <a href="#blockE"><span id='ptaGetUserBlockE'>e</span></a>
                </div>
                <div class="ui-block-c">
                    <a href="#blockF"><span id='ptaGetUserBlockF'>f</span></a>
                </div>
            </div>

    </div>
    <div data-role="page" data-title="Page Foo" id="blockA">
        <div data-role="header" id="nav-header-pleiades" data-add-back-btn="true" data-back-btn-text="Retour à la sélection">
            <h1>Dossier de <span class='ptaGetUser' attribute-value='Name'>Mr. XXXXXXX</span></h1>
            <ul data-role="listview">
                <li class="pta-file-content" data-icon="custom" data-theme="c">
                    <img class="pta-img-collab" src="img/collab/Pic-S.jpg"/>
                    <div class="ui-grid-a">
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='title'>Mr.</span> <span class='ptaGetUser' attribute-value='firstname'>Whatever</span> <span class='ptaGetUser' attribute-value='lastname'>X</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='mail'>whatever.x@mail.com</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='birthdate'>09/03/1984</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='phone'>0450090909</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='work_id'>1656486m</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='assignment'>Ingénieur débutant</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='status'>Status</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='building'>Company</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p>Employé depuis <span class='ptaGetUser' attribute-value='employee_since'>01/09/2010</span></p>
                        </div>
                    </div>
                </li>
            </ul>
            <h1 class="ui-title">Informations</h1>
        </div>
        mon bloc A
    </div>
</body>

不要看ptaGetUser spans，这是我以后的持久性框架，我应该努力为这样的HTML页面添加无缝持久性。现在虽然这只是一无所获。我也只为这个例子添加了第一个块。

我的CSS使其成为正确的维度：

.ui-title,.ui-title
{
    height:24px;
}

.banner
{
    height:45px;
    padding: 0px 15px !important;
}

.ui-li-thumb, .ui-li-icon {
    max-width:165px;
    max-height:165px;
}

.pta-file-content
{
    height:148px;
}

.ui-li-has-thumb
{
    padding-left: 165px !important;
}
.ui-grid-a
{
    padding-top: 5px;
}
.ui-grid-b
{
    height:543px;
    width: 1022px;
}

.ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b,.ui-grid-b .ui-block-c
{
    height:50%;
    width:32%;
    border: 1px solid black;
}

当我点击第一个网格元素以显示页面时，整个屏幕会滑动。正如你所看到的，我已将整个标题复制到我的第二页div中，这对于代码可读性来说非常糟糕。我的网格边框也有CSS问题，因为它没有显示底部边框，如何在不修改CSS的情况下向网格添加边框？

Answer 1

1）jQuery Mobile目前不提供持久性页眉和页脚，但即将推出的版本1.1将会。他们是否在过渡期间留在页面上是尚未回答的问题。您最好的选择是为您的页面使用某种服务器端语言，然后将标题设置为包含。这样，您就不必复制和粘贴多个页面。

2）jQuery Mobile非常适合构建应用程序，但要获得真正定制的内容，您必须自己编写;是CSS或HTML或两者兼而有之。

3）为元素实现自定义高度的唯一方法是编写自定义CSS。

Answer 2

听起来你在没有修改CSS的情况下尝试做很多事情。为什么这是您项目的要求？

听起来你正在寻找一个持久的标题。 Start here使用JQM Footers文档。它们涵盖了持久性，它应该与标题相同。如果JQM文档无法解决此问题，请查看此other Stackoverflow post。
如果您正在寻找自定义配置，请查看此documentation on JQM headers的最底部。如果不是这样，您也可以尝试the JQM layout grids。否则，您将需要CSS，无论是内联还是其他。
虽然我不确定我是否完全理解这里的问题，但我听说应该使用CSS / HTML来控制布局宽度，而不是高度。抱歉，无法找到要备份的文章，所以我们只考虑一种设计理念。同样，这篇文章告诉你如何均匀balance height with CSS。

至于你关于边框的最后一个问题，你必须使用CSS来控制它们。无论你是内联还是使用JQM Themeroller创建的样式表，我都不知道除CSS以外的任何其他样式边框样式。

希望这有帮助！

如何在同一个html文件中为多个页面使用相同的标题

2 个答案: