Q&A
スマホアプリでtoastを実装したいと思い、OnsenUIのtoastを書いてみたのですが、toastの表示位置がスクロールしない状態の最下部で固定されています。
スクロールしても最下部に表示させたいのですが、色々調べてみてもわかりませんでした。
javascript
1<html lang="ja"> 2<head> 3 <meta charset="utf-8"> 4 <meta name="viewport" content="width=device-width, user-scalable=no"> 5 <link rel="stylesheet" href="css/style.css"> 6</head> 7<body data-role="none" class="body"> 8 <header class="header"> 9 <img src="img/header.png" class="header-image"> 10 </header> 11 <div class="siteContent"> 12 <div class="input_data_your_data"> 13 <h3 data-role="none">アカウント情報の入力</h3> 14 <div class="contact-form"> 15 <!-- Form --> 16 <div class="bottom_space"> 17 <form data-role="none" id="account" method="post" action="#"> 18 <table data-role="none" class="your_form_table" id="your-form-table"> 19 <tr data-role="none" class="your_form_tr"> 20 <th data-role="none" class="your_form_left"> 21 <label data-role="none" for="service_name"> 22 サービス名 23 </label> 24 </th> 25 <td data-role="none" class="your_form_right"> 26 <input data-role="none" type="text" name="service_name_0" id="service_name_0" class="your_input_text"> 27 </td> 28 </tr> 29 <tr data-role="none"> 30 <td data-role="none" class="your_bar" colspan="2"></td> 31 </tr> 32 <tr data-role="none" class="your_form_tr"> 33 <th data-role="none" class="your_form_left"> 34 <label data-role="none" for="service_id"> 35 ログインID 36 </label> 37 </th> 38 <td data-role="none" class="your_form_right"> 39 <input data-role="none" type="text" name="service_id_0" id="service_id_0" class="your_input_text"> 40 </td> 41 </tr> 42 <tr data-role="none"> 43 <td data-role="none" class="your_bar" colspan="2"></td> 44 </tr> 45 <tr data-role="none" class="your_form_tr"> 46 <th data-role="none" class="your_form_left"> 47 <label data-role="none" for="service_pass"> 48 パスワード 49 </label> 50 </th> 51 <td data-role="none" class="your_form_right"> 52 <input data-role="none" type="text" name="service_pass_0" id="service_pass_0" class="your_input_text"> 53 </td> 54 </tr> 55 </table> 56 <input data-role="none" class="btn-flat-double-border-tsuika" id="account_0" type="button" onClick="Add(this);" value="登録する"> 57 </form> 58 <div data-role="none" id="addtable"> 59 </div> 60 <div class="bottom_space"> 61 <input data-role="none" class="btn-flat-double-border-tsuika" id="add" type="button" onclick="AddTable();" value="アカウントを追加する"> 62 </div> 63 <div> 64 <a data-role="none" href="your_data.html" class="btn-circle-border-simple"> 65 戻る 66 </a> 67 </div> 68 </div> 69 </div> 70 </div> 71 </div> 72 <script language="javascript" type="text/javascript"> 73 var i = 0 ; 74 //読み込み時処理 75 document.addEventListener('DOMContentLoaded', function() { 76 Load(); 77 }, false); 78 document.addEventListener('deviceready', function() { 79 Load(); 80 }, false); 81 82 function Load(){ 83 //ローカルストレージの読み込み 84 var argument_service_name = localStorage.getItem('service_name_' + i ); 85 var argument_service_id = localStorage.getItem('service_id_' + i ); 86 var argument_service_pass = localStorage.getItem('service_pass_' + i ); 87 //変数に中身があるか確認 88 while(argument_service_name !== null) { 89 //ローカルストレージから挿入 90 document.getElementById('service_name_' + i ).value = argument_service_name; 91 document.getElementById('service_id_' + i ).value = argument_service_id; 92 document.getElementById('service_pass_' + i ).value = argument_service_pass; 93 //次のテーブルを作成、カウントアップ 94 AddTable(); 95 //ローカルストレージの再読み込み 96 argument_service_name = localStorage.getItem('service_name_' + i ); 97 argument_service_id = localStorage.getItem('service_id_' + i ); 98 argument_service_pass = localStorage.getItem('service_pass_' + i ); 99 } 100 } 101 102 //アカウント入力欄を追加する 103 function AddTable(){ 104 i ++; 105 var newForm = document.createElement('form'); 106 newForm.id = 'account_' + i; 107 newForm.className = 'data-role-none'; 108 109 var service_name = document.createElement('input'); 110 service_name.type = 'text'; 111 service_name.id = 'service_name_' + i; 112 service_name.className = 'data-role-none'; 113 service_name.className = 'your_input_text'; 114 115 var service_id = document.createElement('input'); 116 service_id.type = 'text'; 117 service_id.id = 'service_id_' + i; 118 service_id.className = 'data-role-none'; 119 service_id.className = 'your_input_text'; 120 121 var service_pass = document.createElement('input'); 122 service_pass.type = 'text'; 123 service_pass.id = 'service_pass_' + i; 124 service_pass.className = 'data-role-none'; 125 service_pass.className = 'your_input_text'; 126 127 var div = document.createElement('div'); 128 div.className = 'data-role-none'; 129 div.className = 'bottom_space'; 130 131 var table = document.createElement('table'); 132 table.className = 'data-role-none'; 133 table.className = 'your_form_table'; 134 table.id = 'your_form_table' 135 136 var tr1 = document.createElement('tr'); 137 tr1.className = 'your_form_tr'; 138 tr1.className = 'data-role-none'; 139 var tr2 = document.createElement('tr'); 140 tr2.className = 'data-role-none'; 141 tr2.className = 'your_form_tr'; 142 var tr3 = document.createElement('tr'); 143 tr3.className = 'data-role-none'; 144 tr3.className = 'your_form_tr'; 145 146 var th1 = document.createElement('th'); 147 th1.className = 'data-role-none'; 148 th1.className = 'your_form_left'; 149 var th2 = document.createElement('th'); 150 th2.className = 'data-role-none'; 151 th2.className = 'your_form_left'; 152 var th3 = document.createElement('th'); 153 th3.className = 'data-role-none'; 154 th3.className = 'your_form_left'; 155 156 var td1 = document.createElement('td'); 157 td1.className = 'data-role-none'; 158 td1.className = 'your_form_right'; 159 var td2 = document.createElement('td'); 160 td2.className = 'data-role-none'; 161 td2.className = 'your_form_right'; 162 var td3 = document.createElement('td'); 163 td3.className = 'data-role-none'; 164 td3.className = 'your_form_right'; 165 166 var lavel1 = document.createElement('lavel'); 167 lavel1.className = 'lavel1' 168 var lavel2 = document.createElement('lavel'); 169 lavel2.className = 'lavel2' 170 var lavel3 = document.createElement('lavel'); 171 lavel3.className = 'lavel3' 172 173 var tr_bar1 = document.createElement('tr'); 174 var td_bar1 = document.createElement('td'); 175 td_bar1.className = 'data-role-none'; 176 td_bar1.className = 'your_bar'; 177 td_bar1.colSpan = '2'; 178 179 var tr_bar2 = document.createElement('tr'); 180 var td_bar2 = document.createElement('td'); 181 td_bar2.className = 'data-role-none'; 182 td_bar2.className = 'your_bar'; 183 td_bar2.colSpan = '2'; 184 185 var button = document.createElement('input'); 186 button.className = 'data-role-none'; 187 button.className = 'btn-flat-double-border-tsuika'; 188 button.type = 'button'; 189 button.id = 'account_' + i; 190 button.value = '登録する' 191 button.onclick = function(){ 192 Add(this); 193 }; 194 195 var parent = document.getElementById('addtable'); 196 197 parent.appendChild(div); 198 div.appendChild(newForm); 199 newForm.appendChild(table); 200 201 table.appendChild(tr1); 202 tr1.appendChild(th1); 203 th1.appendChild(lavel1); 204 lavel1.innerHTML = "サービス名"; 205 tr1.appendChild(td1); 206 td1.appendChild(service_name); 207 table.appendChild(tr_bar1); 208 tr_bar1.appendChild(td_bar1); 209 210 table.appendChild(tr2); 211 tr2.appendChild(th2); 212 th2.appendChild(lavel2); 213 lavel2.innerHTML = "ログインID"; 214 tr2.appendChild(td2); 215 td2.appendChild(service_id); 216 table.appendChild(tr_bar2); 217 tr_bar2.appendChild(td_bar2); 218 219 table.appendChild(tr3); 220 tr3.appendChild(th3); 221 th3.appendChild(lavel3); 222 lavel3.innerHTML = "パスワード"; 223 tr3.appendChild(td3); 224 td3.appendChild(service_pass); 225 226 newForm.appendChild(button); 227 } 228 229 //ローカルストレージに保存する 230 function Add(account_no) { 231 //フォームナンバーを変数に入れる 232 var idNo = account_no.id;//これだと「submit_0」 233 idNo = idNo.replace(/[^0-9]/g, '');//数字を取り出す 234 235 //ローカルストレージに保存する 236 var serviceName = document.getElementById('service_name_' + idNo).value; 237 var serviceId = document.getElementById('service_id_' + idNo).value; 238 var servicePass = document.getElementById('service_pass_' + idNo).value; 239 240 localStorage.setItem('service_name_' + idNo, serviceName); 241 localStorage.setItem('service_id_' + idNo, serviceId); 242 localStorage.setItem('service_pass_' + idNo, servicePass); 243 244 callDialog(); 245 } 246 function callDialog(){ 247 ons.notification.toast('Hi there!', { timeout: 1000, animation: 'ascend' }); 248 } 249 </script> 250</body> 251</html>
OnsenUI以外のtoastでtoastrを使ってみましたが下記のエラーが出てしまいます。
ReferenceError: Can't find variable: toastr
同じく、iziToastを試しても同じエラーが出ました。
ReferenceError: Can't find variable: iziToast
環境：monacaIDE monacaデバッガー iphone7
どのような方法でも良いので、スクロールしても画面下部に表示されるtoastの実装の仕方を教えてください。
お願いします。
回答1件
0
Onsen UI Playgroundでtoastを実行したら上下にtoast張り付きますけど。OnsenUIで試したソースを質問本文に張ったほうが回答つきやすいと思いますよ。
html
1<ons-page> 2 <p> 3 <br><br> <br><br> 分かりやすく <br><br> <br><br> 4 <ons-button 5 onclick="ons.notification.toast('Hi there!', { timeout: 1000, animation: 'fall' })" 6 > 7 Queue notification toast (top) 8 </ons-button> 9 10 <br><br> <br><br> 分かりやすく <br><br> <br><br> 11 12 <ons-button onclick="myToast.toggle()">Toggle element toast (bottom)</ons-button> 13 <br><br> <br><br> 分かりやすく <br><br> <br><br> 14 </p> 15 16 <ons-fab position="bottom right">+</ons-fab> 17</ons-page> 18 19<ons-toast id="myToast" animation="ascend"> 20 FABs up! 21 <button onclick="myToast.hide()">ok</button> 22</ons-toast>
投稿2020/03/18 15:00
総合スコア2826
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/12 05:40