JSON编辑器

最新推荐文章于 2024-03-19 09:57:35 发布

nikyxxx

最新推荐文章于 2024-03-19 09:57:35 发布

阅读量2.9k

点赞数

分类专栏：收藏 JavaScript 文章标签： json function javascript url border ui

本文链接：https://blog.csdn.net/nikyxxx/article/details/4944752

版权

JavaScript 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

12 篇文章 0 订阅

订阅专栏

从51jb转过来的一个JSON编辑器，挺不错的。

源代码：（有空了把里边的图片截下来，去掉base href）

'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://imgqun.qq.com/cgi-bin/">
<title> ldh_JSON_Editor </title>
<style>
body,html{
    margin:0px;padding:10px;overflow:hidden;font-size:12px;
    background:#FFCC66 url(img?uuid=20b6767c202cdabf6049e98539e8df0de6);color:#333;font-family:tahoma;
}
.title{font-size:14px;background:url(img?uuid=2069cf3fd1e53a2bb365f771eac65b50a2) no-repeat;padding-left:30px;}
#ldh_ui_window{
    width:840px;height:520px; position:absolute;
    background:#fff url(img?uuid=209ef12ed3496ca2e94cf1a8041de28cc2) repeat-x 0 32px;
    border:2px solid #4A84C4;border-top:none;
    left:50%;margin-left:-420px;
    top:50%;margin-top:-260px;
}
#ldh_ui_caption{
    height:32px;line-height:32px;text-indent:1em;
    background:url(img?uuid=203fe9e79d8933c63af9866344a990e5ee) repeat-x; text-align:center;
}
#ldh_ui_body_left{
    width:300px;height:450px;overflow:auto;
    position:absolute;left:10px;top:55px;
    border:1px solid #4A84C4;
}
#editWindow{width:500px;position:absolute;left:325px;top:55px;    border:1px solid #4A84C4;}
#tree_cap{height:18px;line-height:18px;text-align:center;background:url(img?uuid=203fe9e79d8933c63af9866344a990e5ee) repeat-x;}
/* toolbar */
#subToolbar{
    height:29px;background:url(img?uuid=2089a60bdc587e2b2b895c3cb32608c06f) repeat-x 50% 50%;line-height:29px;    position:relative;width:100%;text-indent:10px;
}
#subToolbar a{
    color:#000;background:url(img?uuid=2023acf6c478a05549e3cdf0de3696ca7d) no-repeat 0% 50%; padding-left:20px;text-decoration:none;
}
#subToolbar span{position:absolute; right:10px;bottom:4px;}
#subToolbar a:hover{color:#fff;background-image:url(format.gif);text-decoration:underline;}
#subToolbar a#save_as{background-image:url(img?uuid=2083fbd06db4030248c60ab536af05def2); }
#subToolbar a#format_indent{background-image:url(img?uuid=2060be6af87eae7a41f7de458b271cdfdc); }
#subToolbar a#update{background-image:url(img?uuid=209d82f0afde195855dca5a2b516fdcc11); }
#subToolbar a#format_compress{background-image:url(img?uuid=20e66dfd444ae20969e4bfcc0d33809850); }
#subToolbar a#clear_txt{background-image:url(img?uuid=2069999c20b5d5f9fa36439831690cbea1); }
/* end */
#json_eidit{
    width:497px; border:none;margin:0px;color:#000;
    height:340px;font-size:14px;
}
.json_editInfo{
    line-height:160%; border:1px solid #4A84C4;
    width:483px;+width:500px; height:65px; color:#003300;
    position:absolute;left:325px;bottom:12px;
}
#json_editInfo{
    height:48px; padding-left:60px;padding-top:10px;
    background:url(img?uuid=2097679a52658b38bc858e8274a2293451) no-repeat 28px 12px;
}
#json_editInfo b{color:red}
#ldh_ui_window .err{color:red;background-image:url(img?uuid=20bded9fd31a0fea0465715c35f1d59c45);}
#ldh_ui_window .busy{color:#333;background-image:url(img?uuid=20c121f445de7a8874541ef58b4147c0e4);}
#ldh_ui_window .info{color:#006600;background-image:url(img?uuid=20775d53781369b7d2a02b6faeb1693a5c);}
#json_editInfo input{width:50px;border:1px solid #4A84C4;height:14px;}
#json_editInfo button{
    background:url(img?uuid=200913d75fd547b62c50e13d8884bc1d98) no-repeat;
    width:70px;height:20px;line-height:20px;text-align:center;
    border:none;color:#114060;letter-spacing:5px;margin-left:10px;
}
/* for tree */
img,input,select{vertical-align:middle}
#ldh_ui_window #tree{white-space:nowrap;font-size:12px;line-height:24px;}
#tree a{text-decoration:none;color:#333;}
#tree a:hover,#tree a.hot{color:#000;background:#0B92FF;}
dd,dl,dt{padding:0;margin:0;border:none;font-size:12px;}
dt img{vertical-align:middle;}
dt{height:20px;white-space:nowrap;}

</style>
</head>
<body>
<div id="ldh_ui_window">
    <div id="ldh_ui_caption"><strong class="title">JSON-Editor</strong></div>
        <div id="ldh_ui_body_left">
            <div id="tree_cap">树视图</div>
            <div id="tree"></div>
        </div>
        <div id="editWindow">
            <div id="subToolbar">
                <a href="javascript:void(0)" title="" id="format_indent">缩进</a> |
                <a href="javascript:void(0)" title="" id="format_compress">紧凑</a> |
                <a href="javascript:void(0)" title="" id="update">刷新视图</a> |
                <a href="javascript:void(0)" title="" id="clear_txt">清空</a> |
                <a href="javascript:void(0)" title="" id="save_as">另存为</a>
                <span>
                    <label for="autoUpdate"><input type="checkbox" id="autoUpdate" checked /> 同步更新树视图</label>
                </span>
            </div>
            <div id="edit">
            <textarea id="json_eidit" >[{"中国食谱":["上海醉蟹","北京锅烧鸡","川式凉拌豇豆","清真酱牛肉"],"国外食谱":["泰式柠檬肉片","鸡柳汉堡","蒸桂鱼卷 "],"更多":{"中式":["南","北",{"地方":["小吃","大餐"]},"更多选择"]}},{"菜谱分类":["上海菜","贵州菜","潮汕菜","云南菜","东北菜","安徽菜","广东菜","浙江菜","湖南菜"]},"其它"]</textarea>
            </div>
        </div>
        <fieldset class="json_editInfo"> <legend>系统消息</legend>
            <div id="json_editInfo" class="busy">正在加载图片,请稍候...</div>
        </fieldset>
</div>
</body>

<mce:script type="text/javascript"></mce:script>
</html>

''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''