ons-list-item - otak-lab

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

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

【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.

JavaScript mBaaS mobile backend Monaca NIFCLOUD ons-list-item ons-splitter Onsen UI ニフクラリスト買い物

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

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

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

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

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

otak-lab

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

️2019/10/31

今回は、Onsen UI + JavaScriptのみで買い物リストを作ります。機能としては、買い物リストの新規登録・編集・削除、ons-list-itemの追加・編集・削除を重点においていますので、再起動すると買い物リストは消えてしまいます。買い物リストの保存については、次回に紹介する予定です。Monacaデバッガーの結果です。買い物リスト画面の右下の(＋)ボタンをタップすると、商品名入力画面が表示されます。商品名を入力後、右上の保存ボタンをタップすると、買い物リストに入力した商品名が追加されます。買い物リストの商品名をタップする...

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

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

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

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

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

【Monaca】Onsen UI 選択したons-list-itemを削除する

今回は、Onsen UI + JavaScriptで、選択したons-list-itemを削除する方法を紹介したいと思います。
Continue reading

Cordova JavaScript Monaca ons-list-item Onsen UI

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

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

GitHub

GitHub - SortableJS/Sortable: Reorderable drag-and-drop lists for modern brow...

https://github.com/RubaXa/Sortable

Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required. - GitHub - SortableJS/Sortable: Reorderable drag-and-drop lists for modern browsers and touch...

DnD Monaca ons-list-item Onsen UI sortable ドラッグドロップ並べ替え

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

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

ons-pageのng-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

Cordova Monaca ng-infinite-scroll ons-list ons-list-item ons-page Onsen UI スクロール

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

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

otak-lab

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

️2018/09/20

2年前の記事、「【Monaca】ons-list-itemをドラッグ＆ドロップで並び替える」および「【Monaca】ons-list-itemをドラッグ＆ドロップで並び替える・その２」で紹介した方法は、Onsen UI V1とjQueryを使用したが、今回はjQueryを使用せず、Onsen UI V2と「Sortable」を一部改造して実現してみた。MonacaクラウドIDEで、新しいプロジェクト「Onsen UI V2 Angular 1 Minimum」を作成し、各コードを準備する。SortableはY軸のほかにX軸の移動もできてしまうため、ons-list-itemのドラッグ＆ドロップには都合が悪い。そこで、オプションにver...

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

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

jQuery Monaca ons-list-item Onsen UI sortable 並べ替え

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

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

otak-lab

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

️2018/09/20

2年前の記事、「【Monaca】ons-list-itemをドラッグ＆ドロップで並び替える」および「【Monaca】ons-list-itemをドラッグ＆ドロップで並び替える・その２」で紹介した方法は、Onsen UI V1とjQueryを使用したが、今回はjQueryを使用せず、Onsen UI V2と「Sortable」を一部改造して実現してみた。MonacaクラウドIDEで、新しいプロジェクト「Onsen UI V2 Angular 1 Minimum」を作成し、各コードを準備する。SortableはY軸のほかにX軸の移動もできてしまうため、ons-list-itemのドラッグ＆ドロップには都合が悪い。そこで、オプションにver...

※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の内容が表示される。
———-
ルメール
戸崎
川田
デムーロ
福永

index.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/jquery.ui.touch-punch.min.js"></script>
    <link rel="stylesheet" href="css/jquery-ui.min.css">
    <script src="js/app.js"></script>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <ons-sliding-menu main-page="page1.html" swipeable="false"></ons-sliding-menu>
    <ons-template id="page1.html">
        <ons-page ng-controller="page1Controller">
            <ons-toolbar fixed-style>
                <div class="center">Sortable Test</div>
            </ons-toolbar>
            <ons-list id="sort-list" model="table">
                <ons-list-item id="{{item.id}}" style="background-color: {{item.color}}" ng-repeat="item in table">
                    {{item.name}}
                </ons-list-item>
            </ons-list>
            <ons-button ng-click="checkTable()">Check Table</ons-button>
        </ons-page>
    </ons-template>
</body>
</html>

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

32

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<ons-sliding-menu main-page="page1.html" swipeable="false"></ons-sliding-menu>

<ons-template id="page1.html">

<ons-page ng-controller="page1Controller">

<ons-toolbar fixed-style>

<div class="center">Sortable Test</div>

</ons-toolbar>

<ons-list id="sort-list" model="table">

<ons-list-item id="{{item.id}}" style="background-color: {{item.color}}" ng-repeat="item in table">

</ons-list-item>

</ons-list>

<ons-button ng-click="checkTable()">Check Table</ons-button>

</ons-page>

</ons-template>

</body>

</html>

app.js

"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);
        }
    };
}]);

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

32

33

34

35

36

37

38

39

40

"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);

}

};

}]);

※ons-list-itemの高さが45px(奇数)だと、ドラッグ＆ドロップの際に毎回ズレが生じるため、44pxに変更している。
(jquery-ui.min.jsの処理で高さの1/2を算出する処理があるため。)

style.css

#sort-list ons-list-item {
    max-height: 44px;
}
#sort-list ons-list-item:hover {
    cursor: move;
}

1

2

3

4

5

6

#sort-list ons-list-item {

max-height: 44px;

}

#sort-list ons-list-item:hover {

cursor: move;

}

Monaca ons-list-item Onsen UI sortable 並べ替え

2025年4月
月	火	水	木	金	土	日
	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

タグ: ons-list-item