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

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

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

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


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

Continue reading

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

前回の「【Monaca】Onsen UI + JavaScriptで買い物リストを作る」では、再起動するたびに買い物リストが消えてします。


今回は、localStorageを使用し、買い物リストを読み込み・保存する処理を付け加えます。
Continue reading

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

今回は、Onsen UI + JavaScriptのみで買い物リストを作ります。
機能としては、買い物リストの新規登録・編集・削除、ons-list-itemの追加・編集・削除を重点においていますので、再起動すると買い物リストは消えてしまいます。
買い物リストの保存については、次回に紹介する予定です。
Continue reading

【Monaca】Onsen UI V2 ons-list-itemをドラッグ&ドロップで並び替える

2年前の記事、「【Monaca】ons-list-itemをドラッグ&ドロップで並び替える」および「【Monaca】ons-list-itemをドラッグ&ドロップで並び替える・その2」で紹介した方法は、Onsen UI V1とjQueryを使用したが、今回はjQueryを使用せず、Onsen UI V2と「Sortable」を一部改造して実現してみた。


Continue reading

【Monaca】スクロールごとにons-list-itemを追加する

Twitterのように、スクロールごとに新しいツイートを取得するような処理をOnsen UIで実現できないだろうか?

ons-pageng-infinite-scrollという属性を利用することで実現できる。
ng-infinite-scrollにデータを取得する関数を指定し、スクロールによってその関数が呼び出されると、引数としてコールバック関数が渡される。
引き続きデータを取得する場合、そのコールバック関数を実行する。
また、ある特定の範囲でスクロールさせ、データを取得してons-list-itemを追加する場合、その範囲にクラスcontentを追加することで実現できる。
Monacaで新規プロジェクト「Onsen UI V2 Angular 1 Minimum」を作成し、Monacaデバッガーで動作確認済み。
下記のサンプルコードでは、高さ200pxのdiv内でスクロールごとに10件ずつons-list-itemが追加され、最大200件まで追加される。

Continue reading

【Monaca】ons-list-itemをドラッグ&ドロップで並び替える・その2

Onsen UI V2対応はこちらから。


※11/22再編集
前回の「【Monaca】ons-list-itemをドラッグ&ドロップで並び替える」で記載したコードにはいくつか問題点があった。
ons-list-itemの背景色でわかりにくかったが、helper(移動中のons-list-item)のborder-topが消えたり、一番下のons-list-itemを移動させると、下から二番目のons-list-itemが下がるが、ons-listborder-bottomons-list-item)のborder-bottomが重なって線が太くなるなど。

二日間もいろいろと試した結果、下記のコードになった。
【Monaca】Onsen UI ons-list のズレをなくす」で紹介したCSSを適用することで面倒なborder-topborder-bottomの処理を軽減することができた。
また、「三」のアイコンをドラッグすることで入れ替えが行われるように変更した。
それから、style.cssでは、CSSによる変化が確認できるようにあえて色を変えているので、コードを流用する場合は注意していただきたい。

※11/22追記
iPhoneなどの高解像度のスマートフォンで動作させると、メディアクエリーを使用しているため、CSSが正常に機能しないことがわかった。
コード修正済み。
(boder-topborder-bottomを使用していない。)

index.html
[html]













Sortable Test2






{{name}}







Check Table




[/html]

