-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
279 lines (227 loc) · 11 KB
/
demo.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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
<!DOCTYPE html>
<!--
PickAndChoose v1.2
https://www.github.com/kloverde/jquery-PickAndChoose
This software is licensed under the 3-clause BSD license.
Copyright (c) 2016 Kurtis LoVerde
All rights reserved
Donations: https://paypal.me/KurtisLoVerde/6
-->
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=8"/> <!-- IE 8 is so ancient that "compatibility mode" now means incompatibility mode. Turn it off. -->
<title>PickAndChoose Demo</title>
<link rel="stylesheet" type="text/css" href="css/pickAndChoose.css"/>
<style type="text/css">
#widget2 button {
height: 30px;
width: 105px;
background-color: #FFFFFF;
color: #0000FF;
}
#widget2 button.special {
background-color: #0000FF !important;
color: #FFFFFF !important;
}
#callbackOutput {
margin-top: 20px;
width: 500px;
min-height: 80px;
border: 1px solid #000000;
}
#widget5 select {
border: 1px solid black;
}
#widget5 select:hover {
border: 1px solid #0000FF;
background-color: #EDF9FC;
}
option.optionTextColor {
color: #FFFFFF;
}
option.optionStyle1 {
background-color: #6BC9E8;
}
option.optionStyle2 {
background-color: #C88DF0;
}
option.optionStyle3 {
background-color: #F7A414;
}
p, li{
width: 510px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="jquery.pickAndChoose.js"></script>
<script type="text/javascript">
$( document ).ready( function() {
$( "#widget1" ).pickAndChoose( {
unselectedItems : { "Choice 1" : "choice1",
"Choice 2" : "choice2",
"Choice 4" : "choice4",
"Choice 5" : "choice5",
"Choice 7" : "choice7" },
selectedItems : { "Choice 3" : "choice3",
"Choice 6" : "choice6" }
} );
$( "#widget2" ).pickAndChoose( {
selectedId : "widget2Selected",
selectedName : "widget2Selected",
unselectedId : "widget2Unselected",
unselectedName : "widget2Unselected",
buttonSelectText : "Select",
buttonSelectAllText : "Select All",
buttonDeselectText : "Deselect",
buttonDeselectAllText : "Deselect All",
buttonSelectAllClass : "special",
buttonDeselectAllClass : "special",
unselectedItems : { "Choice 1" : "choice1",
"Choice 2" : "choice2",
"Choice 4" : "choice4",
"Choice 5" : "choice5",
"Choice 7" : "choice7" },
selectedItems : { "Choice 3" : "choice3",
"Choice 6" : "choice6" }
} );
$( "#widget3" ).pickAndChoose( {
selectedId : "widget3Selected",
selectedName : "widget3Selected",
unselectedId : "widget3Unselected",
unselectedName : "widget3Unselected",
unselectedItems : { "Choice 1" : "choice1",
"Choice 2" : "choice2",
"Choice 3" : "choice3",
"Choice 4" : "choice4",
"Choice 5" : "choice5" },
onChangeCallback : changeCallback
} );
$( "#widget4" ).pickAndChoose( {
selectedId : "widget4Selected",
selectedName : "widget4Selected",
unselectedId : "widget4Unselected",
unselectedName : "widget4Unselected",
createSelectElements : false,
unselectedId : "select1",
selectedId : "select2"
} );
$( "#widget5" ).pickAndChoose( {
selectedId : "widget5Selected",
selectedName : "widget5Selected",
unselectedId : "widget5Unselected",
unselectedName : "widget5Unselected",
optionCssClass : "optionTextColor",
unselectedItems : { "Choice 1" : { value : "choice1",
cssClass : "optionStyle1" },
"Choice 2" : { value : "choice2",
cssClass : "optionStyle2" },
"Choice 3" : { value : "choice3",
cssClass : "optionStyle3" } }
} );
try {
$( "#widget6" ).pickAndChoose( {
selectedId : "widget4Selected",
selectedName : "widget4Selected",
unselectedId : "widget4Unselected",
unselectedName : "widget4Unselected",
unselectedItems : { "Choice 1" : "choice1",
"Choice 2" : "choice2",
"Choice 3" : "choice3",
"Choice 4" : "choice4",
"Choice 5" : "choice5",
"Choice 6" : "choice6",
"Choice 7" : "choice7" },
selectedItems : { "Choice 3" : "value does not matter when scanning for duplicate keys" },
showErrors : true
} );
} catch( e ) {
}
$( "#widget6" ).append( "<p>This line was successfully written via script due to catching the exception</p>" );
} );
function optionOnClick() {
var count = $( "#widget5Unselected select option:selected" ).length;
$( "#numOptionsSelected" ).html( count + " options selected" );
}
function changeCallback( operation, recipient, items ) {
var div = $( "#callbackOutput" );
div.html( "Operation: " + operation + "<br/>" );
div.append( "Recipient of items: " + recipient.prop("id") + "<br/>" );
div.append( "Received items:<br/>" );
$.each( items, function(idx, item) {
div.append( "key: " + item.key + ", value: " + item.value + "<br/>" );
} );
}
</script>
</head>
<body>
<form name="myForm" action="non-existent-url"> <!-- The form is just here to demonstrate that the <button>s are of type "button", not "submit" -->
<h2>Successful initialization</h2>
<div id="widget1"></div>
<h2>Overriding default configuration: ensuring uniqueness of <select> identifiers & altering button properties</h2>
<p>
Note that for the first time, IDs and names were passed in. You need to do this if you have more than one widget in
your page, since relying on the default value will result in duplicates.
</p>
<p>CSS styling has also been added to the buttons, and their default text has been changed.</p>
<p>See README.md or the plugin code for a complete list of customization options.</p>
<div id="widget2"></div>
<h2>Using a callback</h2>
<div id="widget3"></div>
<div id="callbackOutput">Look here after making some selections</div>
<h2>Initializing with preexisting <select> elements</h2>
<p>
Unlike the other examples seen thus far, the <select>s seen here were
not created by PickAndChoose; they were already present in the page.
The buttons were still created dynamically. If you go this route, put
the <select>s adjacent to each other in their own container, with no
other content inside.
</p>
<div id="widget4">
<select id="select1" name="select1">
<option value="choice1">Choice 1</option>
<option value="choice1">Choice 2</option>
<option value="choice1">Choice 3</option>
<option value="choice1">Choice 4</option>
</select>
<select id="select2" name="select2">
</select>
</div>
<h2>Styling the selection boxes</h2>
<p>
PickAndChoose supports two ways of specifying a CSS class for <option>:
</p>
<ol>
<li>
<code>settings.optionCssClass</code>, which is applied to every <option>
in the widget. Here, a global style is used to make the text white. Of course,
you could also use CSS to target them directly, rather than assigning a class.
That's how the <select>s got their hover colors. Use whichever method
you prefer.
<br/><br/>
</li>
<li>Individual styles:<br/><br/>
As of PickAndChoose v1.2, an <option>'s value declaration can be an
object. This allows you to specify additional configuration for an
<option>, which you can use to add a CSS class. Here, individual
styles are used to set the background color.
</li>
</ol>
<div id="widget5"></div>
<h2>Failed initialization</h2>
<p>
If you attempt to initialize the widget with the same key present in both
<select>s, the widget will not initialize and an exception will be
thrown. If showErrors is set to true, the exception message is written
to the container (see below). If you can't be sure of the integrity of
your data, and if you want the rest of your page's JavaScript to continue
in the event of an initialization failure, be sure to wrap the plugin
invocation in a try/catch.
</p>
<div id="widget6"></div>
</form>
<h2>Donations</h2>
Your support is greatly appreciated, and it motivates me to keep this project alive and to release more open source software.<br/>
<a href="https://paypal.me/KurtisLoVerde/6" target="new">https://paypal.me/KurtisLoVerde/6</a>
</body>
</html>