forked from pixel2/jQuery-Easy-Confirm-Dialog-plugin
-
Notifications
You must be signed in to change notification settings - Fork 0
/
examples.html
170 lines (144 loc) · 4.97 KB
/
examples.html
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title>jQuery Easy Confirm Dialog plugin examples</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/blitzer/jquery-ui.css" type="text/css" />
<script src="jquery.easy-confirm-dialog.js"></script>
<script type="text/javascript">
$(function() {
$(".confirm").easyconfirm();
$("#alert").click(function() {
alert("You approved the action");
});
$("#yesno").easyconfirm({locale: { title: 'Select Yes or No', button: ['No','Yes']}});
$("#yesno").click(function() {
alert("You clicked yes");
});
$(".customDialog").easyconfirm({dialog: $("#question")});
$("#svSE").easyconfirm({locale: $.easyconfirm.locales.svSE});
$("#svSE").click(function() {
alert("Tack för att du godkände detta!");
});
$("#french").easyconfirm({locale: {
title: 'Etes-vous sûr?',
text: 'Etes-vous sûr que vous souhaitez effectuer cette action?',
button: ['Annuler',' Confirmer'],
closeText: 'fermer'
}});
$("#french").click(function() {
alert("Je vous remercie de votre soumission!");
});
});
</script>
<style type="text/css">
.ui-dialog { font-size: 11px; }
body {
font-family: Tahoma;
font-size: 12px;
}
#question {
width: 300px!important;
height: 60px!important;
padding: 10px 0 0 10px;
}
#question img {
float: left;
}
#question span {
float: left;
margin: 20px 0 0 10px;
}
</style>
</head>
<body>
<h1>jQuery Easy Confirm Dialog plugin examples</h1>
<p>This is a jQuery based confirm plugin module that will act as the build in confirm-function in javascript but with the ability to style the dialog window. Only using built in jQuery and jQuery UI functions.</p>
<p><strong>No need for manual callbacks</strong>, default event will be put on halt and only executed if user confirms.</p>
<h3>Stuff needed for this example to work</h3>
<pre>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/blitzer/jquery-ui.css" type="text/css" />
<script src="jquery.easy-confirm-dialog.js"></script>
</pre>
<ul>
<li><a href="http://github.com/wiggin/jQuery-Easy-Confirm-Dialog-plugin/raw/master/jquery.easy-confirm-dialog.js">Download jquery.easy-confirm-dialog.js</a> at github</li>
</ul>
<hr />
<pre>
$(".confirm").easyconfirm();
$("#alert").click(function() {
alert("You approved the action");
});
</pre>
<pre>
<a href="#" class="confirm" id="alert">Normal test</a>
<a href="?confirm=true" class="confirm">Normal test with a link</a>
<a href="?confirm=true" class="confirm" title="Are you sure you want to click on this link?">Normal test with a link</a>
</pre>
<ul>
<li><a href="#" class="confirm" id="alert">Normal test</a>
<li><a href="?confirm=true" class="confirm">Normal test with a link</a>
<li><a href="?confirm=true" class="confirm" title="Are you sure you want to click on this link?">Test on a link with custom message</a>
</ul>
<hr />
<pre>
$("#yesno").easyconfirm({locale: { title: 'Select Yes or No', button: ['No','Yes']}});
$("#yesno").click(function() {
alert("You clicked yes");
});
</pre>
<pre>
<a href="#" id="yesno">Normal test with yes and no</a>
</pre>
<ul>
<li><a href="#" id="yesno">Normal test with yes and no</a>
</ul>
<hr />
<pre>
$(".customDialog").easyconfirm({dialog: $("#question")});
</pre>
<pre>
<a href="?confirm=true" class="customDialog">Test with custom confirm dialog</a>
</pre>
<pre>
<div class="dialog" id="question"><img src="question.png" alt="" />Do you want to continue?</div>
</pre>
<ul>
<li><a href="?confirm=true" class="customDialog">Test with custom confirm dialog</a>
</ul>
<div class="dialog" id="question"><img src="question.png" alt="" /><span>Do you want to continue?</span></div>
<hr />
<pre>
$("#svSE").easyconfirm({locale: $.easyconfirm.locales.svSE});
$("#svSE").click(function() {
alert("Tack för ditt bidrag!");
});
</pre>
<pre>
<a href="#" id="svSE">Test with swedish localization</a>
</pre>
<ul>
<li><a href="#" id="svSE">Test with swedish localization</a>
</ul>
<hr />
<pre>
$("#french").easyconfirm({locale: {
title: 'Etes-vous sûr?',
text: 'Etes-vous sûr que vous souhaitez effectuer cette action?',
button: ['Annuler',' Confirmer'],
closeText: 'fermer'
}});
$("#french").click(function() {
alert("Je vous remercie de votre soumission!");
});
</pre>
<pre>
<a href="#" id="french">Test with custom localization</a>
</pre>
<ul>
<li><a href="#" id="french">Test with custom localization</a>
</ul>