JsonT---模板.
一个以json作为基础的 模板。
用法1：
单个数据绑定：
1，导入js
<script src="Jsont.js" type="text/javascript"></script>
2，建立一个json数据
//数据
var data = { "link1": { name : "CssRain" , url : "http://www.cssrain.cn/" } };
3，建立一个json模板
//模板
var Template= { "link1": '<li><a href="{link1.url}" target="_blank">{link1.name}</a></li>' };
4，使用 jsonT，把数据和模板 联系起来，生成字符串
//使用 jsonT
var jsontdemo = jsonT( data , Template );
5，把内容插入到HTML中
//把生成的字符串 插入到 html 中
document.getElementById("popup").innerHTML=jsontdemo;
6，网页中需要一个id的popup的元素
<ul id="popup"></ul>
完整代码：
程序代码<!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></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="Jsont.js" type="text/javascript"></script>
<script>
window.onload = function(){
//数据
var data = { "link1": { name : "CssRain" , url : "http://www.cssrain.cn/" } };
//模板
var Template= { "link1": '<li><a href="{link1.url}" target="_blank">{link1.name}</a></li>' };
//使用 jsonT
var jsontdemo = jsonT( data , Template );
//把生成的字符串 插入到 html 中
document.getElementById("popup").innerHTML=jsontdemo;
}
</script>
</head>
<body>
<ul id="popup">
</ul>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="Jsont.js" type="text/javascript"></script>
<script>
window.onload = function(){
//数据
var data = { "link1": { name : "CssRain" , url : "http://www.cssrain.cn/" } };
//模板
var Template= { "link1": '<li><a href="{link1.url}" target="_blank">{link1.name}</a></li>' };
//使用 jsonT
var jsontdemo = jsonT( data , Template );
//把生成的字符串 插入到 html 中
document.getElementById("popup").innerHTML=jsontdemo;
}
</script>
</head>
<body>
<ul id="popup">
</ul>
</body>
</html>
用法2：
多个数据绑定：
看附件。
点击下载此文件
如想了解更多 ，请去官网：
http://goessner.net/articles/jsont/
不过挺难弄懂，我也是看了半天，才写了2个简单的例子。
另外jQuery也有一款插件，比这个好用。
地址：
http://cssrain.cn/article.asp?id=1182
PS：最近有朋友说我变懒了，演示地址也不发布了。
对的，我ftp懒得上了。
网速慢，打开ftp传东西浪费时间。
不过大家放心，例子我都是经过测试的，保证无误。
浙公网安备 33010602011771号