forked from component/selectable
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
113 lines (95 loc) · 2.07 KB
/
example.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
<html>
<head>
<title>Selectable</title>
<link rel="stylesheet" type="text/css" href="build/build.css">
<style>
* {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
body {
padding: 150px;
font: "Helvetica Neue";
}
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
.selection-rect {
border: 1px solid rgba(46, 156, 195, 0.3);
background: rgba(50, 167, 210, 0.05);
}
#pets {
margin: 0;
padding: 0;
}
#pets li {
float: left;
margin: 5px;
padding: 50px;
border: 1px dotted #ddd;
background: #eee;
}
#pets li.selectover {
border: 1px dashed #32a7d2;
}
#pets li.selected {
background: rgba(50, 167, 210, 0.220);
}
#nums {
/*margin-top: 50px;*/
float: left;
clear: both;
}
#nums li {
float: left;
padding: 15px;
margin: 5px;
font-size: 11px;
border: 1px dotted #ddd;
}
#nums li.selectover {
background: #eee;
}
#nums li.selected {
background: #ddd;
}
</style>
</head>
<body>
<!-- <ul id="pets">
<li data-name="tobi">Tobi</li>
<li data-name="loki">Loki</li>
<li data-name="jane">Jane</li>
<li data-name="abby">Abby</li>
</ul> -->
<ul id="nums"></ul>
<script src="build/build.js"></script>
<script>
var selectable = require('selectable');
// var a = selectable('#pets > li');
// a.on('change', function(e){
// for (var i = 0; i < e.selected.length; i++) {
// console.log(e.selected[i].getAttribute('data-name'));
// }
// });
var n = 1000;
var nums = document.querySelector('#nums');
while (n--) {
var li = document.createElement('li');
li.textContent = '#' + n;
nums.appendChild(li);
}
var b = selectable('#nums > li');
b.on('change', function(e){
for (var i = 0; i < e.selected.length; i++) {
console.log(e.selected[i].textContent);
}
});
</script>
</body>
</html>