UNPKG

6.96 kBMarkdownView Raw
1---
2title: Dialogs
3description: Use native dialog UI elements
4---
5<!--
6# license: Licensed to the Apache Software Foundation (ASF) under one
7# or more contributor license agreements. See the NOTICE file
8# distributed with this work for additional information
9# regarding copyright ownership. The ASF licenses this file
10# to you under the Apache License, Version 2.0 (the
11# "License"); you may not use this file except in compliance
12# with the License. You may obtain a copy of the License at
13#
14# http://www.apache.org/licenses/LICENSE-2.0
15#
16# Unless required by applicable law or agreed to in writing,
17# software distributed under the License is distributed on an
18# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
19# KIND, either express or implied. See the License for the
20# specific language governing permissions and limitations
21# under the License.
22-->
23
24|AppVeyor|Travis CI|
25|:-:|:-:|
26|[![Build status](https://ci.appveyor.com/api/projects/status/github/apache/cordova-plugin-dialogs?branch=master)](https://ci.appveyor.com/project/ApacheSoftwareFoundation/cordova-plugin-dialogs)|[![Build Status](https://travis-ci.org/apache/cordova-plugin-dialogs.svg?branch=master)](https://travis-ci.org/apache/cordova-plugin-dialogs)|
27
28# cordova-plugin-dialogs
29
30This plugin provides access to some native dialog UI elements
31via a global `navigator.notification` object.
32
33Although the object is attached to the global scoped `navigator`, it is not available until after the `deviceready` event.
34
35 document.addEventListener("deviceready", onDeviceReady, false);
36 function onDeviceReady() {
37 console.log(navigator.notification);
38 }
39
40## Installation
41
42 cordova plugin add cordova-plugin-dialogs
43
44## Methods
45
46- `navigator.notification.alert`
47- `navigator.notification.confirm`
48- `navigator.notification.prompt`
49- `navigator.notification.beep`
50
51## navigator.notification.alert
52
53Shows a custom alert or dialog box. Most Cordova implementations use a native
54dialog box for this feature, but some platforms use the browser's `alert`
55function, which is typically less customizable.
56
57 navigator.notification.alert(message, alertCallback, [title], [buttonName])
58
59- __message__: Dialog message. _(String)_
60
61- __alertCallback__: Callback to invoke when alert dialog is dismissed. _(Function)_
62
63- __title__: Dialog title. _(String)_ (Optional, defaults to `Alert`)
64
65- __buttonName__: Button name. _(String)_ (Optional, defaults to `OK`)
66
67
68### Example
69
70 function alertDismissed() {
71 // do something
72 }
73
74 navigator.notification.alert(
75 'You are the winner!', // message
76 alertDismissed, // callback
77 'Game Over', // title
78 'Done' // buttonName
79 );
80
81### Supported Platforms
82
83- Android
84- Browser
85- iOS
86- Windows
87
88## navigator.notification.confirm
89
90Displays a customizable confirmation dialog box.
91
92 navigator.notification.confirm(message, confirmCallback, [title], [buttonLabels])
93
94- __message__: Dialog message. _(String)_
95
96- __confirmCallback__: Callback to invoke with index of button pressed (1, 2, or 3) or when the dialog is dismissed without a button press (0). _(Function)_
97
98- __title__: Dialog title. _(String)_ (Optional, defaults to `Confirm`)
99
100- __buttonLabels__: Array of strings specifying button labels. _(Array)_ (Optional, defaults to [`OK,Cancel`])
101
102
103### confirmCallback
104
105The `confirmCallback` executes when the user presses one of the
106buttons in the confirmation dialog box.
107
108The callback takes the argument `buttonIndex` _(Number)_, which is the
109index of the pressed button. Note that the index uses one-based
110indexing, so the value is `1`, `2`, `3`, etc.
111
112### Example
113
114 function onConfirm(buttonIndex) {
115 alert('You selected button ' + buttonIndex);
116 }
117
118 navigator.notification.confirm(
119 'You are the winner!', // message
120 onConfirm, // callback to invoke with index of button pressed
121 'Game Over', // title
122 ['Restart','Exit'] // buttonLabels
123 );
124
125### Supported Platforms
126
127- Android
128- Browser
129- iOS
130- Windows
131
132### Android Quirks
133
134- Android supports a maximum of three buttons, and ignores any more than that.
135
136- Android dialog title cannot exceed 2 lines of content, it will ignore any more than this.
137
138### Windows Quirks
139
140- On Windows8/8.1 it is not possible to add more than three buttons to MessageDialog instance.
141
142- On Windows Phone 8.1 it's not possible to show dialog with more than two buttons.
143
144## navigator.notification.prompt
145
146Displays a native dialog box that is more customizable than the browser's `prompt` function.
147
148 navigator.notification.prompt(message, promptCallback, [title], [buttonLabels], [defaultText])
149
150- __message__: Dialog message. _(String)_
151
152- __promptCallback__: Callback to invoke with index of button pressed (1, 2, or 3) or when the dialog is dismissed without a button press (0). _(Function)_
153
154- __title__: Dialog title _(String)_ (Optional, defaults to `Prompt`)
155
156- __buttonLabels__: Array of strings specifying button labels _(Array)_ (Optional, defaults to `["OK","Cancel"]`)
157
158- __defaultText__: Default textbox input value (`String`) (Optional, Default: empty string)
159
160### promptCallback
161
162The `promptCallback` executes when the user presses one of the buttons
163in the prompt dialog box. The `results` object passed to the callback
164contains the following properties:
165
166- __buttonIndex__: The index of the pressed button. _(Number)_ Note that the index uses one-based indexing, so the value is `1`, `2`, `3`, etc.
167
168
169
170- __input1__: The text entered in the prompt dialog box. _(String)_
171
172### Example
173
174 function onPrompt(results) {
175 alert("You selected button number " + results.buttonIndex + " and entered " + results.input1);
176 }
177
178 navigator.notification.prompt(
179 'Please enter your name', // message
180 onPrompt, // callback to invoke
181 'Registration', // title
182 ['Ok','Exit'], // buttonLabels
183 'Jane Doe' // defaultText
184 );
185
186### Supported Platforms
187
188- Android
189- Browser
190- iOS
191- Windows
192
193### Android Quirks
194
195- Android supports a maximum of three buttons, and ignores any more than that.
196
197- On Android 3.0 and later, buttons are displayed in reverse order for devices that use the Holo theme.
198
199### Windows Quirks
200
201- On Windows prompt dialog is html-based due to lack of such native api.
202
203## navigator.notification.beep
204
205The device plays a beep sound.
206
207 navigator.notification.beep(times);
208
209- __times__: The number of times to repeat the beep. _(Number)_
210
211### Example
212
213 // Beep twice!
214 navigator.notification.beep(2);
215
216### Supported Platforms
217
218- Android
219- Browser
220- iOS
221- Windows 8
222
223### Android Quirks
224
225- Android plays the default __Notification ringtone__ specified under the __Settings/Sound & Display__ panel.