Skip to content

Commit

Permalink
initial commit
Browse files Browse the repository at this point in the history 
This project was merged from the original json2html project hosted by
user seeBrown.  Core files were removed and added to json2html-0.4.1.js
and jquery wrapper added jquery.json2html.js .  Note that the core
json2html-0.4.1 is maintained by the project moappi/json2html
  • Loading branch information
JSON2HTML committed Mar 6, 2013
0 parents commit 04a309a
Show file tree
Hide file tree
Showing 14 changed files with 2,349 additions and 0 deletions.
49 changes: 49 additions & 0 deletions README.md
@@ -0,0 +1,49 @@
jquery.json2html
=========

What is jquery.json2html?
------------------
jquery.json2html is a jquery plug-in that implements the HTML templating engine <a href='https://github.com/moappi/json2html'>json2html</a> for client side browers

Ok so what is json2html?
------------------
json2html is a javascript HTML templating engine which converts json object to html using json transforms. Note that this jquery.json2html package includes the latest version of json2html.

For more information check out the <a href='https://github.com/moappi/json2html'>json2html</a> core library

Also implemented in node.js <a href='https://github.com/moappi/node-json2html'>node-json2html</a>


Why json2html?
--------------
Instead of writing HTML templates json2html relies on JSON transforms to convert a source JSON objects to html. The benefit of using a JSON transform is that they are already readable by the browser and DO NOT require any compilation before use. In addition, json2html allows the following

+ Short hand notation for mapping data objects to markup
+ Event binding to DOM objects (exclusively with jquery.json2html)
+ Use of inline functions to allow for complex logic during transformation
+ Dynamic building of transform objects

Example of a Transform?
--------------
```javascript
var transform =
{tag:'li',id:'${id}',children:[
{tag:'span',html:'${name} ${year}'}
]};
```
Will render into the following html

```html
<li id=1123>
<span>Jack and Jill (2001)</span>
</li>
```

Where is the project now?
--------------
Currently json2html (and jquery.json2html) are in beta release. Performance wise json2html is comparable to other client side templating engines like jsRender.


How do I start?
--------------
Check out our website <a href='http://www.json2html.com'>www.json2html.com</a> for more information including detailed usage notes, downloadable examples and more!
64 changes: 64 additions & 0 deletions examples/BarChart.htm
@@ -0,0 +1,64 @@
<!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>
<title>Bar Chart</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript" src="helper.js"></script>

<!-- add json2html; both the core library and the jquery wrapper -->
<script type="text/javascript" src="../json2html-0.4.1.js"></script>
<script type="text/javascript" src="../jquery.json2html.js"></script>

<link rel="StyleSheet" href="helper.css" type="text/css"/>

</head>
<body>

<h2>Bar Chart Example</h2>

<!-- Location of the Chart -->
<div id="chart"></div>

<!-- Load JSON2HTML -->
<script type="text/javascript">

//Transforms

var transforms = {

'barChart': [

{"tag":"ul","class":"barChart", "children":function() {return(json2html.transform(this.groups,transforms.barChartGroup));}}

],
'barChartGroup': [

{"tag":"li","class":"group","children":[
{"tag":"div","class":"bar","style":'height:${value}px;'},
{"tag":"div","class":"label","html":"${label}"}
]}

]};


//Callback Function
function getBarChart(json)

{

if(json !== undefined )

$('#chart').json2html(json, transforms.barChart);

}
</script>

<!-- Load Data Feed -->
<script type="text/javascript">
getBarChart({'groups':[{'value':10,'label':'Day 1'},{'value':5,'label':'Day 2'},{'value':15,'label':'Day 3'},{'value':4,'label':'Day 4'},{'value':5,'label':'Day 5'}]});
</script>
</body>

</html>
53 changes: 53 additions & 0 deletions examples/GoogleCalendarFeed.htm
@@ -0,0 +1,53 @@
<!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>
<title>Google Calendar Feed</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript" src="helper.js"></script>

<!-- add json2html; both the core library and the jquery wrapper -->
<script type="text/javascript" src="../json2html-0.4.1.js"></script>
<script type="text/javascript" src="../jquery.json2html.js"></script>

<link rel="StyleSheet" href="helper.css" type="text/css"/>

</head>
<body>

<h2>Google Calendar Feed Example</h2>

<!-- Container to hold feed -->
<ul id="googleFeed"></ul>

<!-- Load JSON2HTML -->
<script type="text/javascript">

var transform =
{"tag":"li","class":"googleCalendarEntry","children":[
{"tag":"a","href":function(){return( getLink(this));},"children":[
{"tag":"span","html":"${title.$t} - "}

]},

{"tag":"span","html":function(){return(formatGCalTime(this.gd$when[0].startTime));}}

]};

//Callback Function
function insertAgenda(json) {

if(json !== undefined )

$('#googleFeed').json2html(json.feed.entry,transform);

}
</script>

<!-- Load Data Feed -->
<script type="text/javascript" src="http://www.google.com/calendar/feeds/developer-calendar@google.com/public/full?alt=json-in-script&#038;callback=insertAgenda&#038;orderby=starttime&#038;max-results=15&#038;singleevents=true&#038;sortorder=ascending&#038;futureevents=true"></script>

</body>

</html>
62 changes: 62 additions & 0 deletions examples/NHLSportsFeed.htm
@@ -0,0 +1,62 @@
<!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>
<title>NHL Sports Feed</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript" src="helper.js"></script>

<!-- add json2html; both the core library and the jquery wrapper -->
<script type="text/javascript" src="../json2html-0.4.1.js"></script>
<script type="text/javascript" src="../jquery.json2html.js"></script>

