タグ: ons-splitter

【Monaca】Onsen UI + JavaScriptで買い物リストを作るその4

今回は、localStorageからニフクラ mobile backendのデータストアにデータを保存するように改造します。

mbaas.nifcloud.com

ニフクラ mobile backend

https://mbaas.nifcloud.com

スマホアプリ開発に必要な機能をクラウド上で提供するので、面倒なサーバー開発が一切不要。アプリ開発をよりスマートにスピーディに。

ncmb.min.jsというファイルが必要ですので、githubからダウンロードしてください。

GitHub

GitHub - NIFCLOUD-mbaas/ncmb_js: ニフクラ mobile backend JavaScript SDK

https://github.com/NIFCloud-mbaas/ncmb_js

ニフクラ mobile backend JavaScript SDK . Contribute to NIFCLOUD-mbaas/ncmb_js development by creating an account on GitHub.

【Monaca】Onsen UI + JavaScriptで買い物リストを作るその3

今回は、ons-splitterでメニューを表示し、初期化画面に切り替え、買い物リストを初期化する処理を追加します。
※前回より少しずつコードが変わっていますので、ご注意ください。
Continue reading

JavaScript localStorage Monaca ons-list-item ons-splitter Onsen UI リスト買い物

【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

Cordova JavaScript Monaca ons-navigator ons-splitter Onsen UI

【Monaca】ons-splitterのスワイプを制御する(Onsen UI v2)

※Onsen UI v2
ons-splitter-sideに設定したidを取得し、swipeableを取ったり付けたりして制御する。

var elem = document.getElementById("menu");
if (isSwipe) {
  elem.setAttribute("swipeable", "");
} else {
  elem.removeAttribute("swipeable");
}

var elem = document.getElementById("menu");

if (isSwipe) {

elem.setAttribute("swipeable", "");

} else {

elem.removeAttribute("swipeable");

}

Monaca ons-splitter Onsen UI swipe スワイプ

月	火	水	木	金	土	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31