-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdemo.html
173 lines (164 loc) · 4.03 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello Rmenu</title>
<style>
body {
margin: 0;
padding: 0;
}
#app {
width: 60%;
margin: 0 auto;
height: 800px;
}
.demo {
width: 100%;
height: 100%;
text-align: center;
font-size: 32px;
}
.KR-meun {
width: 220px;
font-size: 13px;
z-index: 9999;
}
.KR-pane {
background: #eee;
}
.KR-meun ul {
padding: 0;
margin: 0;
min-width: 180px;
border-radius: 4px;
}
.KR-meun ul li {
height: 32px;
line-height: 32px;
}
.KR-meun ul li .micon-custoum {
font-size: 20px;
min-width: 30px;
text-align: center;
}
.KR-meun ul li .mtitle {
width: 70%;
}
.KR-meun ul li .micon {
font-size: 10px;
}
.KR-meun .choose {
background: rgb(245, 245, 245);
border-radius: 4px;
}
</style>
</head>
<body>
<div id="app">
<div class="demo">Hello Rmenu!</div>
</div>
</body>
<script src="contextmenu.js"></script>
<script src="frameContainer.js"></script>
<script>
options = {
isDraggable: true, // 是否开启拖拽
minSize: 10, // 拖动最小间隙
isPercent: true, // 宽高为百分比
ctrlElsize: 20, // 控制器大小
lineColor: "#000", // 分割线颜色
lineSize: 1, // 分割线大小
creatLine: true, // 是否创建分割线
draggableClassName: "draggable", // 拖拽样式名称
rootDomBorder: "1px solid #000", // 根节点边框
rowClassname: "r-row", // 行样式名称
columnClassname: "r-col", // 列样式名称
contentClassname: "r-content", // 单元格样式名称
};
const frameContainer = new FrameContainer();
frameContainer.init("app",options);
config = {
insertWin: {
title: "插入窗口",
up: {
title: "在上方",
target: (targetEl) => {
frameContainer.insertWindowTop(targetEl);
return true;
},
},
down: {
title: "在下方",
target: (targetEl) => {
frameContainer.insertWindowBottom(targetEl);
return true;
},
},
left: {
title: "在左侧",
target: (targetEl) => {
frameContainer.insertWindowLeft(targetEl);
return true;
},
},
right: {
title: "在右侧",
target: (targetEl) => {
frameContainer.insertWindowRight(targetEl);
return true;
},
},
},
changeColor: {
title: "更换颜色",
xx1: {
title: "红色",
target: function (targetEl, el) {
targetEl.style.background = "#eeb3d3";
return true;
},
},
x234: {
title: "绿色",
target: function (targetEl, el) {
targetEl.style.background = "#aebda4";
return true;
},
},
fasd: {
title: "蓝色",
target: function (targetEl, el) {
targetEl.style.background = "#96a6e9";
return true;
},
},
},
deoms: {
title: "演示层级",
x: {
title: "二级",
target: function (targetEl, el) {
return true;
},
xx: {
title: "三级",
target: function (targetEl, el) {
return true;
},
xxx: {
title: "四级",
target: function (targetEl, el) {
return true;
},
},
},
},
},
};
const menu = new Contextmenu();
menu.bind("app");
menu.update(config);
</script>
</html>