Androidでメモを投稿して共有できるアプリを目指して作っています。
使っているのはmonacaでHTML(とSCC?)でonsenUIです。
画面下(実機で見ると画面上)に3つのボタン?タブ?を表示させたのですが、右二つはタップできるのですが、一番左がタップできません。
そして、その一番左をタップして表示するはずのページをメインページにしたいのですが、そのやり方もわかりません。(今は一番右がメインページになってしまっています)
メインにしたい左のページとはtab1.htmlと#first-pageです。
ソースはこのようなかんじです。
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 20 document.addEventListener('show', function(event) { 21 var page = event.target; 22 var titleElement = document.querySelector('#toolbar-title'); 23 24 if (page.matches('#first-page')) { 25 titleElement.innerHTML = '新しいメモ'; 26 } else if (page.matches('#second-page')) { 27 titleElement.innerHTML = 'マイメモ'; 28 } else (page.matches('#thied-page')) { 29 titleElement.innerHTML = '共有'; 30 } 31 }); 32 </script> 33</head> 34 35<body> 36 <ons-page> 37 <ons-toolbar> 38 <div class="center" id="toolbar-title" style="background-color: #0000cd;"></div> 39 </ons-toolbar> 40 <ons-tabbar position="auto"> 41 <ons-tab label="新しいメモ" page="tab1.html" active style="background-color: #0000cd;"> 42 </ons-tab> 43 <ons-tab label="マイメモ" page="tab2.html" active style="background-color: #0000cd;"> 44 </ons-tab> 45 <ons-tab label="共有" page="tab3.html" active style="background-color: #0000cd;"> 46 </ons-tab> 47 </ons-tabbar> 48 </ons-page> 49 50 <ons-template id="tab1.html"> 51 <ons-page id="first-page"> 52 <p style="text-align: left;"> 53 タイトル<br> 54 <input type="text" name="name" size="39" maxlength="22"></p> 55 <p style="text-align: left;"> 56 せんたくし1<br> 57 <select name="taisaku"> 58 <option value="food">A</option> 59 <option value="huku">B</option> 60 <option value="kankyo">C</option> 61 <option value="kanzida">D</option> 62 <option value="sutoresu">E</option> 63 <option value="sonota">F</option> 64 </select></p> 65 <p style="text-align: left;"> 66 せんたくし2<br> 67 <select name="nioi"> 68 <option value="ari">あり</option> 69 <option value="nasi">なし</option> 70 </select></p> 71 <p style="text-align: left;"> 72 本文<br> 73 <textarea name="honbun" rows="20" cols="40"> 74 </textarea> 75 </p> 76 <br> 77 <br> 78 <p style="text-align: center;"> 79 <button class="button3" type="submit">保存</button> 80 </p> 81 </ons-page> 82 </ons-template> 83 84 <ons-template id="tab2.html"> 85 <ons-page id="second-page"> 86 <p style="text-align: center;"> 87 This is the second page. 88 </p> 89 </ons-page> 90 </ons-template> 91 92 <ons-template id="tab3.html"> 93 <ons-page id="thied-page"> 94 <p style="text-align: center;"> 95 This is thied page. 96 </p> 97 </ons-page> 98 </ons-template> 99 100</body> 101</html> 102
原因は何でしょうか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/01/27 00:03