2

私のモバイルアプリケーションでは、次のようなテーマがあります<div data-role="page" id="myPage" data-theme="b" > 。内部divに1つのテーブルがあります。テーマbは正しく適用されますが、水平方向にスクロールすると、スクロール後にテーマは適用されません。Meansテーマは、スクロール前は表示されている画面にのみ適用され、スクロール後はテーマがありません。この問題は水平スクロールの場合のみで、垂直スクロールの場合は完全に機能します。

任意の提案をいただければ幸いです。

これが私のスクリーンショットです！

前もって感謝します。

ここに画像の説明を入力してください

4

2 に答える 2

0

http://jsfiddle.net/X8yXe/7/ position:fixed をヘッダーに追加し、幅 100% にすることで、貼り付けることができます。Fixed は div をフロートするため、テーブルは下に表示されず、文字通りその下に表示されます。これを解決するために、2 つ目の高さ div を追加してテーブルを押し下げました。

position:fixed は Android と iOS 5 で動作しますが、以前の iOS バージョンは position:fixed をサポートしていません。

于 2012-08-22T19:32:21.067 に答える
0

これは、問題を回避する 1 つの方法であり、コードの他の領域にも対処できます。

これが以下の変更の結果です -> http://jsfiddle.net/X8yXe/17/。

まず、コンテンツをパラメーターでラップして、jQuery Mobile で行われる方法data-role="content"でこのセマンティックを維持します。

<div data-role="page" id="orderbookpage" data-theme="b" >
    <div data-role="header" align="center" data-theme="b">
        <a href="#" data-rel="back" data-icon="arrow-l">Back</a>
        <h1>MyPage </h1>
        <a href="MainMenu.html"  data-icon="grid">Menu</a>
    </div>
    <div data-role="content" data-theme="b">
        <div id="portfoliowrapper" align="center"  data-theme="b"></div>
        <p>Some random content, so we can see the scroll in relation to other content. </p>
    </div>       
</div>


次に、次の CSS を #protfoliowrapper に適用して、水平スクロール div を含めることができます。

#portfoliowrapper {
    width:93%;  
    white-space: nowrap;
    height:40px;
    padding: 20px;
    overflow: auto;
    overflow-x: hidden; /* hide scrollbar */

    /* make it stand out */
    border: 1px solid #ccc;
    margin: 0px auto;
    background-color: #eef1f1;
    background-image: -webkit-gradient(linear,0 0, 0 100%, from(#f3f3f3), to(#e2e2e2));
    -webkit-border-radius: 2px;
    -webkit-box-shadow: 1px 0 0 #fff inset, 0 1px 0 #fff inset;
}


最後に、ヒントです。あなたは jQuery Mobile を使っているので、使ってみませんか? jQuery をロードするときに標準の JavaScript を使用するのはなぜですか?

代わりに：

document.getElementById('portfoliowrapper').innerHTML = theader + tbody + tfooter;

あなたはこれを行うことができます：

$('#portfoliowrapper').append(theader + tbody + tfooter);​
于 2012-08-25T06:58:08.540 に答える