質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Q&A

1回答

780閲覧

OnsenuiのBackButtonでのコールバック設定方法

hiroki-1122

総合スコア10

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

0グッド

0クリップ

投稿2022/10/22 16:35

◆前提
現在、onsenuiを使用してアプリ開発を行っています。

◆疑問点
onsenuiのons-back-buttonを押して、前画面に遷移した際に指定した関数が叩かれるようにoptionsのcallbackを設定したいですが、その方法がわかりません

<ons-back-button id="backButton"></ons-back-button>

上記に対して
Onsenui BackButtonリファレンス
options.callbackを設定する方法をご教示していただけないでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ons-back-button 実例コード

html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"> 5 <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css"> 6 <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script> 7 <script> 8 document.addEventListener('init', function(event) { 9 var page = event.target; 10 11 if (page.id === 'page1') { 12 page.querySelector('#push-button').onclick = function() { 13 document.querySelector('#myNavigator').pushPage('page2.html', { 14 data: { 15 title: 'Page 2' 16 } 17 }); 18 }; 19 } //...略 20 else if (page.id === 'page2') { 21 page.querySelector('ons-toolbar .center').innerHTML = page.data.title; 22 // ここから 23 var backButton = page.querySelector('ons-back-button'); 24 backButton.options = { 25 callback: function() { 26 var page1 = document.querySelector('#page1'); // 前に戻る処理(slide)完了後#page1の 27 var page1Paragraph = page1.querySelector('p'); // 子孫 p 要素の 28 page1Paragraph.textContent = this.hoge; // textContentプロパティに自前のプロパティ代入 29 }, 30 animation: 'slide', // “slide”, “lift”, “fade” and “none” 31 hoge: 'ほげほげ' // 自前のプロパティ 32 }; 33 /* // page2の戻るボタン(ons-back-button要素)をClickしたタイミングで 34 var page2 = document.querySelector('#page2'); 35 var backButton = page2.querySelector('ons-back-button'); 36 backButton.onClick = function (event) { console.log(this); }; 37 // backButton.addEventListener('click', function (event) {console.log(this); event.preventDefault(); }); 38 */ 39 } 40 //...略 41 }); 42 </script> 43 </head> 44 <body> 45 <ons-navigator swipeable id="myNavigator" page="page1.html"></ons-navigator> 46 <template id="page1.html"> 47 <ons-page id="page1"> 48 <ons-toolbar> 49 <div class="center">Page 1</div> 50 </ons-toolbar> 51 <p>This is the first page.</p> 52 <ons-button id="push-button">Push page</ons-button> 53 </ons-page> 54 </template> 55 <template id="page2.html"> 56 <ons-page id="page2"> 57 <ons-toolbar> 58 <div class="left"> 59 <ons-back-button>Page 1</ons-back-button> 60 </div> 61 <div class="center"></div> 62 </ons-toolbar> 63 <p>This is the second page.</p> 64 </ons-page> 65 </template> 66 </body> 67</html>

ons-back-buttonのoptionsプロパティに任意のオブジェクトを渡す例です

Onsen UI てのは初見
よく調べずに実例見て適当に書いただけなので参考程度に

投稿2022/10/23 03:55

編集2022/10/26 11:02
bellchin

総合スコア56

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hiroki-1122

2022/10/25 16:39

コメントでのご教授有難うございます。 こちらの回答を早速試させていただきました。 この場合、こちらではpage2の戻るボタンを押したタイミングではなく、page2に遷移してきたタイミングでfunctionの処理が流れてしまうようですが、いかがでしょうか?
bellchin

2022/10/26 11:02

ん~、そちらの状況が今いちよくわからないですが <ons-back-button>のoptions.callbackが意図したタイミングの呼出しでないのなら、他を模索するしかないかと とりあえず単体で動く.htmlに差し替えておきますから、今一度動作を確認してみて下さい
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問