-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
59 lines (55 loc) · 2.09 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
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Checkbox Select Demo</title>
</head>
<body>
<div id="animals-container" class="js-checkbox-select-container" style="width: 160px;"></div>
<div id="empty-container" class="js-checkbox-select-container" style="width: 160px;"></div>
<div id="foods-container" class="js-checkbox-select-container" style="width: 160px;"
data-legend="FOODS" data-field-name="foods[]" data-collapsed-icon="◀" data-expanded-icon="▼"
data-no-items-text="no foods found" data-on-item-selected="item => console.log(item)"
data-on-item-deselected="item => console.log(item)">
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
new CheckboxSelect({
targetContainerId: 'animals-container',
legend: 'ANIMALS',
fieldName: 'animals[]',
onItemSelected: item => { console.log(item) },
onItemDeselected: item => { console.log(item) },
collapsedIcon: '◀', // <i class="fas fa-caret-left"></i>
expandedIcon: '▼', // <i class="fas fa-caret-down"></i>
noItemsText: 'no animals found'
}).init({
'ant' : 1,
'baboon': 2,
'crow': 3,
'deer': 4,
'eagle': 5,
'fox': 6,
'goose': 7,
'hare': 8,
'iguana': 9,
'jaguar': 10
}, [1,3,9]);
new CheckboxSelect({targetContainerId: 'foods-container'}).init({
'asparagus': 'asparagus',
'brocolli': 'brocolli',
'cabbage': 'cabbage',
'deer meat': 'deer meat',
'eggs': 'eggs',
'frijoles': 'frijoles',
'gourmet chcocolate': 'gourmet chcocolate',
'hummus': 'hummus',
'ice cream sundae': 'ice cream sundae',
'jalapeno': 'jalapeno'
}, [2, 5, 7]);
new CheckboxSelect({targetContainerId: 'empty-container'}).init({}, []);
});
</script>
</body>
</html>