magicnodeball_ui/index.html at master · deschaefer/magicnodeball_ui · 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Magic Node Ball</title>

    <link rel="stylesheet" href="themes/nodeball.min.css"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css"/>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>


</head>
<body>
<script>

    var choices = [
        'No',
        'Yes',
        'Ask me later',
        'Better not',
        'Definitely Not!',
        'Do not hesitate',
        'Green',
        'Red',
        'Vote Yes',
        'Vote No'
    ];


    $(document).bind("ready", function () {
        // Make your jQuery Mobile framework configuration changes here!

// ajax code
//        $.support.cors = true;
//        $.mobile.allowCrossDomainPages = true;
//
//        var success = function (data) {
//            var answer = data.magicnodeball.reponse;
//            $('#answer').html(answer);
//        }

        $("#shake").bind("click", function (event, ui) {

            var pos = Math.floor((Math.random()*10)+1);
            var rval = {};
            rval.magicnodeball = {};
            rval.magicnodeball.reponse = choices[pos-1];
            var answer = rval.magicnodeball.reponse;
            $('#answer').html(answer);


// ajax code
//            $.ajax({
//                dataType: 'xml',
//                crossDomain: true,
//                data: { dataname : 'demo_dna_consu',
//                        key : 'Gp93neGEP2682dp4IImv',
//                        token : 'i0Wh1eSid5IYE0U9UVT3',
//                        table : 'menu_groups' },
//                url: 'https://admin.poslavu.com/cp/reqserv/',
//                success: success
//            });
        });

    });


</script>
<div data-role="page" data-theme="a" id="home" data-transition="fade">
    <div data-role="header">
        <h1>Magic Node Ball</h1>
    </div>
    <div data-role="content">
        <p data-role='button' id='shake'>Shake</p>

        <p style='text-align: center; font-size: 2em' id='answer'></p>
    </div>

    <div data-role="footer" class='ui-bar' data-position="fixed">
        <a href="#about">About</a>
    </div>
</div>

<div data-role="page" id="about" data-theme='a' data-add-back-btn="true" data-back-btn-text="Previous"
     data-transition="fade">
    <div data-role="header">
        <h1>About</h1>
    </div>
    <div data-role="content">
        <p>This is a simple "Magic 8 Ball" clone with a node backend to learn something about mobile development.</p>
    </div>
    <div data-role="footer" class='ui-bar' data-position="fixed">
        <a href="#home">home</a>
    </div>
</div>

</body>
</html>