Question

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

在评论中查看示例的屏幕截图。

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

Answer 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 mobile + phonegap：搜索栏太广了

2 个答案: