-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsample.html
95 lines (92 loc) · 4.05 KB
/
sample.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jeditor-a simple json editor</title>
<style type="text/css">
body{width: 1080px;margin: 0 auto;padding: 15px 0px 0px 0px;}
.active{background: #BBBBBB;}
nav{width: 160px; height:100%;float: left;margin: 0 auto;overflow: hidden;padding:0px 0px 0px 0px;-webkit-user-select: none;}
ul{margin: 0 auto;}
hr{height: 1px;border: none;background: #EEEEEE;margin:0px 0px 0px 0px;}
a{text-decoration: none;margin: 0px 0px 0px 10px;color: #000000;}
li{overflow: hidden; line-height: 24px;line-height: 24px;width: 120px;background: #9AB5C6;padding:5px 0px 0px 10px;cursor: pointer;color: #FFFFFF;}
li:hover{background: #CCCCCC;padding:5px 0px 0px 10px;}
article{width:920px; height:100%;float: right;margin: 0 auto;overflow: hidden;}
iframe{width: 920px;border: none;min-height: 720px;overflow: auto;}
</style>
<script type="text/javascript" src="lib/jquery-3.1.1.min.js" ></script>
</head>
<body>
<nav>
<ul>
<li class="cat"><span>基础</span></li>
<div style="display: none;">
<li><a href="#basic"><span>基础显示</span></a></li>
<li><a href="#mode_edit" ><span>编辑模式</span></a></li>
<li><a href="#mode_header" ><span>隐藏头部</span></a></li>
</div>
<hr />
<li class="cat"><span>显示配置</span></li>
<div style="display: none;">
<li><a href="#view_title" ><span>标题</span></a></li>
<li><a href="#view_lang" ><span>多语言</span></a></li>
<li><a href="#view_note" ><span>注释</span></a></li>
<li><a href="#view_hide" ><span>隐藏</span></a></li>
<li><a href="#view_lock" ><span>锁定</span></a></li>
</div>
<hr />
<li class="cat"><span>数据类型</span></li>
<div style="display: none;">
<li><a href="#format_time" ><span>日期</span></a></li>
<li><a href="#format_enum" ><span>枚举</span></a></li>
<li><a href="#format_list" ><span>列表</span></a></li>
<li><a href="#format_image" ><span>图像</span></a></li>
<li><a href="#format_file" ><span>文件</span></a></li>
<li><a href="#format_bool" ><span>布尔值</span></a></li>
<li><a href="#format_email" ><span>电子邮件</span></a></li>
<li><a href="#format_mobile" ><span>手机</span></a></li>
<li><a href="#format_number" ><span>数字</span></a></li>
<li><a href="#format_text" ><span>字符串</span></a></li>
</div>
<hr />
<li class="cat"><span>事件</span></li>
<div style="display: none;">
<li><a href="#event_change" ><span>change</span></a></li>
<li><a href="#event_add" ><span>add</span></a></li>
<li><a href="#event_reload" ><span>reload</span></a></li>
<li><a href="#event_upload" ><span>upload</span></a></li>
<li><a href="#event_switch" ><span>switch</span></a></li>
<li><a href="#event_select" ><span>select</span></a></li>
</div>
<hr />
<li class="cat"><span>功能</span></li>
<div style="display: none;">
<li><a href="#fun_export" ><span>数据导出</span></a></li>
<li><a href="#fun_mode" ><span>模式切换</span></a></li>
<li><a href="#fun_new" ><span>新添</span></a></li>
<li><a href="#fun_recover" ><span>还原</span></a></li>
</div>
</ul>
</nav>
<article id="frame">
<iframe src="" scrolling="no"></iframe>
</article>
<script type="text/javascript">
$('li a').on('click',function(){
$('ul').find('.active').removeClass('active');
$(this).parent().addClass('active');
const target=$(this).attr('href').substr(1);
$("iframe").attr('src','demo/'+target+'.html');
});
$(".cat").on('click',function(){
const sel=$(this).next();
sel.is(":hidden")?sel.slideDown():sel.slideUp();
});
const hash=location.hash.substr(1);
const page=!hash?'basic':hash;
$('a[href="#'+page+'"]').trigger('click');
$('a[href="#'+page+'"]').parent().parent().prev().trigger('click');
</script>
</body>
</html>