toasts.html
4.39 KB
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE HTML>
<html>
<head>
<title>nativeDroid II - jQueryMobile Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
<link rel="stylesheet" href="/vendor/waves/waves.min.css" />
<link rel="stylesheet" href="/css/nativedroid2.css" />
<style>
/* Prevent FOUC */
body { opacity: 0; }
</style>
</head>
<body>
<div data-role="page">
<nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>
<div data-role="header" data-position="fixed">
<a href="#leftpanel" class="ui-btn ui-btn-left"><i class="zmdi zmdi-menu"></i></a>
<h1>Toasts</h1>
</div>
<div role="main" class="ui-content" data-inset="false">
<span class="nd2-title">Toasts</span>
<p>
Toasts are small notification appearing from the bottom. According to the <a href="https://www.google.com/design/spec/components/snackbars-toasts.html" target="_blank">Material Design Guidelines</a> they have no icon and at least a small message. Optional you can place one action button.
</p>
<p>
In nativeDroid<sup>2</sup> you can trigger Toasts in two different ways.
</p>
<span class="nd2-title">Programmatically</span>
<p>
<pre><strong>new</strong> $.nd2Toast({ <em>// The 'new' keyword is important, otherwise you would overwrite the current toast instance</em>
<strong>message</strong> : "Sample Message", <em>// Required</em>
<strong>action</strong> : { <em>// Optional (Defines the action button on the right)</em>
title : "Pick phone", <em>// Title of the action button</em>
link : "/any/link.html", <em>// optional (either link or fn or both must be set to define an action)</em>
fn : function() { <em>// function that will be triggered when action clicked</em>
console.log("Action Button clicked'");
},
color : "red" <em>// optional color of the button (default: 'lime')</em>
},
<strong>ttl</strong> : 8000 <em>// optional, time-to-live in ms (default: 3000)</em>
});</pre>
</p>
<span class="nd2-title">By Data Attributes</span>
<p>
<pre><a href="#"
<strong>data-role="toast"</strong>
<strong>data-toast-message</strong>="Simple toast message set by data-message"
data-toast-action-title="Action"
data-toast-action-link="toasts.html"
data-toast-action-color="red"
data-toast-ttl="6000">Link</a></pre>
</p>
<span class="nd2-title">Demonstration</span>
<p>
<a href="#"
class="ui-btn clr-btn-accent-blue ui-btn-inline"
data-role="toast"
data-toast-message="Simple toast message set by data-message"
data-toast-action-title="Action"
data-toast-action-link="toasts.html"
data-toast-action-color="red"
data-toast-ttl="6000"><i class='zmdi zmdi-play'></i> Open Toast by data attributes</a>
<a href="#"
class="ui-btn clr-btn-accent-green ui-btn-inline"
data-role="toast"
data-toast-message="I'm just text"><i class='zmdi zmdi-play'></i> Sample Toast with Text Message only</a>
</p>
<a href="#"
class="ui-btn
ui-btn-inline
ui-btn-fab
ui-btn-fab-bottom
ui-btn-raised
clr-primary"
data-role="toast"
data-toast-message="Mic on"
data-toast-action-title="Abort"
data-toast-action-link="toasts.html"
data-toast-action-color="yellow">
<i class='zmdi zmdi-mic-off zmd-2x'></i>
</a>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script src="/vendor/waves/waves.min.js"></script>
<script src="/js/nativedroid2.js"></script>
<script src="/nd2settings.js"></script>
<<script type="text/javascript">
// Toast Test
new $.nd2Toast({
message : "Message has been deleted",
action : {
title : "undo",
fn : function() {
console.log("I am the function called by 'Pick phone...'");
},
color : "lime"
},
ttl : 3000
});
</script>
</body>
</html>