jQuery Mobileが1.0rc1になったというので、ドキュメントを読んでみた。
なんかタブレットっぽい感じの開き方になっている。
これを実現しようと思って調べてみた。
よく分からないなりに調べていくと、↓のURLを発見。
stackoverflow:Creating a sidebar in jQuery mobile
<?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">
This would be the sidebar/split view on a tablet,
would show up stacked on a mobile device
</div><!-- end content-secondary -->
<div class="content-primary">
This is the main content.
If Tablet device this would be to the right of the above content,
if mobile this would be below the above content.
</div><!-- end content-primary -->
</div><!-- end 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はどっちが先でもおそらく大丈夫。
ぼちぼちと改造していきますよ
“jQuery Mobileを使ってタブレット向けっぽいレイアウト” への1件の返信