タグ: Monaca

【Monaca】Onsen UI 自作のテンキーボードを制御する

前回紹介した【Monaca】Onsen UI 自作のテンキーボードを表示するの続き、制御の処理を追加したいと思います。
※2020/05/04 コードの一部を修正。

otak-lab

2020.04.03

【Monaca】Onsen UI 自作のテンキーボードを表示する

https://otak-lab.com/archives/3113

今回は、Onsen UIに自作のテンキーボードを表示する方法を紹介します。FX収支管理の入力画面と同じ方法です。Monacaデバッガーの結果です。iOS版Android版次回は、各キーの制御について紹介する予定です。HTML<div class="div-tenkey"> <div class="div-tenkey_board"> <ons-row vertical-align="center"> <ons-col width="3%"></ons-col> <ons-col width="22%"> <ons-button modifier="large" class=&...

【Monaca】Onsen UI 自作のテンキーボードを表示する

今回は、Onsen UIに自作のテンキーボードを表示する方法を紹介します。
FX収支管理の入力画面と同じ方法です。
Continue reading

Cordova CSS HTML JavaScript Monaca Onsen UI tenkey テンキーテンキーボード

【Monaca】Onsen UI ons-toolbarに2行の文字列を表示する

シンプル利益計算は、仕入金額と利益を表示する場所を節約するため、ツールバーのスペースを利用し、2行で表示するように変更しています。
今回は、ons-toolbarに2行の文字列を表示する方法を紹介します。
Continue reading

Android Cordova iOS JavaScript Monaca ons-toolbar Onsen UI

【Monaca】Onsen UI ons-list-itemの余白を調整する

Onsen UIを利用したアプリでデータなどの一覧を表示する場合、ons-listとons-list-itemを使用します。
しかし、ons-list-itemの余白により、表示できる行数が限られたり、表示バランスがイメージどおりにならない問題が発生します。
今回は、ons-list-itemの余白を調整する方法を紹介します。
Continue reading

Android Cordova CSS iOS iPhone Monaca ons-list-item Onsen UI

【Monaca】Onsen UIで数字をタップして選択する

「カレンダーの日付を選択する方法がわからない」など問い合わせが多いので、そのヒントとして、数字をタップして選択する方法について説明します。

数字をタップして選択する箇所は、HTML + CSSのみで実現できます。
Continue reading

CSS HTML input JavaScript Monaca Onsen UI radio ラジオボタン

【Monaca】Onsen UIの動きを理解するには・・・

teratailに質問しても回答が得られないまたは問題が解決されない質問を例に、Onsen UIの動きを理解するにはどうすればよいか、解説したいと思います。

teratail[テラテイル]

teratail【テラテイル】｜ITエンジニア特化型Q&Aサイト

https://teratail.com

teratail（テラテイル）はプログラミングに特化したQ&Aサイトです。実現したい機能や作業中に発生したエラーについて質問すると、他のエンジニアから回答を得られます。

JavaScript Monaca Onsen UI teratail

【Cordova】cordova-plugin-ionic-keyboardプラグインの注意点について

バナー広告を表示した状態でキー入力を行うと、広告が邪魔になってしまいます。
そこで、cordova-plugin-ionic-keyboardプラグインのキーボードの表示直前に発火するkeyboardWillShowイベント、キーボードの非表示後に発火するkeyboardDidHideイベントを利用して、広告の表示・非表示を制御します。
keyboardWillShowイベントはひと癖あるので、今回はその注意点について説明します。