現在、画面遷移の練習をしています。
list.html画面とdetail.html画面を作りました。
list.htmlからdetail.htmlに画面遷移をするようにしたいのですが、出来ません。
自分で調べていると、<ons-template id="detail.html"> ここの設置場所が違うのかなぁと思っています。
画面遷移をさせるやり方がわかる方回答よろしくお願いします。
HTML
1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 7 <script src="components/loader.js"></script> 8 <script src="lib/onsenui/js/onsenui.min.js"></script> 9 10 <link rel="stylesheet" href="components/loader.css"> 11 <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 12 <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> 13 <link rel="stylesheet" href="css/style.css"> 14 15 <script> 16 ons.ready(function() { 17 console.log("Onsen UI is ready!"); 18 }); 19 </script> 20</head> 21<body> 22 <ons-navigator page="list.html" var="app.navi"> 23 24 <ons-template id="list.html"> 25 <!-- list.htmlの内容 --> 26 <ons-page id="list-page"> 27 <ons-toolbar> 28 <div class="center"> 29 HOOK 30 </div> 31 </ons-toolbar> 32 33 <ons-list> 34 <ons-list-item modifier="chevron" class="item"> 35 <ons-row> 36 <ons-col width="60px"> 37 <div class="item-thum"></div> 38 </ons-col> 39 <ons-col> 40 <header> 41 <span class="item-title">item title</span> 42 <span class="item-label">4h</span> 43 </header> 44 <p class="item-desc">lorem ipusum</p> 45 </ons-col> 46 </ons-row> 47 48 </ons-list-item> 49 </ons-list> 50 </ons-page> 51 </ons-template> 52 </ons-navigator> 53 54 55 <ons-template id="detail.html"> 56 <!-- detail.htmlの内容 --> 57 <ons-page id="detail-page"> 58 <ons-toolbar> 59 <div class="left"> 60 <ons-back-button>BACK</ons-back-button>> 61 </div> 62 <div class="center"> 63 Details 64 </div> 65 </ons-toolbar> 66 67 <ons-list modifier="inset" style="margin-top: 10px;"> 68 <ons-list-item class="item"> 69 <ons-row> 70 <ons-col width="60px"> 71 <div class="item-thum"> 72 </div> 73 </ons-col> 74 <ons-col> 75 <header> 76 <span class="item-title">TITLE</span> 77 <span class="item-label">FOOBAR</span> 78 </header> 79 <p class="item-desc">DESC</p> 80 </ons-col> 81 </ons-row>> 82 </ons-list-item>> 83 </ons-page> 84 </ons-template> 85 86 87 88</body> 89</html> 90 91
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/03 06:16
2017/12/04 00:08 編集
2017/12/04 08:49
2017/12/04 10:05 編集
2017/12/04 10:52