Android Jquery Listview过滤器破坏了布局答案

【问题标题】：Android Jquery Listview Filter ruins the layoutAndroid Jquery Listview过滤器破坏了布局
【发布时间】：2013-06-28 01:33:10
【问题描述】：

我尝试在 Android 4.1.2 中使用过滤器做一个简单的列表视图，它看起来像页眉/页脚的固定位置一样破坏了固定布局，并且当您点击过滤器框时，列表视图不再适合屏幕。

我的代码是错误还是有问题。以下是简单代码：

<ul id="mylist" data-role="listview" data-split-icon="delete" data-split-theme="b" data-filter="true">
    <li data-role="list-divider">A</li>
    <li><a href="index.html">Adam Kinkaid</a></li>
    <li><a href="index.html">Alex Wickerham</a></li>
    <li><a href="index.html">Avery Johnson</a></li>
    <li data-role="list-divider">B</li>
    <li><a href="index.html">Bob Cabot</a></li>
    <li data-role="list-divider">C</li>
    <li><a href="index.html">Caleb Booth</a></li>
    <li><a href="index.html">Christopher Adams</a></li>
    <li><a href="index.html">Culver James</a></li>
</ul>

截图：http://postimg.org/image/3xs0dqu7v/

【问题讨论】：

标签： android jquery listview jquery-mobile filter

【解决方案1】：

尝试使用正确的 html 标记。演示http://jsfiddle.net/yeyene/AeXnV/8/

我想你忘了<div data-role="content">？

<div data-role="page">
    <div data-role="header" data-position="fixed">
        <h1>Page Title</h1>
    </div>

    <div data-role="content">
        <ul id="mylist" data-role="listview" data-split-icon="delete" data-split-theme="b" data-filter="true">
            <li data-role="list-divider">A</li>
            <li><a href="index.html">Adam Kinkaid</a></li>
            <li><a href="index.html">Alex Wickerham</a></li>
            <li><a href="index.html">Avery Johnson</a></li>
            <li data-role="list-divider">B</li>
            <li><a href="index.html">Bob Cabot</a></li>
            <li data-role="list-divider">C</li>
            <li><a href="index.html">Caleb Booth</a></li>
            <li><a href="index.html">Christopher Adams</a></li>
            <li><a href="index.html">Culver James</a></li>
        </ul>
    </div>

    <div data-role="footer" data-position="fixed">
        <h4>Page Footer</h4>
    </div>
</div>

【讨论】：

【解决方案2】：

感谢您的回复。我发现了问题。它是由页脚中的 class="ui-bar" 引起的。如果我删除这个 class="ui-bar"，它会修复右侧布局问题，但页眉和页脚不再固定。在这里，我粘贴代码供您重现问题。问题出在PhoneGap，不知道是不是其他浏览器也有问题。

<div data-role="page">
<div data-role="header" data-position="fixed">
    <h1>Page Title</h1>
</div>

<div data-role="content">
    <ul id="mylist" data-role="listview" data-split-icon="delete" data-split-theme="b" data-filter="true">
        <li data-role="list-divider">A</li>
        <li><a href="index.html">Adam Kinkaid</a></li>
        <li><a href="index.html">Alex Wickerham</a></li>
        <li><a href="index.html">Avery Johnson</a></li>
        <li data-role="list-divider">B</li>
        <li><a href="index.html">Bob Cabot</a></li>
        <li data-role="list-divider">C</li>
        <li><a href="index.html">Caleb Booth</a></li>
        <li><a href="index.html">Christopher Adams</a></li>
        <li><a href="index.html">Culver James</a></li>
    </ul>
</div>

<div data-role="footer" class="ui-bar" data-position="fixed">
    <a href="javascript:void(0)" id="emailCode" data-role="button"
            data-icon="star">Email</a>
</div>

【讨论】：