<link rel="StyleSheet" href="helper.css" type="text/css"/>

</head>
<body>

<h2>NHL Sports Feed Example</h2>

<!-- Container for the Feed -->
<ul id="yahooFeed"</ul>

<!-- Load JSON2HTML -->
<script type="text/javascript">

var transform =

{"tag":"li","class":"yahooSportsEntry", "children":[

{"tag":"div","class":"thumbnail", "style":function(){if(this['media:content']===undefined) return('display:none');},"children":[
{"tag":"img","src":"${media:content.url}","align":"left"}

]},

{"tag":"div","class":"text", "children":[

{"tag":"a","href":"${link}","children":[

{"tag":"span","html":"${title}"}

]},

{"tag":"span","html":"${pubDate}"},

{"tag":"div","class":"description","html":"${description}"}

]}

]};

//Callback Function
function getYahooFeed(json) {
if(json) $('#yahooFeed').json2html(json.value.items, transform);
}
</script>

<!-- Load Data Feed -->
<script type="text/javascript" src="http://pipes.yahoo.com/pipes/pipe.run?_id=e4e173cf75b0aa1b374b7987398d6091&_render=json&_callback=getYahooFeed"></script>
</body>

</html>
92 changes: 92 additions & 0 deletions examples/helper.css
@@ -0,0 +1,92 @@

h1 {font-size:16pt}
h1 span {color:blue}

h2 {font-size:12pt;margin:0;padding:0;border-bottom:thin solid gray;}

h3 {font-size:12pt;margin:0;padding:0;border-bottom:thin solid gray;}

div.heading {}
div.heading h1 {font-size:16pt}
div.heading h1 span {color:blue}
div.heading table {width:100%;font-size:9pt;}
span.date {font-size:9pt;color:gray}

div.download { padding:5px;}

div.notes { padding:5px;}
div.notes ul {margin:0;font-size:10pt;}
div.notes .version {margin-left:5px;font-size:11pt;margin-top:10px;}

div.usage {border:none;margin:10px;background-color:#dddddc;padding:5px;}

div.javascript { background-color: #c3e0f9; border: 1px solid #8fc3f1; font-family:Arial; font-size:10pt; width:95%; margin-top:10px; margin-bottom:10px; padding:5px;}
div.javascript pre {
margin:0;
padding:0;
background:none;
border:none;
white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
white-space: -pre-wrap; /* Opera 4 - 6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
word-wrap: break-word; /* IE 5.5+ */
}

div.html { background-color: #e0f8bf; border: 1px solid #c4ef8a; font-family:Arial; font-size:10pt; width:95%; margin-top:10px; margin-bottom:10px; padding:5px;}
div.html pre {
margin:0;
padding:0;
background:none;
border:none;
white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
white-space: -pre-wrap; /* Opera 4 - 6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
word-wrap: break-word; /* IE 5.5+ */
}

span.linked {color:blue;cursor:pointer;}
span.linked:hover {text-decoration:underline;}

div.example {padding:0; font-size:11pt; margin-left:20px;margin-top:20px;}
div.example h3 {font-size:14pt;color:#2d2f98}

#releaseNotes ul {margin:0;}

#yahooFeed {list-style:none}
.yahooSportsEntry {padding: 5px 5px 5px 0;font-size:13px;}
.yahooSportsEntry .thumbnail {float: left;margin-bottom: 3px;margin-right: 8px;position: relative;}
.yahooSportsEntry .thumbnail img {border:none; height: 50px; position: static; width: 50px;}
.yahooSportsEntry .text {margin-left: 0px;}
.yahooSportsEntry .title { font-size: inherit; font-weight: bold; padding-bottom: 3px; width: 100%;}
.yahooSportsEntry .description {letter-spacing: normal;word-spacing: normal;}
.yahooSportsEntry .description img {display:none}

.googleCalendarEntry a div {display:inline;}
.googleCalendarEntry span {margin-left:2px;}

#flickrImages ul {list-style:none;}
.flickrImage {display:block;height:55px;}
.flickrImage .image {float:left;position:relative;}
.flickrImage .image img {width:50px;height:50px;position:static;}
.flickrImage .text {margin-left:55px;}

#twitterFeed {font:13px/1.5 Helvetica Neue,Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif;list-style:none;}

.twitterFeed {border-bottom: 1px solid #EBEBEB;clear: both; display: block; min-height: 60px; outline: medium none; position: relative; padding:10px;}
.twitterFeed:hover {background-color:rgba(0,132,180,0.1);border-color:rgba(0,132,180,0.1);}
.twitterFeed .user {margin-left:60px;}
.twitterFeed .user a {color:#333333;font-size:15px;font-weight:bold;text-decoration:none;}
.twitterFeed .user a:hover {color:#0084B4;text-decoration:underline;}
.twitterFeed .user span {color:#999999;font-size:12px;margin-left:5px;}
.twitterFeed .text {font-family: Arial,"Helvetica Neue",sans-serif;line-height: 19px;padding: 0;font-size:15px;margin-left:63px;}
.twitterFeed .date {color:gray;font-size:9px;margin-left:60px;}

div.twitterFeed .source {float:right;margin-right:5px;color:gray;font-size:9px;display:inline;}

.barChart ul {list-style:none;}
.barChart li {display:inline-block;padding:5px;}
.barChart .group {}
.barChart .label {text-align:center;}
.barChart .bar {width:50px;background-color:blue;}

0 comments on commit 04a309a

Please sign in to comment.