app.js
[JavaScript]
“use strict”;
var app = ons.bootstrap(“myApp”, [“onsen”]);
app.controller(“page1Controller”, [“$scope”, function($scope) {
$scope.table = [
“戸崎”,
“ルメール”,
“デムーロ”,
“川田”,
“福永”
];
$scope.startIndex = 0;

ons.ready(function() {
$(“#sort-list”).sortable({
axis: “y”, // 縦方向のみ
handle: “ons-icon”, // アイコンをドラッグした場合に並び替える
tolerance: “pointer”, // タップした位置で並び替える
containment: “parent”, // ドラッグの範囲は親(ons-list)内
revert: 200,
start: function(e, ui) {
console.log(“start:” + ui.item.index());
// 開始位置を保存
$scope.startIndex = ui.item.index();
// helperのborder-top、background-colorを設定する
ui.item[0].classList.add(“item-helper”);
// placeholderを表示、border-bottomを設定する
ui.placeholder.css(“visibility”, “visible”);
ui.placeholder[0].classList.add(“item-placeholder”);
},
stop: function(e, ui) {
console.log(“stop:” + ui.item.index());
// helperのborder-top、background-colorを解除する
ui.item[0].classList.remove(“item-helper”);
// placeholderを非表示、border-bottomを解除する
ui.placeholder.css(“visibility”, “hidden”);
ui.placeholder[0].classList.remove(“item-placeholder”);
},
update: function(e, ui) {
console.log(“update:” + ui.item.index());
// 配列を入れ替える
var data = $scope.table[$scope.startIndex];
$scope.table.splice($scope.startIndex, 1);
$scope.table.splice(ui.item.index(), 0, data);
// 配列の状態を表示
$scope.checkTable();
},
change: function(e, ui) {
console.log(“change:” + ui.item.index());
},
over: function(e, ui) {
console.log(“over:” + ui.item.index());
},
out: function(e, ui) {
console.log(“out:” + ui.item.index());
}
});
$(“#sort-list”).disableSelection();
});
$scope.$on(“$destroy”, function(e) {
$scope.table = [];
});
$scope.checkTable = function() {
console.log(“———-“);
for (var i = 0; i < $scope.table.length; i++) { console.log($scope.table[i]); } }; }]); [/JavaScript] style.css
[css]
/* onsen-uiのons-list、ons-list-itemを変更 */
.list {
border-top: none;
border-bottom: none;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.list {
border: none;
}
}
.list__item {
border-top: none;
border-bottom: 1px solid #ddd;
}
.list__item:first-child {
border-top: none;
border-bottom: 1px solid #ddd;
}
.list__item:last-child {
border-top: none;
border-bottom: 1px solid #ddd;
}
.list__item:first-child:last-child {
border-top: none;
border-bottom: 1px solid #ddd;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.list__item,
.list__item:first-child,
.list__item:last-child,
.list__item:first-child:last-child,
.list__item:not(:last-child) {
border-bottom: none;
-webkit-background-size: 100% 1px;
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom;
background-image: -webkit-linear-gradient(90deg, #ddd, #ddd, #ddd);
background-image: -moz-linear-gradient(90deg, #ddd, #ddd, #ddd);
background-image: -o-linear-gradient(90deg, #ddd, #ddd, #ddd);
background-image: linear-gradient(0deg, #ddd, #ddd, #ddd);
/* background-image: -webkit-linear-gradient(90deg, #ddd, #ddd 50%, transparent 50%);
background-image: -moz-linear-gradient(90deg, #ddd, #ddd 50%, transparent 50%);
background-image: -o-linear-gradient(90deg, #ddd, #ddd 50%, transparent 50%);
background-image: linear-gradient(0deg, #ddd, #ddd 50%, transparent 50%);*/
}
}

/* sortable */
#sort-list ons-list-item {
max-height: 44px;
}
#sort-list ons-list-item:hover {
cursor: move;
}
#sort-list .item-helper {
border-top: 1px solid #f00;
background-color: #bfb;
}
#sort-list .item-placeholder {
border-bottom: 1px solid #00f;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
#sort-list .item-helper {
border: none;
-webkit-background-size: 100% 1px, 100% 1px;
background-size: 100% 1px, 100% 1px;
background-repeat: no-repeat;
background-position: bottom, top;
background-image: -webkit-linear-gradient(90deg, #f00, #f00, #f00), -webkit-linear-gradient(270deg, #f00, #f00, #f00);
background-image: -moz-linear-gradient(90deg, #f00, #f00, #f00), -moz-linear-gradient(270deg, #f00, #f00, #f00);
background-image: -o-linear-gradient(90deg, #f00, #f00, #f00), -o-linear-gradient(270deg, #f00, #f00, #f00);
background-image: linear-gradient(0deg, #f00, #f00, #f00), linear-gradient(180deg, #f00, #f00, #f00);

}
#sort-list .item-placeholder {
border: none;
}
}
[/css]

【Monaca】ons-list-itemをドラッグ&ドロップで並び替える

Onsen UI V2対応はこちらから。


※Onsen UI + AngularJSを使用。
以下のファイルを準備する。
jquery-3.1.1.min.js
jquery-ui.min.js
jquery.ui.touch-punch.min.js
④jquery-ui.min.css(②zipに同梱)
jsフォルダに上記①~③ファイルとapp.jsを配置する。
cssフォルダに上記④ファイルとstyle.cssを配置する。

$scope.tableに初期データを設定し、ons-listで一覧を表示する。
ons-list-itemをドラッグ&ドロップし、[Check Table]ボタンを押下すると、コンソールに並び替えた$scope.tableの内容が表示される。
———-
ルメール
戸崎
川田
デムーロ
福永

2016-11-17-20-42-44 2016-11-17-20-45-21

index.html
[html]













Sortable Test




{{item.name}}


Check Table




[/html]

app.js
[javascript]
“use strict”;
var app = ons.bootstrap(“myApp”, [“onsen”]);
app.controller(“page1Controller”, [“$scope”, function($scope) {
$scope.table = [
{ id: “1”, name: “戸崎”, color: “#8888ff” },
{ id: “2”, name: “ルメール”, color: “#88ff88” },
{ id: “3”, name: “デムーロ”, color: “#ff8888” },
{ id: “4”, name: “川田”, color: “#ffff88” },
{ id: “5”, name: “福永”, color: “#ff88ff” }
];
ons.ready(function() {
$(“#sort-list”).sortable({
axis: “y”,
tolerance: “pointer”,
update: function(e, ui) {
var arrayId = $(“#sort-list”).sortable(“toArray”);
var table = [];
for (var i = 0; i < arrayId.length; i++) { for (var j = 0; j < arrayId.length; j++) { if (arrayId[i] == $scope.table[j].id) { table.push($scope.table[j]); break; } } } $scope.table = angular.copy(table); } }); $("#sort-list").disableSelection(); }); $scope.$on("$destroy", function(e) { $scope.table = []; }); $scope.checkTable = function() { console.log("----------"); for (var i = 0; i < $scope.table.length; i++) { console.log($scope.table[i].name); } }; }]); [/javascript] ※ons-list-itemの高さが45px(奇数)だと、ドラッグ&ドロップの際に毎回ズレが生じるため、44pxに変更している。
(jquery-ui.min.jsの処理で高さの1/2を算出する処理があるため。)

style.css
[css]
#sort-list ons-list-item {
max-height: 44px;
}
#sort-list ons-list-item:hover {
cursor: move;
}
[/css]