2
jqmの例here（左側の目次と右側の内容）に近いレイアウトのアプリケーションを開発していますが、Senchaモバイルと同じ動作をしたいそれは肖像画で、目次はナビゲーションボタンで崩壊しますhereJQueryモバイル - コンテンツ崩壊の肖像画
jqmで可能ですか？
A
答えて
3
このようなサンプルjQuery Mobileアプリケーションを作成しました。 - ポートレートモードでは分割ビューのレイアウトが表示されます。ランドスケープモードでは、ヘッダーのボタンを使用してナビゲーションを実行できます。デスクトップブラウザでは、widthに500pxと表示されます。width>500 px、分割ビュー。 width <500pxの場合、ヘッダーのボタン。
これは、ソースコードである：
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/_assets/css/jqm-docs.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
function showNavList() {
$(".navdiv").toggle();
}
$(".page").live("pagebeforeshow", function() {
$(".navdiv").hide();
});
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<style>
.content-secondary{
margin: 0px !important;
padding:0px !important;
}
/*refer http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */
/* Smartphones (landscape) ----------- */
@media all and (min-width: 501px){/*For demo in desktop browsers,gave 501.Should be 321px.Refer above link*/
.headerNav{
display:none !important;
}
.content-secondary{
display: block;
}
.navdiv{
display:none !important;
}
}
/* Smartphones (portrait) ----------- */
@media all and (max-width: 500px){/*320px*/
.headerNav{
display:block !important;
}
.content-secondary{
display: none;
}
}
</style>
</head>
<body>
<div data-role="page" class="page" id="page1">
<div class="navdiv" style="width:150px;top:38px;left:5px;position:absolute;z-index:1000;display:none">
<ul data-role="listview">
<ul data-role="listview" data-theme="c">
<li class="ui-btn-active" data-icon="false">
<a href="#page1">Page 1</a>
</li>
<li data-icon="false">
<a href="#page2">Page 2</a>
</li>
<li data-icon="false">
<a href="#page3">Page 3</a>
</li>
</ul>
</ul>
</div>
<div data-role="header">
<h1>Page 1</h1>
<a href="#" class="headerNav" onclick="showNavList()">Navigation</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
Content1
</div>
<div class="content-secondary">
<ul data-role="listview" data-theme="c">
<li class="ui-btn-active" data-icon="false">
<a href="#page1">Page 1</a>
</li>
<li>
<a href="#page2" data-icon="false">Page 2</a>
</li>
<li>
<a href="#page3" data-icon="false">Page 3</a>
</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" class="page" id="page2">
<div class="navdiv" style="width:150px;top:38px;left:5px;position:absolute;z-index:1000;display:none">
<ul data-role="listview">
<ul data-role="listview" data-theme="c">
<li data-icon="false">
<a href="#page1">Page 1</a>
</li>
<li data-icon="false" class="ui-btn-active">
<a href="#page2">Page 2</a>
</li>
<li data-icon="false">
<a href="#page3">Page 3</a>
</li>
</ul>
</ul>
</div>
<div data-role="header">
<h1>Page 2</h1>
<a href="#" class="headerNav" onclick="showNavList()">Navigation</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
Content2
</div>
<div class="content-secondary">
<ul data-role="listview" data-theme="c">
<li data-icon="false">
<a href="#page1">Page 1</a>
</li>
<li class="ui-btn-active" data-icon="false" >
<a href="#page2">Page 2</a>
</li>
<li data-icon="false">
<a href="#page3">Page 3</a>
</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" class="page" id="page3">
<div class="navdiv" style="width:150px;top:38px;left:5px;position:absolute;z-index:1000;display:none">
<ul data-role="listview">
<ul data-role="listview" data-theme="c">
<li data-icon="false">
<a href="#page1">Page 1</a>
</li>
<li data-icon="false">
<a href="#page2">Page 2</a>
</li>
<li data-icon="false" class="ui-btn-active">
<a href="#page3">Page 3</a>
</li>
</ul>
</ul>
</div>
<div data-role="header">
<h1>Page 3</h1>
<a href="#" class="headerNav" onclick="showNavList()">Navigation</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
Content3
</div>
<div class="content-secondary">
<ul data-role="listview" data-theme="c">
<li>
<a href="#page1">Page 1</a>
</li>
<li>
<a href="#page2">Page 2</a>
</li>
<li class="ui-btn-active">
<a href="#page3">Page 3</a>
</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
これは、この機能はdone.Thereことができる方法を説明するための確実なapplication.Butがちょうど荒いコピーではありません、物事の多くは、これを作るために行われることはまだあります完璧に動作します。
私はmedia queriesのコンセプトを使用しました。それを使用すると、ブラウザの幅（デバイスの向き）に応じてレイアウトを選択的に表示/非表示できます。
P.S.この例ではjqm-docs.cssを使用しています。このCSSには他の幅をターゲットとした他のメディアクエリもあります。このコードをテストすると奇妙なレイアウトの問題が生じる可能性があります。そのCSSを修正して不要なメディアクエリを削除してください。
助けてくれたら教えてください
関連する問題
- 1. アコーディオン崩壊jquery
- 2. jQueryのモバイル - グレーデッドスペース（画像）
- 3. iOSの肖像画風景
- 4. Jqueryモバイルで画像をスワイプ
- 5. 崩壊のフィールドセット
- 6. ブートストラップ画像のリンクが崩壊しない
- 7. ブートストラップボタングループの崩壊
- 8. 崩壊ツリービュー
- 9. ブートストラップレスポンスナビ崩壊のトラブル
- 10. 画面の向き - 逆の肖像
- 11. navbar bootstrapはモバイルを崩壊させません
- 12. シンプルなブートストラップnavbarがモバイルで崩壊しない
- 13. 崩壊で崩壊しても動作しません
- 14. 肖像
- 15. Xamarin - 崩壊テキスト
- 16. 崩壊日は
- 17. 崩壊多数
- 18. ブートストラップ崩壊が
- 19. 崩壊がモーダル
- 20. netbeans崩壊コメントブロック
- 21. マテリアライズボタン崩壊ブレークポイント
- 22. ブートストラップグリッドシステムが崩壊
- 23. 崩壊3列
- 24. ブートストラップ - ロードパネルの崩壊
- 25. Htmlの崩壊フィールド
- 26. 関係の崩壊
- 27. 崩壊時のアニメーションジャンプ
- 28. ブートストラップ「パネル崩壊」「崩壊」がオンラインで動作しない
- 29. Twitterのブートストラップ2、崩壊-NAV
- 30. bootstrap 4 navbar - コンテンツが崩壊時にブランドの下にジャンプ
ありがとう@ user700284！それは非常にうまくいく、多分メニューのスタイルは非常に簡単ですが、私たちはそれを修正する方法を知っていることを心配しないでください。ありがとうございました。 –