4

ページの読み込み時に自分のページにパネルを表示したい。これはすでにスクリプトで取得しています。

しかし、サイトが読み込まれると、パネルにページ全体が表示されます -> ページの反対側が右にスクロールしているため、コンテンツ全体が表示されません。

そこで、「class="ui-responsive-panel"」をページ ラッパーに追加しました。

パネルにリンクしたボタンをクリックするまで、同じ問題が発生します。このボタンは、最初のクリックでパネルを非表示にし、2 番目にパネルを表示し、右側のコンテンツが幅を縮小しています (これが私の目的です)。

これはすでにページの読み込みが完了しているため、何を追加する必要がありますか?

ありがとう

編集：私のコード

<!-- Page -->
<div data-role="page" id="page" class="ui-responsive-panel">

<!-- Panel -->
<div data-role="panel" id="Panel" data-display="reveal" data-position-fixed="true" data-swipe-close="false" data-dismissible="false" data-theme="none">
Content here
</div>

<div data-role="header" data-theme="b" data-position="fixed">
        <h1>Title</h1>
    </div>
    <div data-role="content">

Here my Content which I want to auto scale on page load

<!-- Panel shown on page load -->
<script>$(document).on('pagebeforeshow', '#Page', function(){       
    $( "#Panel" ).panel( "open");
});</script>

</div>
</div>
4

2 に答える 2

0

ここには多くのオプションがあります。まず、 twitter bootstrapを調べることをお勧めします。彼らは多くのスタイリングを行うので、あなたがする必要はありません.

さらに、各 div に特定のパーセンテージ幅を設定できます。width:'value'%; を使用するだけです。

他にできることは、@media タグを使用することです。

@media (min-width 300 && max-width: 480px) {
    #panel {
            width: 96px;
    }
}
于 2013-05-29T04:55:21.187 に答える