Skip to content

Commit 24ebc12

Browse files
for-the-zerofor-the-zero
committed
QpenForm
1 parent 7365bcc commit 24ebc12

File tree

5 files changed

+787
-0
lines changed

5 files changed

+787
-0
lines changed

‎form/example/1.md

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
!&-->{"title": "test1","theme": "#00FF00","to": "/submit","norep":"/norep"}
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+
`function hello_world(){console.log("Hello, World!");};`
31+
32+
## 列表
33+
34+
### 无序列表
35+
36+
- 列表项1
37+
- 列表项2
38+
- 嵌套列表项
39+
- 列表项3
40+
41+
### 有序列表
42+
43+
1. 第一项
44+
2. 第二项
45+
1. 子项A
46+
2. 子项B
47+
3. 第三项
48+
49+
## 代码块
50+
51+
```python
52+
def hello_world():
53+
print("Hello, World!")
54+
55+
hello_world()
56+
```
57+
58+
## 表格
59+
60+
| 列1 | 列2 | 列3 |
61+
| --- | --- | --- |
62+
| 单元格1 | 单元格2 | 单元格3 |
63+
| 表格数据 | 可能很长 | 可能包含 **格式** |
64+
65+
## 分割线
66+
67+
---
68+
69+
## 链接与图片
70+
71+
[link](https://www.example.com)
72+
73+
![alt text](https://via.placeholder.com/150)
74+
75+
## 引用
76+
77+
> 这是一个引用。
78+
>
79+
> 这是第二行引用。
80+
>
81+
>> 这是嵌套引用。
82+
>>
83+
>> 这是第二行嵌套引用。
84+
85+
## HTML
86+
87+
<div style="color: red;">这是一个带有样式的HTML元素。</div>
88+
89+
## 控件
90+
91+
&-->{"type": "textarea","id": "test","config": {"holder": "输入框提示文字"},"req": true}
92+
93+
&==>function verify(){if($('#test').val()=='114514'){return true;}else{alert('来自自定义验证：输入框必须是114514才能提交');return false;};};verify();

‎form/example/2.md

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
!&-->{"title": "组件演示","to": "/submit","upload": "/upload"}
2+
3+
# 组件演示
4+
5+
&-->{"type": "text","id": "t","config": {"holder": "文字", "type":"text"},"req": true}
6+
7+
&-->{"type": "text","id": "tnum","config": {"holder": "数值", "type":"number"},"req": false}
8+
9+
&-->{"type": "text","id": "tmail","config": {"holder": "邮箱", "type":"email"},"req": false}
10+
11+
&-->{"type": "text","id": "turl","config": {"holder": "url", "type":"url"},"req": false}
12+
13+
&-->{"type": "text","id": "tdate","config": {"holder": "日期", "type":"date"},"req": false}
14+
15+
&-->{"type": "text","id": "ttime","config": {"holder": "时间", "type":"time"},"req": false}
16+
17+
&-->{"type": "textarea","id": "tarea","config": {"holder": "输入框提示文字"},"req": true}
18+
19+
---
20+
21+
&-->{"type": "radios","id": "r","config": {"opt": ["a","b","c"], "br":false},"req": true}
22+
23+
&-->{"type": "checkboxs","id": "c1","config": {"label": "d", "br":false},"req": true}
24+
25+
&-->{"type": "checkboxs","id": "c2","config": {"label": "e", "br":false},"req": true}
26+
27+
---
28+
29+
&-->{"type": "select","id": "s","config": {"opt": ["a a","b b","c c"]},"req": false}
30+
31+
---
32+
33+
&-->{"type": "tagsinput","id": "tag1","config": {"pinnedtags": true, "tags": ["aaa","bbb","ccc"]},"req": false}
34+
35+
&-->{"type": "tagsinput","id": "tag2","config": {"pinnedtags": false},"req": false}
36+
37+
---
38+
39+
&-->{"type": "files","id": "file1","config": {"withtext": true},"req": false}
40+
41+
&-->{"type": "files","id": "file2","config": {"withtext": false, "accept": "application/json"},"req": false}
42+
43+
---
44+
45+
&-->{"type": "table","id": "table1","config": {"column": ["不是","可能不是","不知道","可能是","是"], "row": ["行1111111111","行22222","行3"]},"req": false}

‎form/index.css

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
body{
2+
font-family: 'Google Sans','Noto Sans SC';
3+
color: #201b12;
4+
}
5+
.main{
6+
margin: 15px;
7+
}
8+
.main code{
9+
padding: 7px;
10+
border-radius: var(--mdui-shape-corner-medium);;
11+
}
12+
mdui-divider{
13+
margin-top: 10px;
14+
margin-bottom: 10px;
15+
}
16+
.main h1,.main h2,.main h3,.main h4,.main h5,.main h6,.main p{
17+
margin: 17px 0;
18+
}
19+
.codeblock{
20+
display: block;
21+
}
22+
.space{
23+
margin-top: 4px;
24+
margin-bottom: 4px;
25+
}
26+
.complex-con{
27+
display: flex;
28+
flex-direction: column;
29+
width: 100%;
30+
margin-top: 8px;
31+
margin-bottom: 8px;
32+
}
33+
/*
34+
.complex-con-list{
35+
display: flex;
36+
flex-direction: row;
37+
min-height: 50px;
38+
overflow-x: auto;
39+
}
40+
*/
41+
.complex-con-list{
42+
min-height: 50px;
43+
padding: 10px;
44+
}
45+
.complex-con-controls{
46+
display: flex;
47+
flex-direction: row;
48+
min-height: 50px;
49+
align-items: center;
50+
padding: 10px;
51+
justify-content: flex-start;
52+
}
53+
.complex-con-controls mdui-text-field{
54+
margin-right: auto;
55+
box-sizing: border-box;
56+
}
57+
.complex-con-controls mdui-button{
58+
margin-left: 10px;
59+
}
60+
mdui-chip{
61+
margin-right: 5px;
62+
}
63+
.complex-con-controls mdui-icon{
64+
margin: 5px;
65+
}
66+
.tabel-grid{
67+
display: grid;
68+
gap: 5px;
69+
width: 100%;
70+
padding: 10px;
71+
justify-content: center;
72+
grid-template-columns:auto 1fr;
73+
}
74+
.tabel-grid p{
75+
margin: 0;
76+
margin-top: 3px;
77+
margin-bottom: 3px;
78+
display: inline-block;
79+
}
80+
.tabel-grid mdui-segmented-button-group{
81+
margin-left: 5px;
82+
}

‎form/index.html

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Form</title>
7+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans&display=swap">
8+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap">
9+
<link rel="stylesheet" href="https://jsd.cdn.zzko.cn/npm/mdui/mdui.css">
10+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
11+
<script src="https://jsd.cdn.zzko.cn/npm/mdui/mdui.global.js"></script>
12+
13+
<script src="https://cdn.bootcdn.net/ajax/libs/markdown-it/13.0.1/markdown-it.min.js"></script>
14+
<script src="https://cdn.bootcdn.net/ajax/libs/jsSHA/3.3.1/sha.min.js"></script>
15+
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
16+
17+
<link rel="stylesheet" href="index.css">
18+
</head>
19+
<body>
20+
<mdui-dialog class="invalid-dialog">
21+
<span slot="headline">无效地址</span>
22+
<span slot="description">可能是因为：没加地址、格式错误、无法访问</span>
23+
<mdui-text-field variant="outlined" label="更改地址"></mdui-text-field>
24+
<mdui-button slot="action" variant="tonal">跳转</mdui-button>
25+
</mdui-dialog>
26+
<mdui-dialog class="upload-dialog">
27+
<span slot="headline">上传中</span>
28+
<mdui-circular-progress></mdui-circular-progress><p>请稍后</p>
29+
</mdui-dialog>
30+
<mdui-dialog class="autosave-dialog" close-on-overlay-click close-on-esc>
31+
<span slot="headline">自动保存提示</span>
32+
<span slot="description">检测到有一个自动保存的结果，是否使用</span>
33+
<mdui-button slot="action" variant="text" onclick="$('.autosave-dialog').removeAttr('open');">取消</mdui-button>
34+
<mdui-button slot="action" variant="tonal">使用</mdui-button>
35+
</mdui-dialog>
36+
37+
<div class="mdui-prose main"></div>
38+
39+
<script src="https://unpkg.com/@fingerprintjs/[email protected]/dist/fp.min.js"></script>
40+
<script src="index.js"></script>
41+
42+
</body>
43+
</html>

0 commit comments

Comments
 (0)