forked from TrySound/Selectbox.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
127 lines (106 loc) · 2.86 KB
/
index.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
<!doctype html>
<html>
<head>
<meta charset="utf-8" >
<title>jQuery SelectBox plugin</title>
<link rel="stylesheet" href="src/selectbox.css">
<style>
.sb-container {
margin-bottom: 20px;
}
button {
height: 30px;
background: #444;
border: 1px solid #222;
color: #fff;
cursor: pointer;
outline: 0;
}
.button-send {
width: 200px;
}
a {
display: inline-block;
margin: 50px 0;
color: #000;
}
</style>
</head>
<body>
<form action="">
<select name="country_id" class="sb-init" data-sb-custom="custom-class">
<option value="">-- Select country --</option>
<optgroup label="North America">
<option value="1">USA</option>
<option value="9">Canada</option>
</optgroup>
<optgroup label="Europe">
<option value="2">France</option>
<option value="3">Spain</option>
<option value="6">Bulgaria</option>
<option value="7" disabled>Greece</option>
<option value="8">Italy</option>
</optgroup>
<optgroup label="Asia" disabled>
<option value="5">Japan</option>
<option value="11">China</option>
</optgroup>
<option value="4">Brazil</option>
<option value="10">South Africa</option>
</select>
<div>
<select name="param" id="sb">
<option value="">-- select --</option>
<option value="1">Param1</option>
<option value="2">Param2</option>
<option value="3">Param3</option>
</select>
<button type="button" id="sb-open">Open</button>
<button type="button" id="sb-close">Close</button>
<button type="button" id="sb-enable">Enable</button>
<button type="button" id="sb-disable">Disable</button>
<button type="button" id="sb-attach">Attach</button>
<button type="button" id="sb-detach">Detach</button>
</div>
<button type="submit" class="button-send">Send</button>
</form>
<a href="https://github.com/TrySound/Selectbox.js">Back to GitHub</a>
<script src="src/selectbox.js"></script>
<script>
// Delay callback
setTimeout(function () {
Selectbox('.sb-init', {
onOpen: function () {
console.log('Open');
}
});
}, 5000);
var sb = Selectbox('#sb', {
custom: 'custom-sb'
});
// Preventing auto close
document.getElementById('sb-open').addEventListener('mousedown', function (e) {
Selectbox('select:not(#sb)').close();
e.stopPropagation();
}, false);
document.getElementById('sb-open').addEventListener('click', function () {
sb.open();
}, false);
document.getElementById('sb-close').addEventListener('click', function () {
sb.close();
}, false);
document.getElementById('sb-enable').addEventListener('click', function () {
sb.enable();
}, false);
document.getElementById('sb-disable').addEventListener('click', function () {
sb.disable();
}, false);
document.getElementById('sb-attach').addEventListener('click', function () {
sb.attach();
}, false);
document.getElementById('sb-detach').addEventListener('click', function () {
sb.detach();
}, false);
</script>
</body>
</html>