1

phonegap と jquery mobile を使用して、かなり単純なモバイル Web アプリを作成しました。これは、フィルター (検索バー) を備えたリスト ビューです。ただし、検索バーは画面の境界を超えているため、アプリは左右にスクロールできますが、これは一種の見苦しく望ましくない動作です. 私のコードは次のようになります。

<!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 に答える