javascript-mobile-app-template/ui-action-button.htm at main · bug7a/javascript-mobile-app-template · GitHub

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html>
    <head>

        <title>UI Action Button</title>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

        <link rel="stylesheet" type="text/css" href="basic/basic.css">
        <script src="basic/basic.js" type="text/javascript" charset="utf-8"></script>

        <script src="components/ui-action-button.js" type="text/javascript" charset="utf-8"></script>

        <script>

        const actionDataList = [
            { id: "1", text: "Take a Photo" },
            { id: "2", text: "Add from Gallery" },
            { id: "3", text: "Add from URL" },
        ];

        const start = function() {

            page.color = "whitesmoke";

            // *** EXAMPLE 1:

            // UI ACTION BUTTON: Default values.
            //UIActionButton.resetDefault();
            //UIActionButton.default.actionButtonColor = "#FFD541"
            //UIActionButton.default.menuButtonColor = "#FFFFFF"
            //UIActionButton.default.menuBackgroundColor = "whitesmoke"
            //UIActionButton.default.menuWidth = 280
            //UIActionButton.default.actionButtonSelectedColor = "lightgray"
            //UIActionButton.default.actionButtonIconFile = "components/ui-action-button/add.png"
            //UIActionButton.default.actionButtonIconSelectedFile = "components/ui-action-button/add.png"
            //UIActionButton.default.actionButtonIconRotate = 0
            //UIActionButton.default.actionButtonSelectedIconRotate = 45
            //UIActionButton.default.coverBackgroundColor = "rgba(0, 0, 0, 0.0)"
            //UIActionButton.default.actionButtonBorder = 4
            //UIActionButton.default.rightOuterSpace = 40
            //UIActionButton.default.bottomOuterSpace = 40
            //UIActionButton.default.menuRightOuterSpace = 20
            //UIActionButton.default.iconSize = 30

            // UI ACTION BUTTON: Object description.
            page.uiActionButton = UIActionButton.create();
            // boxOfPage.add(that);
            that.setItemsByDataList(actionDataList);
            that.onAction(function(actionId) {

                console.log("Clicked action: " + actionId);

                switch (actionId) {

                    case "id1":
                        break;

                    case "id2":
                        break;

                }

            });

            // NOTE: If you dont use .setItemsByDataList() function component call onAction function directly.

        }

        </script>

    </head>
    <body>

        <!-- HTML content -->

    </body>
</html>