１つ前の記事では、横幅を狭めた時の動作があまりよろしくないので改善方法を調べた。
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" /> <link rel="stylesheet" href="http://jquerymobile.com/demos/1.0rc1/docs/_assets/css/jqm-docs.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="custom-scripting.js"></script> <script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script> <meta name="viewport" content="width=device-width; target-densitydpi=device-dpi" /> <title>テストページ</title> </head> <body> <div data-role="page" id="jqm-home" class="type-home"> <div data-role="content"> <div class="content-secondary"> <div class="ui-collapsible-content ui-collapsible-content-collapsed"> <p>横に長い時に、左側に表示されるサイドバーです。</p> <p>class="ui-collapsible-content ui-collapsible-content-collapsed"でくくってある部分が表示されます。</p> <p>横が短くなると消えます。</p> </div> <!-- end of ui-collapsible-content --> <div class="ui-collapsible-heading"> <p>サイドバーが表示されない時のメニューです。</p> <p>class="ui-collapsible-heading"でくくってある部分が表示されます。</p> </div> <!-- end of ui-collapsible-heading --> </div><!-- end content-secondary --> <div class="content-primary"> <p>メインコンテンツです。</p> <p>ここにいろいろな内容をおいていきます。</p> </div><!-- end of content-primary --> </div><!-- end of content --> </div><!-- end page --> </body> </html>
ポイント
1. 以下のcssが必要
http://jquerymobile.com/demos/1.0rc1/docs/_assets/css/jqm-docs.css
2. data-role=”content”の中で「class=”content-primary”」と「class=”content-secondary”」に分ける。
3. secondaryが左側のサイドバーになり、primaryがメインコンテンツとなる。
4. primary,secondaryはどっちが先でもおそらく大丈夫。
5. secondaryの中をさらに「class=”ui-collapsible-content ui-collapsible-content-collapsed”」と「class=”ui-collapsible-heading”」で分ける
とりあえず、これでレイアウト的には丁度いいものに、なった。