1

我用 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>

请参阅评论中示例的屏幕截图。

4

2 回答 2

2 
      <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/

于 2013-08-12T11:39:32.530 回答
0

您使用最新的 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>
于 2013-08-06T07:37:33.843 回答