Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

initial commit

  • Loading branch information...
commit fd25e30730ae163f55b47974061b78033c460ef9 0 parents
quickredfox authored
30 README
@@ -0,0 +1,30 @@
+Example
+
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
+ "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+<head>
+ <title>example</title>
+ <link rel="stylesheet" href="css/jquery.jsonview.css" type="text/css" media="screen" title="no title" charset="utf-8">
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
+ <script src="js/jquery.jsonview.js" type="text/javascript"></script>
+ <script type="text/javascript" charset="utf-8">
+ // wait for document ready
+ $(function(){
+ // load some json data
+ $.getJSON('data.json',function(json){
+ // inject contents in document body
+ $('#jsonview').jsonView(json);
+ })
+ });
+ </script>
+</head>
+
+<body>
+<div id="jsonview">
+
+</div>
+</body>
+</html>
36 css/jquery.jsonview.css
@@ -0,0 +1,36 @@
+/* $.jsonView() 0.1 - jQuery-based Json to html pretty printer
+ *
+ * Copyright (c) 2010 Francois Lafortune (quickredfox.at)
+ * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
+*/
+.jquery-jsonview{display:block;float:left;line-height:15px;font-size:11px;}
+.jquery-jsonview *{margin:0;padding:0;font-family:helvetica,sans-serif;}
+/* tree node resets */
+.jquery-jsonview .array-wrapper,.jquery-jsonview .array-item-list,.jquery-jsonview .array-item,.jquery-jsonview .object-wrapper,.jquery-jsonview .object-property-list,.jquery-jsonview .property-name,.jquery-jsonview .property-value,.jquery-jsonview .string-value,.jquery-jsonview .null-value{margin:0;padding:0;display:block;float:left;width:100%;color:#333;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}
+/* wrappers*/
+.jquery-jsonview .array-wrapper,.jquery-jsonview .object-wrapper{display:block;float:left;width:100%;list-style-type:none;}
+/* lists */
+.jquery-jsonview .array-item-list,.jquery-jsonview .object-property-list{margin-left:3em;}
+/* array display */
+.jquery-jsonview div.array-wrapper{border-left:1px dotted #ccc;}
+.jquery-jsonview ol.array-item-list:before{content:'[';display:block;float:left;color:#069;font-weight:bold;}
+.jquery-jsonview ol.array-item-list:after{content:']';display:block;float:left;color:#069;font-weight:bold;}
+/*.jquery-jsonview li.array-item:after{content:' ,';display:block;float:left;color:#069;font-weight:bold;}*/
+.jquery-jsonview li.array-item:last-child:after{content:''}
+/* object display */
+.jquery-jsonview div.object-wrapper{border-left:1px dotted #ccc;}
+.jquery-jsonview dl.object-property-list{font-weight:bold;display:block;float:left;width:100%;}
+.jquery-jsonview dl.object-property-list:before{content:'{';display:block;float:left;color:#069;font-weight:bold;}
+.jquery-jsonview dl.object-property-list:after{content:'}';display:block;float:left;color:#069;font-weight:bold;}
+.jquery-jsonview dt.property-name{color:#000;margin-left:1em;position:relative;}
+.jquery-jsonview dd.property-value{margin-left:2em;color:#666;font-weight:normal;}
+/* closed states */
+.jquery-jsonview dt.property-name.closed-object:after{content:'{ … }';color:#069;margin-left:5px;}
+.jquery-jsonview dt.property-name.closed-array:after{ content:'[ … ]';color:#069;margin-left:5px;}
+.jquery-jsonview dt.property-name.closed-string:after{content:'" … "';color:#069;margin-left:5px;}
+/* misc */
+.jquery-jsonview p.null-value,.jquery-jsonview p.string-value{padding:2px;border:1px solid #eee;width:100%;margin:2px;}
+.jquery-jsonview p.null-value{color:#ccc;}
+.jquery-jsonview p.string-value input{border:0;font-family:monospace;color:#333;font-size:13px;width:100%;}
+.jquery-jsonview a.property-toggle-button{font-size:11px;text-decoration:none;font-weight:bold;position:absolute;left:-17px;width:15px;height:15px;color:#c99;}
+.jquery-jsonview a.property-toggle-button:hover{#c03;}
14 data.json
@@ -0,0 +1,14 @@
+{
+ "tree": {
+ "propKey": "prop string value",
+ "objectpropKey": {
+ "name": "example object",
+ "items" : [["one","two","three"],{"foo":"bar"},"camp"]
+ },
+ "arrayobjectpropKey": [
+ "one",
+ {"two":"three","four":"five"},
+ ["six",7,null]
+ ]
+ }
+}
28 example.html
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
+ "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+<head>
+ <title>example</title>
+ <link rel="stylesheet" href="css/jquery.jsonview.css" type="text/css" media="screen" title="no title" charset="utf-8">
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
+ <script src="js/jquery.jsonview.js" type="text/javascript"></script>
+ <script type="text/javascript" charset="utf-8">
+ // wait for document ready
+ $(function(){
+ // load some json data
+ $.getJSON('data.json',function(json){
+ // inject contents in document body
+ $('#jsonview').jsonView(json);
+ })
+ });
+ </script>
+</head>
+
+<body>
+<div id="jsonview">
+
+</div>
+</body>
+</html>
77 js/jquery.jsonview.js
@@ -0,0 +1,77 @@
+/* $.jsonView() 0.1 - jQuery-based Json to html pretty printer
+ *
+ * Copyright (c) 2010 Francois Lafortune (quickredfox.at)
+ * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
+ *
+ * Example:
+ * <html><head>
+ * <link rel="stylesheet" href="jsonview.jquery.css" type="text/css" />
+ * <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
+ * <script src="jquery.jsonview.js" type="text/javascript"></script>
+ * <script type="text/javascript" charset="utf-8">
+ * // wait for document ready
+ * $(function(){
+ * // load some json data
+ * $.getJSON('data.json',function(json){
+ * // inject contents in document body
+ * $(document.body).jsonView(json);
+ * })
+ * });
+ * </script></head><body></body></html>
+*/
+
+(function(){
+ // the JQUERY plguin.
+ $.fn.jsonView=function(jsonData){
+ var $this = $(this);
+ var treeHTML = "<div class=\"jquery-jsonview\">"+json2markup(jsonData)+"</div>";
+ return $this.html(treeHTML);
+ }
+ // the ACTUAL plugin
+ var json2markup = function(json,lvl){
+ var markup = [],lvl = (lvl ? lvl+1 : 0);
+ if(typeof json == 'object' && json instanceof Array){
+ // handle array
+ markup.push('<div class="array-wrapper lvl-'+lvl+'"><ol title="Array with '+json.length+' items" class="array-item-list">');
+ for(var i=0,item;item = json[i++];) markup.push('<li class="array-item">'+(typeof item == 'string' || typeof item == 'number' ? '<p class="string-value">'+item+'</p>' : json2markup(item,lvl))+'</li>');
+ markup.push('</ol></div>');
+ }else if(typeof json == 'object'){
+ // handle real object
+ markup.push('<div class="object-wrapper lvl-'+lvl+'"><dl class="object-property-list">');
+ for(var k in json) markup.push('<li class="object-property"><dl class="property-definition"><dt class="property-name">'+k+':<a href="#" class="property-toggle-button">[-]</a></dt><dd class="property-value">'+json2markup(json[k],lvl)+'</dd></dl></li>');
+ markup.push('</ul></div>');
+ }else if(json){
+ // handle string
+ markup.push('<p class="string-value"><input type="text" readonly="readonly" value="'+json+'" /></p>');
+ }else{
+ // handle null
+ markup.push('<p class="null-value">null</p>');
+ }
+ return markup.join('');
+ }
+ // only register this once... will work everywhere
+ $('.property-toggle-button').live('click',function(e){
+ e.preventDefault();e.stopPropagation();
+ var $this = $(this);
+ // first time acces this element, store relationships
+ if(!$this.data('dt')){
+ $this.data('dt',$this.parents('dt'));
+ $this.data('dd',$this.data('dt').next('dd'));
+ var type = ($this.data('dd').find('> .array-wrapper').length > 0 ? 'array' : $this.data('dd').find('> .object-wrapper').length > 0 ? 'object' : 'string');
+ $this.data('type', type);
+ }
+ // toggle
+ if($this.data('dd').is(':visible')){
+ $this.data('dd').slideUp(function(){
+ $this.data('dt').addClass('closed-'+$this.data('type'))
+ $this.text('[+]');
+ });
+ }else{
+ $this.data('dd').slideDown(function(){
+ $this.data('dt').removeClass('closed-'+$this.data('type'))
+ $this.text('[-]');
+ });
+ }
+ });
+ $('.string-value input').live('click',function(){ $(this).focus().select();})
+})()

0 comments on commit fd25e30

Please sign in to comment.
Something went wrong with that request. Please try again.