JSON Painter
JavaScript – JSON Painter | CodeCanyon
JSON Painter his title this type of JavaScript/Miscellaneous This time I will review,made by intellex, JavaScript/Miscellaneous is sold at a price of $5 in themeforest.
developer // developers // format // formatter // highlighting // javacript // jquery // json // lightweight // painter // plugin // standalone // syntax highlight //
| Created | 28 August 13 |
| Last Update | 28 August 13 |
| Compatible Browsers | IE6, IE7, IE8, IE9, IE10, Firefox, Safari, Opera, Chrome |
| Software Version | jQuery |
| High Resolution | Yes |
| Files Included | JavaScript JS |
If you have ever a need read a raw JSON string, you probably noticed that it aint that much human-readable…
What is JSON painter?
This simple jQuery plugin will reformat and colorize any valid JSON, and you eyes will be forever gratefull for it 
Here are the highlighs:
- Formats the JSON
- Syntax highlight
- Open / close inpidual object whitin
- One js file (3.1Kb) + one line of code
- Handles both JSON strings and objects
- Customize the style via CSS to fit your needs
See it in action
I beleive that there is no need to describe this plugin in more details, but if you are intrigued – here is a online demo with code snippets.
The How to guide
Step 1:
Download the script and place wherever you place the java scripts.
Step 2:
Include the jQuery and the JSON painter script in the <head> tag of your document, like this:
<head> <!-- additional header content --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js" charset="utf-8"></script> <script type="text/javascript" src="jquery.jsonPainter-1.0.js" charset="utf-8"></script> </head>
Note that if you already have jQuery plugin included, you do not need to include it twice.
Step 3:
Create an element in the document that will hold the painted JSON
<p id="json"></p>
Step 4:
Have fun
<script type="text/javascript"> // Transform the data within the element (no params passed) $('#json').jsonPainter(); // Show painted JSON from a atring var str = '{ node: "value", list: [ 1, 3, 4 ] }'; $('#json').jsonPainter(str); // Show painter JSON from an object var obj = { node: "value", list: [ 1, 3, 4 ] }; $('#json').jsonPainter(obg); </script>
Step 5:
If you are familiar with CSS, you can easily define your own styles.
Simply customize the snipper below add it to the <head> tag of your HTML document.
<style> /** Define gloval style, like font size and family */ jsonpainter { } /** Define how the key will be show */ jsonpainter-key { } /** Define style for each variable type */ jsonpainter-value { } jsonpainter-value-url { } jsonpainter-value-null { } jsonpainter-value-number { } jsonpainter-value-string { } jsonpainter-value-boolean { } jsonpainter-value-boolean-true { } jsonpainter-value-boolean-false { } </style>
Related produck This user:intellex
0 comments:
Post a Comment