1

Jquery Mobileを使用してiPadアプリを作成していますが、を使用してナビゲーションバーを作成したいのですが、<div class="content-secondary">そのナビゲーションバー内に拡張可能なコンテンツがあります

現状では、セカンダリdiv内に単純な<li>ベースのナビゲーションを作成できますが、拡張可能なコンテンツを追加しようとすると、期待どおりにレンダリングされません。ヘッダーや折りたたみ方法なしで、拡張されたコンテンツが表示されるだけです。説明のためにJSFiddleを作成しようとしましたが（Fiddle Link）、JSFiddleは、単純に連続ページコンテンツとしてレンダリングする幅をいくら拡大しても、セカンダリナビゲーションペインをサポートしていないようです。

上記のFiddleリンクをたどると、メインコンテンツの下部にナビゲーションバーが追加されます。折りたたみ可能なコンテンツは問題なくレンダリングされます。ただし、同じコードを使用してJQuery Mobile Webページを作成すると、問題が発生します。

いくつかの画面は、ハイライトするために以下をつかみます。

画面が狭い場合-ナビゲーションバーが本体の後に続く場合、折りたたみは問題なく機能します 画面が狭い場合-ナビゲーションバーが本体の後に続く場合、折りたたみは問題なく機能します

画面を広げると、ナビゲーションバーはアクティブになりますが、折りたたみ可能なコンテンツはリストのように動作します 画面を広げると、ナビゲーションバーはアクティブになりますが、折りたたみ可能なコンテンツはリストのように動作します

何かアドバイスや考えはありますか？これは既知の問題ですか、それとも設計上の特徴ですか？

ありがとう

4

3 に答える 3

1

Listviewは、全体で-15pxのマージンを取ります。このcssを、JQMの後に配置された独自のスタイルシートでオーバーライドして、次のスニペットを使用することをお勧めします。

.ui-content .ui-listview{margin:-15px -15px 0 -15px;}​

または、次のように-15pxのマージンを使用しないため、挿入リストを使用します。

<ul data-role="listview" data-theme="c" data-dividertheme="d" data-inset="true">
    <li><a href="#Link1">Link1</a></li>
    <li><a href="#Link2">Link2</a></li>
    <li><a href="#Link3">Link3</a></li>
</ul>

それがお役に立てば幸いです。私があなたのためにこの答えを改善することができる方法があれば私に知らせてください。

于 2012-04-09T02:05:19.973 に答える
1

デモ ドキュメントの CSS を使用してプライマリ セカンダリ ビューを作成したため、2 つのコンテンツ ブロックの動作を定義するファイルがあると思います (jquery.mobile-1.1.0.css には「content-secondary」はありません)。 ）。次のようなメディアクエリで少し見つかります。

/* fix up the collapsibles - expanded on desktop */
.content-secondary .ui-collapsible-heading {
    display: none;
}
.content-secondary .ui-collapsible-contain {
    margin:0;
}
.content-secondary .ui-collapsible-content {
    display: block;
    margin: 0;
    padding: 0;
}

このセクションではヘッダーが非表示になり (折りたたむことができなくなります)、折りたたみ可能なコンテンツが展開されます。

メディア セグメントの前にこのセクションを含めることで、通常の「折りたたみ」動作をオーバーライドし、常に開くように強制します。同様に、メディア セグメントからそれを削除すると、すべての幅/向きで再び折りたたまれます。

ただし、「見出し」を表示できるようにする必要があります (デフォルトでは非表示になっており、その子が非表示になっている場合は、何もクリックして表示することはできません。これを行うには、セグメントを削除します)。 ;

.content-secondary .ui-collapsible-heading {
    display: none;
}

その後のすべてのメディアからの問い合わせから

于 2012-04-18T11:50:14.787 に答える
1

AssidiousBlue に感謝します。同じ問題があり、セクション全体をコメントアウトして修正しました。

.content-secondary .ui-collapsible-heading {
    display: none;
}
.content-secondary .ui-collapsible-contain {
    margin:0;
}
.content-secondary .ui-collapsible-content {
    display: block;
    margin: 0;
    padding: 0; 
}

乾杯、 アレックス

于 2012-04-29T09:23:03.613 に答える