jQuery Mobile - 标题下的列表单

时间：2013-02-01 08:31:43

标签： jquery-mobile

我目前正在开发一款适用于手机和平板电脑的网络应用，并解决了jquery mobile的另一个问题。我的标题固定在顶部，我必须列出它下面的列表。左边的一个相对于右边的一个绝对。

左边的一个在我的标题下滑动。滚动是活动的，虽然不需要实际滚动。

有人有提示吗？

example 

<div id="page" class="ui-page ui-body-c ui-page-active ui-page-header-fixed" data-role="page" data-url="page" tabindex="0" style="min-height: 491px; padding-top: 44px;">
    <div id="content" class="ui-content" data-role="content" role="main">
        <div class="ui-header ui-bar-a ui-header-fixed slidedown" data-role="header" data-position="fixed" data-tap-toggle="false" role="banner">
        <ul id="console" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-role="listview" data-inset="true" style="width: 50%;">
        <ul id="control" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-inset="true" data-role="listview" style="width: 48%; position: fixed; top: 58px; right: 1%;">
    </div>
</div>

编辑：

在这里你可以打印出我的firebug控制台：

enter image description here

编辑2：

奇怪的是html元素的大小：

enter image description here

1 个答案:

答案 0 :(得分：0)

您的标题位置错误，不应该是内容的一部分：

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div id="page" data-role="page" data-url="page" >
        <div class="ui-header ui-bar-a ui-header-fixed slidedown" data-role="header" data-position="fixed" data-tap-toggle="false" role="banner">
            <h3>Header</h3>
        </div>
        <div id="content" data-role="content">
            <ul id="console" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-role="listview" data-inset="true" style="width: 50%;">
                <li><a>Item 1</a></li>
            </ul>
            <ul id="control" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-inset="true" data-role="listview" style="width: 48%; position: fixed; top: 58px; right: 1%;">
                <li><a>Item 1</a></li>
            </ul>
        </div>
    </div> 
</body>
</html>

工作示例：http://jsfiddle.net/Gajotres/us2w5/

相关问题
最新问题