回答編集履歴
6
追記
answer
CHANGED
@@ -1,8 +1,9 @@
|
|
1
1
|
[onsオブジェクト](https://ja.onsen.io/v2/guide/fundamentals.html#onsobujekuto)や[ready(callback)](https://ja.onsen.io/v2/api/js/ons.html#method-ready)を読んで下さい。
|
2
|
-
`上記だけでは不十分な可能性が有ります。調査中`
|
3
|
-
|
4
2
|
- 簡単に言うとons.ready()が呼ばれるとCordovaやUnsenUI関係の命令が使えるように準備が終わった状態になります。
|
5
3
|
|
4
|
+
[ページのライフサイクル - Onsen UI](https://ja.onsen.io/v2/guide/lifecycle.html)も見て下さい。
|
5
|
+
- 各ページの準備(init)ができてないと、CSSコンポーネント(Switchとか)の参照に失敗するようです。
|
6
|
+
|
6
7
|
OnsenUI V2 JS Splitter ベースにSwitch関係を追記。
|
7
8
|
**Monaca のIDEでOnsenUI V2 JS Splitterをインポート後、index.htmlをこれで上が書いてみて下さい。**
|
8
9
|
**ons.ready()に実験コードを追加**
|
@@ -25,9 +26,8 @@
|
|
25
26
|
ons.ready(function () {
|
26
27
|
console.log("start");
|
27
28
|
console.log(`ons.isReady() is ${ons.isReady()} は念の為確認`);
|
28
|
-
//
|
29
|
+
// 正しくは別記codepenでの記載のようにinit()内で記載しないとタイミングによってはエラーとなる。
|
29
30
|
// console.log(document.getElementById('pushswitch').checked);
|
30
|
-
// ⇡のコメントを外すとchangeイベントが呼び出されない?
|
31
31
|
document.getElementById('pushswitch').addEventListener('change', function (e) {
|
32
32
|
console.log(document.getElementById('pushswitch').checked);
|
33
33
|
});
|
@@ -125,7 +125,7 @@
|
|
125
125
|
|
126
126
|
```
|
127
127
|
|
128
|
-
codepenでのテストコードも追加
|
128
|
+
codepenでのテストコードも追加。たぶんこれでOK
|
129
129
|
```html
|
130
130
|
<!DOCTYPE html>
|
131
131
|
<html>
|
@@ -140,13 +140,20 @@
|
|
140
140
|
ons.ready(function () {
|
141
141
|
console.log("start");
|
142
142
|
console.log(`ons.isReady() is ${ons.isReady()} は念の為確認`);
|
143
|
-
//
|
143
|
+
// 各ページの初期化が終わってない段階で[checked]は参照できないのでエラーになる。
|
144
|
-
console.log(document.getElementById('pushswitch').checked);
|
144
|
+
// console.log(document.getElementById('pushswitch').checked);
|
145
|
-
|
145
|
+
|
146
146
|
document.getElementById('pushswitch').addEventListener('change', function (e) {
|
147
147
|
console.log(document.getElementById('pushswitch').checked);
|
148
148
|
});
|
149
|
+
console.log("addEventListener end");
|
150
|
+
// 各ページの初期化が終わってから値を参照すること。
|
151
|
+
document.addEventListener('init', function (event) {
|
152
|
+
if (event.target.matches('#main')) {
|
153
|
+
console.log('#main');
|
149
|
-
|
154
|
+
console.log(document.getElementById('pushswitch').checked);
|
155
|
+
}
|
156
|
+
}, false);
|
150
157
|
});
|
151
158
|
</script>
|
152
159
|
</head>
|
@@ -156,6 +163,5 @@
|
|
156
163
|
<ons-switch id="pushswitch" checked></ons-switch>
|
157
164
|
</ons-page>
|
158
165
|
</body>
|
159
|
-
|
160
166
|
</html>
|
161
167
|
```
|
5
追記
answer
CHANGED
@@ -1,4 +1,6 @@
|
|
1
1
|
[onsオブジェクト](https://ja.onsen.io/v2/guide/fundamentals.html#onsobujekuto)や[ready(callback)](https://ja.onsen.io/v2/api/js/ons.html#method-ready)を読んで下さい。
|
2
|
+
`上記だけでは不十分な可能性が有ります。調査中`
|
3
|
+
|
2
4
|
- 簡単に言うとons.ready()が呼ばれるとCordovaやUnsenUI関係の命令が使えるように準備が終わった状態になります。
|
3
5
|
|
4
6
|
OnsenUI V2 JS Splitter ベースにSwitch関係を追記。
|
4
codepenでのテストコードも追加
answer
CHANGED
@@ -121,4 +121,39 @@
|
|
121
121
|
</html>
|
122
122
|
|
123
123
|
|
124
|
+
```
|
125
|
+
|
126
|
+
codepenでのテストコードも追加
|
127
|
+
```html
|
128
|
+
<!DOCTYPE html>
|
129
|
+
<html>
|
130
|
+
|
131
|
+
<head>
|
132
|
+
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
|
133
|
+
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
|
134
|
+
<script src="https://unpkg.com/onsenui/js/onsenui.js"></script>
|
135
|
+
<meta charset="UTF-8">
|
136
|
+
<title>OnsenUI</title>
|
137
|
+
<script>
|
138
|
+
ons.ready(function () {
|
139
|
+
console.log("start");
|
140
|
+
console.log(`ons.isReady() is ${ons.isReady()} は念の為確認`);
|
141
|
+
// ↓のコメントを外すとchangeイベントの登録が呼び出されない?
|
142
|
+
console.log(document.getElementById('pushswitch').checked);
|
143
|
+
// ⇡のコメントを外すとchangeイベントの登録が呼び出されない?
|
144
|
+
document.getElementById('pushswitch').addEventListener('change', function (e) {
|
145
|
+
console.log(document.getElementById('pushswitch').checked);
|
146
|
+
});
|
147
|
+
console.log(document.getElementById('pushswitch').checked);
|
148
|
+
});
|
149
|
+
</script>
|
150
|
+
</head>
|
151
|
+
|
152
|
+
<body>
|
153
|
+
<ons-page id="main">
|
154
|
+
<ons-switch id="pushswitch" checked></ons-switch>
|
155
|
+
</ons-page>
|
156
|
+
</body>
|
157
|
+
|
158
|
+
</html>
|
124
159
|
```
|
3
ons.ready()に実験コードを追加
answer
CHANGED
@@ -2,7 +2,8 @@
|
|
2
2
|
- 簡単に言うとons.ready()が呼ばれるとCordovaやUnsenUI関係の命令が使えるように準備が終わった状態になります。
|
3
3
|
|
4
4
|
OnsenUI V2 JS Splitter ベースにSwitch関係を追記。
|
5
|
-
**Monaca のIDEでOnsenUI V2 JS Splitterをインポート後、index.htmlをこれで
|
5
|
+
**Monaca のIDEでOnsenUI V2 JS Splitterをインポート後、index.htmlをこれで上が書いてみて下さい。**
|
6
|
+
**ons.ready()に実験コードを追加**
|
6
7
|
``` HTML
|
7
8
|
<!DOCTYPE HTML>
|
8
9
|
<html>
|
@@ -19,22 +20,18 @@
|
|
19
20
|
<link rel="stylesheet" href="css/style.css">
|
20
21
|
|
21
22
|
<script>
|
22
|
-
ons.ready(function() {
|
23
|
+
ons.ready(function () {
|
23
|
-
console.log("
|
24
|
+
console.log("start");
|
25
|
+
console.log(`ons.isReady() is ${ons.isReady()} は念の為確認`);
|
26
|
+
// ↓のコメントを外すとchangeイベントが呼び出されない?
|
24
|
-
console.log(document.getElementById(
|
27
|
+
// console.log(document.getElementById('pushswitch').checked);
|
25
|
-
|
28
|
+
// ⇡のコメントを外すとchangeイベントが呼び出されない?
|
26
|
-
|
27
|
-
document.getElementById('pushswitch').addEventListener('change', function(e) {
|
29
|
+
document.getElementById('pushswitch').addEventListener('change', function (e) {
|
28
|
-
|
30
|
+
console.log(document.getElementById('pushswitch').checked);
|
31
|
+
});
|
29
|
-
|
32
|
+
console.log(document.getElementById('pushswitch').checked);
|
30
|
-
}else{
|
31
|
-
console.log("nocheck");
|
32
|
-
}
|
33
33
|
});
|
34
34
|
|
35
|
-
|
36
|
-
});
|
37
|
-
|
38
35
|
window.fn = {};
|
39
36
|
window.fn.open = function() {
|
40
37
|
var menu = document.getElementById('menu');
|
@@ -123,4 +120,5 @@
|
|
123
120
|
</body>
|
124
121
|
</html>
|
125
122
|
|
123
|
+
|
126
124
|
```
|
2
追記
answer
CHANGED
@@ -1,7 +1,8 @@
|
|
1
1
|
[onsオブジェクト](https://ja.onsen.io/v2/guide/fundamentals.html#onsobujekuto)や[ready(callback)](https://ja.onsen.io/v2/api/js/ons.html#method-ready)を読んで下さい。
|
2
2
|
- 簡単に言うとons.ready()が呼ばれるとCordovaやUnsenUI関係の命令が使えるように準備が終わった状態になります。
|
3
3
|
|
4
|
-
OnsenUI V2 JS Splitter ベースにSwitch関係を追記
|
4
|
+
OnsenUI V2 JS Splitter ベースにSwitch関係を追記。
|
5
|
+
**Monaca のIDEでOnsenUI V2 JS Splitterをインポート後、index.htmlをこれでうわがいてみて下さい。**
|
5
6
|
``` HTML
|
6
7
|
<!DOCTYPE HTML>
|
7
8
|
<html>
|
1
追記
answer
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
[onsオブジェクト](https://ja.onsen.io/v2/guide/fundamentals.html#onsobujekuto)を読んで下さい。
|
1
|
+
[onsオブジェクト](https://ja.onsen.io/v2/guide/fundamentals.html#onsobujekuto)や[ready(callback)](https://ja.onsen.io/v2/api/js/ons.html#method-ready)を読んで下さい。
|
2
2
|
- 簡単に言うとons.ready()が呼ばれるとCordovaやUnsenUI関係の命令が使えるように準備が終わった状態になります。
|
3
3
|
|
4
4
|
OnsenUI V2 JS Splitter ベースにSwitch関係を追記
|