-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathoneVnode.html
128 lines (122 loc) · 3.53 KB
/
oneVnode.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
<!DOCTYPE html>
<html lang="en">
<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">
<style>
body {
background: #fafafa;
font-family: sans-serif;
}
h1 {
font-weight: normal;
}
.btn {
display: inline-block;
cursor: pointer;
background: #fff;
box-shadow: 0 0 1px rgba(0, 0, 0, .2);
padding: .5em .8em;
transition: box-shadow .05s ease-in-out;
-webkit-transition: box-shadow .05s ease-in-out;
}
.btn:hover {
box-shadow: 0 0 2px rgba(0, 0, 0, .2);
}
.btn:active, .active, .active:hover {
box-shadow: 0 0 1px rgba(0, 0, 0, .2),
inset 0 0 4px rgba(0, 0, 0, .1);
}
.add {
float: right;
}
#container {
max-width: 42em;
margin: 0 auto 2em auto;
}
.list {
position: relative;
}
.row {
overflow: hidden;
position: absolute;
box-sizing: border-box;
width: 100%;
left: 0px;
margin: .5em 0;
padding: 1em;
background: #fff;
box-shadow: 0 0 1px rgba(0, 0, 0, .2);
transition: transform .5s ease-in-out, opacity .5s ease-out, left .5s ease-in-out;
-webkit-transition: transform .5s ease-in-out, opacity .5s ease-out, left .5s ease-in-out;
}
.row div {
display: inline-block;
vertical-align: middle;
}
.row > div:nth-child(1) {
width: 5%;
}
.row > div:nth-child(2) {
width: 30%;
}
.row > div:nth-child(3) {
width: 65%;
}
.rm-btn {
cursor: pointer;
position: absolute;
top: 0;
right: 0;
color: #C25151;
width: 1.4em;
height: 1.4em;
text-align: center;
line-height: 1.4em;
padding: 0;
}
.changeText{
height: 30px;
}
</style>
<title>Document</title>
</head>
<body>
<script src="./htmldomapi.js"></script>
<script src="./attributes.js"></script>
<script src="./class.js"></script>
<script src="./dataset.js"></script>
<script src="./eventlisteners.js"></script>
<script src="./hero.js"></script>
<script src="./props.js"></script>
<script src="./style.js"></script>
<script src="./h.js"></script>
<script src="./snabbdom.js"></script>
<script>
var patch = snabbdom.init([attributesModule, classModule, datasetModule, eventListenersModule, propsModule, styleModule]);
var vnode;
var nextKey = 11;
var margin = 8;
var sortBy = 'rank';
var totalHeight = 0;
var data = [
{rank: 1, title: 'The Shawshank Redemption', desc: 'Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.', elmHeight: 0}
];
function changeText(prop) {
alert('讲真的，我要变身了')
var str = '看，变了吧。我就是测试一下一条数据的text发生变化是什么情况'
vnode = patch(vnode, view('.test',str));
}
function view(cla, str) {
return h('div#container' + cla, {class: {'actives': true}, on: {click: [changeText, 'desc']}}, str);
}
window.addEventListener('DOMContentLoaded', () => {
var container = document.getElementById('container');
var data = '我是最开始的文本, 点我'
vnode = patch(container, view('',data));
});
</script>
<div id="container"></div>
</body>
</html>