下载：20130709125708248 原文：jquery ui仿腾讯web qq界面desktop酷炫特效
May 1, 2018
jQuery: json美化插件, JSON高亮, JSON Syntax Highlighting & Formatting, rainbowJSON
rainbowJSON is a jQuery based JSON formatting and syntax Highlighting plugin to make your JSON objects & strings collapsible, colorful and more user readable.
项目地址：https://github.com/Stanko/jquery.rainbowJSON
直接下载： jQuery-Plugin-For-JSON-Syntax-Highlighting-Formatting-rainbowJSON
方法1：使用rainbowJSON插件 How to use it:
1. 引入css文件 Include the jquery.rainbowJSON.css style sheet in the head section of the webpage.
<link href="css/jquery.rainbowJSON.css" rel="stylesheet">
2. 添加json数据 Wrap your JSON strings into a container.
<div class="demo">
{ JSON DATA GOES HERE ... }
</div>
3. 引入jquery文件和rainbow js文件 Include jQuery library and the jQuery rainbowJSON plugin at the bottom of the webpage.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/jquery.rainbowJSON.js"></script>
4. 绑定 Initialize the plugin to format your JSON data.
$('.demo').rainbowJSON();
5. 其他选项 Options and defaults.
$('.demo').rainbowJSON({
// maximum elements per object that will be printed
maxElements: 0,
// maximum depth for recursive printing
maxDepth: 0,
// json as object or in string format (if empty, html of the DOM object will be used)
json: null,
// // background color of the div, which will be used for shading
bgColor: '#F5FAFF'
});
方法2：无插件实例:
<!DOCTYPE html>
<html>
<head>
<title>JustCode iKeepStudying</title>
<style type="text/css">
pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
</style>
<script type="text/javascript">
window.onload=function()
{
function output(inp) {
document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}
function syntaxHighlight(json) {
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
var cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key';
} else {
cls = 'string';
}
} else if (/true|false/.test(match)) {
cls = 'boolean';
} else if (/null/.test(match)) {
cls = 'null';
}
return '<span class="' + cls + '">' + match + '</span>';
});
}
var obj = {a:1, 'b':'foo', c:[false,'false',null, 'null', {d:{e:1.3e5,f:'1.3e5'}}]};
var str = JSON.stringify(obj, undefined, 4);
output(str);
output(syntaxHighlight(str));
}
</script>
</head>
<body>
</body>
</html>
效果图：
本文：jQuery: json美化插件, JSON高亮, JSON Syntax Highlighting & Formatting, rainbowJSON
About Author
