jquery mobile+phonegap：搜索栏太宽答案

【问题标题】：jquery mobile+phonegap : search bar too widejquery mobile+phonegap：搜索栏太宽
【发布时间】：2013-08-12 19:51:32
【问题描述】：

我使用 phonegap 和 jquery mobile 创建了一个相当简单的移动网络应用程序：一个带有过滤器（搜索栏）的列表视图。然而，搜索栏超出了屏幕的范围，因此该应用程序允许左右滚动，这是一种丑陋和不受欢迎的行为。我的代码如下所示：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile- 1.0.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js">    </script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>

    <h2 id="list-thumb"> <img src="img/bild.png" width="96" height="34"  alt=""/> name</h2>
        <div data-demo-html="true">
        <ul data-role="listview" data-filter="true" data-filter-placeholder="Suche">
                <li><a href="#">...

结果如下所示： http://imgur.com/7u2oJD9

我正在尝试让我的屏幕恢复正常，即无法横向滚动并且搜索栏的大小正确。

更新：这个简单的例子也会出现问题：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href=" http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js">        </script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>


 </head>

 <body>
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search fruits..."      data-inset="false">
<li><a href="#">list1</a></li>
<li><a href="#">list2</a></li>
<li><a href="#">list3</a></li>
<li><a href="#">list4</a></li>
<li><a href="#">list5</a></li>
<li><a href="#">list6</a></li>
</ul>
</body>
</html>

查看 cmets 中示例的屏幕截图。

【问题讨论】：

标签： android jquery-mobile layout cordova

【解决方案1】：

      <div data-role="page">        
        <div data-role="content">
           <ul data-role="listview" data-filter="true" data-filter-placeholder="Search fruits..."      data-inset="true">
<li><a href="#">list1</a></li>
<li><a href="#">list2</a></li>
<li><a href="#">list3</a></li>
<li><a href="#">list4</a></li>
<li><a href="#">list5</a></li>
<li><a href="#">list6</a></li>
</ul>
        </div>


    </div>

我建议您先阅读入门指南 :)。 http://learn.jquery.com/jquery-mobile/getting-started/

【讨论】：

我一定错过了
过滤器在没有
的情况下确实显示得太宽，但是文档说页眉、内容和页脚都是可选的，所以你需要
据我所知，使过滤器宽度正确是一个错误。无论是那个还是文档都是错误的。

【解决方案2】：

您使用最新的 jquery 和 jquery-mobile 链接以获得更好的结果

<link rel="stylesheet" href=" http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js></script>
     <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js></script>

列表元素

<ul data-role="listview" data-filter="true" data-filter-placeholder="Search fruits..." data-inset="true">
    <li><a href="#">list1</a></li>
    <li><a href="#">list2</a></li>
    <li><a href="#">list3</a></li>
    <li><a href="#">list4</a></li>
    <li><a href="#">list5</a></li>
    <li><a href="#">list6</a></li>
</ul>

【讨论】：

我将库链接更新为上述链接，但这并没有改变我描述的行为。 :(
我冒昧地使用了您也使用的 jquery 站点中的示例。如果我使用 data-inset="true" (imgur.com/jeowi4z)，搜索栏会被合并到列表中，如果我不使用它（imgur.com/OzlniTp），我会得到描述的行为上面，即搜索栏比列表宽，因此不会完全显示在屏幕上，并允许在移动设备上横向滚动。