2

私の phonegap アプリでは、水平スクロール ビューを実装したいと考えています。私のhtmlコード

<div id="songsListPage" data-role="page">

    <div id="alphabets" > 
        <a href="#"  >#</a>
                    <a href="#" >A</a>
                    <a href="#"  >B</a>
                    <a href="#"  >C</a>
                    <a href="#"  >D</a>
                    <a href="#"  >E</a>
                    <a href="#"  >F</a>
                    <a href="#"  >G</a>
                    <a href="#"  >H</a>
                    <a href="#"  >I</a>
                    <a href="#"  >J</a>
                    <a href="#"  >K</a>
                    <a href="#"  >L</a>
                    <a href="#"  >M</a>
    </div>

<div id="songs_list" data-role="content"> <!-- this should not scroll, but it is and showing white background on right side -->

        <ul id="songsList" data-role="listview" data-theme="a"></ul> <!-- list is populated dynamically -->     

        <p>This is songs page</p>

        <a href="player.html" id="playerBtn" data-role="button" class="ui-btn-active" ></a>
        </div>
</div>

私のCSS

#alphabets {
    background:#000000;
    display: block;
    padding: 5px;
    clear: both;
    height: 30px;
    margin-bottom: 22px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    width: 200%;
    overflow-x: auto;
}
#alphabets a{ color: #ffffff; margin-left: 5px}

「width: 200%」と「overflow-x: auto」を指定すると、水平スクロールが発生しますが、問題は画面の残りの部分も水平にスクロールすることです。これを達成する方法はありますか?

4

1 に答える 1

1

古い回答

新しい HTML

<div id="songsListPage" data-role="page">
<table id="alphabets"> <!-- change "div" tag to "table" tag -->
    <tr>
    <td href="#">#</td> <!-- and "a" to "td" tag -->
    <td href="#">A</td>
    <td href="#">B</td>
    <td href="#">C</td>
    <td href="#">D</td>
    <td href="#">E</td>
    <td href="#">F</td>
    <td href="#">G</td>
    <td href="#">H</td>
    <td href="#">I</td>
    <td href="#">J</td>
    <td href="#">K</td>
    <td href="#">L</td>
    <td href="#">M</td>
    <td href="#">N</td>
    <td href="#">O</td>
    <td href="#">P</td>
    <td href="#">Q</td>
    <td href="#">R</td>
    <td href="#">S</td>
    <td href="#">T</td>
    <td href="#">U</td>
    <td href="#">V</td>
    <td href="#">W</td>
    <td href="#">X</td>
    <td href="#">Y</td>
    <td href="#">Z</td>
    </tr>
</table>
<div id="songs_list" data-role="content">

<ul id="songsList" data-role="listview" data-theme="a"></ul>
<!-- list is populated dynamically -->     
<p>This is songs page</p>
<a href="player.html" id="playerBtn" data-role="button" class="ui-btn-active" ></a>
</div>
</div>

更新された CSS

#alphabets {
    background:#000000;
    display: block;
    padding: 5px;
    clear: both;
    height: auto;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    width: auto;  <!-- changed width from 200% to auto -->
    overflow-x: auto;
}
#alphabets td{ color: #ffffff; font-size: large; 
margin-left: 5px; padding-left: 5px; padding-right: 5px;} 
<!-- rest of the changes in css are for proper view (UI) like height: auto; padding-left: 5px; (in td) etc -->

http://jsfiddle.net/CXAWE/ (TABLE TR TD ソリューションを望まない方向け)

これは、電話 (Android) ブラウザーで完全に機能します。Table TR はモバイルでより適切に機能します。特にこの場合、保証された結果のために常に TABLE を使用します。

更新された新しい回答

あらゆるモバイル ソリューション向けの HTML。

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5 Alternative to Mobile WAP and iPad/iPhone etc</title>
<!-- Mobile Web App Acceleration - Powered by WordCompress.net //-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all, handheld" />
</head>
<body>
<div id="b">
    <div id="content">
    </div>
</div>
</body>
</html>

CSS

body { overflow-x: hidden; }
#b {
    margin: 1px;
}
#content {
    background: none repeat scroll 0 0 #FFFFFF;
}

viewport幅があることに注意device-widthしてください。また、本文には幅がなく、コンテンツにも幅がないことに注意してください。すべての電話が 100% 表示されることを保証できるようになりました。overflowtoyまたはxtooを変更できます。

于 2012-08-22T14:23:27.433 に答える