今回は、Onsen UIのons-carouselにドットナビゲーションを表示する方法を紹介します。
【Monaca】Onsen UI ons-splitterとons-navigatorを組み合わせる
Monacaの「Onsen UI V2 JS Splitter」のサンプルやOnsen UIのons-splitterの実例では、ons-splitter-contentのloadメソッドでページの切り替えを行っていますが、ons-navigatorを組み合わせてページ遷移を行うサンプルがないので、どのようにすればよいか悩む方も多いと思います。
ons-splitter-content内にons-navigatorを組み込み、メニューで項目を選択した場合、ons-splitter-contentではなく、ons-navigatorのページを切り替えることで実現できます。
Continue reading
【Monaca】ツールバーとコンテンツの間に固定のヘッダーを作成する
下図は「シンプル利益計算」の画面ですが、ツールバーの下に日付・期間・グラフを表示し、その下にリストを表示するように作成しています。
リストをスクロールすると、日付・期間・グラフの表示位置は固定のため、スクロールに影響することなく表示することができます。
今回はツールバーとコンテンツの間に固定のヘッダーを作成する方法を説明します。
Continue reading
【Monaca】Onsen UI V2 ダイアログ内のメッセージをスクロール可能にする
JavaScript 切り上げ・切り捨て・四捨五入
計算処理で切り上げ・切り捨て・四捨五入を使うが、忘れてしまうのでまとめてみた。
Continue reading
【Monaca】JavaScript + Onsen UI V2 選択したデータを前画面に渡す
約2年前に書いた【Monaca】Onsen UI 選択したデータを前画面に渡す記事のJavaScript + Onsen UI V2版。(AngularJS未使用版)
Page1で「ここをタップ」をタップし、Page2で「100000」をタップすると、Page1に戻り「100000」と表示される。
問題は選択したデータを前画面に渡す方法。
やり方はいろいろあるが、もっとも簡単な方法はグローバル変数に選択したデータを保存する方法。
下記コードでは、独自のsetParamメソッドでグローバル変数に選択したデータを保存し、popPageメソッドで前画面に戻り、その途中で発生するons-navigatorのprepopイベントで選択したデータに書き換えている。
Continue reading
【Monaca】動的にOnsen UIのCSSを切り替える
今回はOnsen UIのCSSを動的に切り替える方法を紹介する。
Continue reading
【Monaca】Onsen UIでnend広告が表示されない
最新記事はこちら。
Onsen UIを使用してnend広告を表示させようと、下記コードを設置しても表示されない。(※テスト用コード)
どうして?と悩む方も多いと思う。
答えは簡単。
実際は広告が表示されているが、Onsen UIはCSSでz-indexを使用しているため、Onsen UIが表示した画面の裏に隠れてしまう。
広告用のコードをdivタグで囲い、z-index: 99でOnsen UIが表示した画面の上に表示させる。
既存のブラウザで表示させたい場合は、【Monaca】nend広告を既存ブラウザで表示するを参照。