message/message.html at master · burningice529/message · 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="css/animate.css" rel="stylesheet">
<link href="css/unwisdom.message.css" rel="stylesheet">
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="src/unwisdom.js"></script>
<script type="text/javascript" src="src/unwisdom.helper.js"></script>
<script type="text/javascript" src="src/unwisdom.message.js"></script>
</head>
<body>

    <div style="padding: 150px; text-align: center;">
        <a href="javascript:;" data-position="topright">右上</a>
        <a href="javascript:;" data-position="lowerleft">左下</a>
        <a href="javascript:;" data-position="lowerright">右下</a>
    </div>

    <script type="text/javascript">

    var mappings = {
        topright : {
            inClass : 'flipInX',
            outClass: 'flipOutX'
        },
        lowerleft : {
            inClass : 'fadeInUp',
            outClass: 'fadeOutLeft'
        },
        lowerright : {
            inClass : 'tada',
            outClass: 'zoomOut'
        }
    }


        $(document).on('click', 'a', function () {
            var my = $(this);
            var position = my.data('position');
            var color = ['green', 'blue', 'red', 'yellow', 'black'][Math.floor(Math.random() * 5)];
            var content = 'You have many options to position and animate your jBoxes!You have many options to position and animate your jBoxes!You have many options to position and animate your jBoxes!You have many options to position and animate your jBoxes!You have many options to position and animate your jBoxes!You have many options to position and animate your jBoxes!You have many options to position and animate your jBoxes!'.substring(0, 50)

            uw.message({
                title: 'Title',
                content: content,
                inClass: mappings[position].inClass,
                outClass: mappings[position].outClass,
                position: position, // topright|lowerleft|lowerright
                color: color, // green|blue|red|yellow|black
            });
        });


    </script>
</body>
</html>