- 浏览: 7302 次
- 性别:
- 来自: 南京
最新评论
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery plugin template</title>
<style type="text/css">
*{font-size:14px;}
table{border-collapse:collapse;border-spacing:0;border-left:1px solid #888;border-top:1px solid #888;background:#efefef;width:100%}
th,td{border-right:1px solid #888;border-bottom:1px solid #888;padding:5px 15px;}
th{font-weight:bold;background:#ccc;}
table table{border-left:0px solid #888;border-top:0px;}
table table tr:last-child > td{border-bottom:0px}
table table tr > td:last-child{border-right:0px}
table table tr > th:last-child{border-right:0px}
table tr td.pad0{padding: 0px;}
.box{background-color: #788990;}
.box td{background-color: #788990;}
.box th{background-color: #788990;}
</style>
<script src="../jquery-1.11.3.js"></script>
<script src="jquery.tpl.1.0.js"></script>
<script type="text/javascript">
var d1 = {name : "Shawn", job : "Engineer"};
var d2 = {data : {name : "Cook", job : "CEO"}};
var d3 = [
{name : "Jackson", job : "Engineer", gender : "M"}
,{name : "Sharui", job : "Engineer", gender : "F"}
,{name : "Tim Cook", job : "CEO"}
,{name : "Jack Ma", gender : "M"}
];
var d4 = {
name : "Jackson"
,bill : [
{month : "January", spend : 500, desc : "none"}
,{month : "February", spend : 1500, desc : "traffic, oil"}
]
};
var d5 = {
name : "Jackson"
,bill : [
{month : "January",
detail : [
{item : "餐费", fee : 500, desc : "日常餐费、请客吃饭"}
,{item : "交通费", fee : 1000, desc : "邮费支出"}
,{item : "通信费", fee : 200, desc : "电话费"}
]
}
,{month : "February",
detail : [
{item : "餐费", fee : 500, desc : "日常餐费、请客吃饭"}
,{item : "交通费", fee : 1000, desc : "邮费支出"}
,{item : "汽车保养费", fee : 800, desc : "被黑了"}
,{item : "通信费", fee : 200, desc : "电话费"}
]
}
]
};
var d6 = {
name : "XX南京分公司"
,bill : [
{name : "业务部门",
detail : [
{name : "餐费", fee : 500, desc : "日常餐费、请客吃饭"}
,{name : "交通费", fee : 1000, desc : "邮费支出"}
,{name : "通信费", fee : 200, desc : "电话费"}
]
}
,{name : "行政部门",
detail : [
{name : "餐费", fee : 500, desc : "日常餐费、请客吃饭"}
,{name : "交通费", fee : 1000, desc : "邮费支出"}
,{name : "汽车保养费", fee : 800, desc : "被黑了"}
,{name : "通信费", fee : 200, desc : "电话费"}
]
}
]
};
var d7 = [
{
id : "a001"
,name : "曹操"
,gender : "M"
,birthday : new Date(155, 10, 1) //"155-11-01"
,fav : ["登山", "美女", "打架"]
,country : "魏"
,imgPath : "c:/a001.jpg"
,desc : "字孟德,一名吉利,小字阿瞒,沛国谯县(今安徽亳州)人"
}
,{
id : "a002"
,name : "刘备"
,gender : "M"
,birthday : new Date(161, 9, 1) //"161-10-01"
,fav : ["篮球", "登山", "阅读"]
,country : "蜀"
,imgPath : "c:/a002.jpg"
,desc : "字玄德,东汉末年幽州涿郡涿县人"
}
,{
id : "a003"
,name : "武则天"
,gender : "F"
,birthday : new Date(624, 1, 17) //"624-02-17"
,fav : ["阅读","暗访"]
,country : "唐"
,imgPath : "c:/a003.jpg"
,desc : "名武曌,并州文水(今山西文水县东)人"
}
,{
id : "a004"
,name : "Shawn Zhai"
,gender : "M"
,birthday : new Date(1982, 9, 1)
,imgPath : "c:/a004.jpg"
,desc : "江苏 南京"
}
];
$(document).ready(function(){
var tpls = [];
var cfg = {debug:true, dateFormat:"公元yyyy年MM月dd日"};
var tpl1 = $(".tpl1").tpl(d1, cfg); tpls[tpls.length] = tpl1;
var tpl2 = $(".tpl2").tpl(d2, cfg); tpls[tpls.length] = tpl2;
var tpl3 = $(".tpl3").tpl(d3, cfg); tpls[tpls.length] = tpl3;
var tpl4 = $(".tpl4").tpl(d4, cfg); tpls[tpls.length] = tpl4;
var tpl5 = $(".tpl5").tpl(d5, cfg); tpls[tpls.length] = tpl5;
var tpl6 = $(".tpl6").tpl(d6, cfg); tpls[tpls.length] = tpl6;
var tpl7 = $(".tpl7").tpl(d7, cfg); tpls[tpls.length] = tpl7;
$.each(tpls, function(i,n){
tpls[i].find("[jbind]").mouseover(function(e){
var jd = $(this);
var jbind = jd.attr("jbind");
var d = jd.data();
var ks = [];
for(var k in d){
ks[ks.length] = k;
}
if(ks.length === 0){
ks = "预计加载:[" + jbind + "], 实际未加载任何数据";
}else{
//ks = "预计加载:[" + jbind + "], 实际加载:[" + ks.join(",") + "]";
ks = "预计加载:[" + jbind + "], 实际加载:" + json2str(d, "_prt");
}
jd.attr("title", ks);
jd.addClass("box");
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则,我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
});
tpls[i].find("[jbind]").mouseout(function(e){
var jd = $(this);
jd.removeClass("box");
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则,我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
});
});
});
function fnRenderGender(tpl, data, config){
if(data.v === "M"){
data.v = "男";
}else if(data.v === "F"){
data.v = "女";
}else{
data.v = "保密";
}
return data;
}
function fnRenderIndex(tpl, data, config){
$(this).append(data.v + 1);
return false;
}
function fnRenderIndexInput(tpl, data, config){
$(this).val(data.v + 1);
return false;
}
function fnView(jdom){
$(".tpl7View").tpl(jdom.data());
}
function json2str(o, exp) {
var arr = [];
var fmt = function(s) {
if (typeof s == 'object' && s != null) return json2str(s, exp);
return /^(string|number)$/.test(typeof s) ? "'" + s + "'" : s;
}
if(o.constructor == Array){
for (var i in o){
if(i === exp) continue;
arr.push(fmt(o[i]));
}
return '[' + arr.join(',') + ']';
}else{
for (var i in o){
if(i === exp) continue;
arr.push("'" + i + "':" + fmt(o[i]));
}
return '{' + arr.join(',') + '}';
}
}
var a=$("div:first").attr("aaaaaa");
</script>
</head>
<body>
<hr/>
测试数据1
<div>
<table>
<thead>
<tr><th>姓名</th><th>工作</th></tr>
</thead>
<tbody>
<tr class="tpl1">
<td jdata="name"></td><td jdata="job"></td>
</tr>
</tbody>
</table>
</div>
<hr/>
测试数据2
<div class="tpl2">
<table jdata="data" jbind="data">
<thead>
<tr><th>姓名</th><th>工作</th></tr>
</thead>
<tbody>
<tr>
<td jdata="name"></td><td jdata="job"></td>
</tr>
</tbody>
</table>
</div>
<hr/>
测试数据3
<div>
<table>
<thead>
<tr><th>序号</th><th>姓名</th><th>工作</th><th>性别</th></tr>
</thead>
<tbody>
<tr class="tpl3">
<td jdata="index" jbind="name,job,gender" jrender="fnRenderIndex"></td>
<td jdata="name" jbind="name,job,gender"></td>
<td jdata="job" jbind="name,job,gender"></td>
<td jdata="gender" jbind="name,job,gender" jrender="fnRenderGender"></td>
</tr>
</tbody>
</table>
</div>
<hr/>
测试数据4
<div>
<table>
<thead>
<tr><th>姓名</th><th>账单</th></tr>
</thead>
<tbody>
<tr class="tpl4">
<td jdata="name"></td>
<td class="pad0">
<table>
<thead>
<tr><th>序号</th><th>月份</th><th>支出费用</th><th>描述</th></tr>
</thead>
<tbody>
<tr jdata="bill" jbind="bill">
<td jdata="index"></td>
<td jdata="month"></td>
<td jdata="spend"></td>
<td jdata="desc"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<hr/>
测试数据5
<div>
<table>
<thead>
<tr><th>姓名</th><th>账单</th></tr>
</thead>
<tbody>
<tr class="tpl5">
<td jdata="name"></td>
<td class="pad0">
<table>
<thead>
<tr><th>序号</th><th>月份</th><th>详情</th></tr>
</thead>
<tbody>
<tr jdata="bill" jbind="bill">
<td jdata="index"></td>
<td jdata="month"></td>
<td class="pad0">
<table>
<thead>
<tr><th>序号</th><th>条目</th><th>支出费用</th><th>详情</th></tr>
</thead>
<colgroup>
<col width="10%" />
<col width="20%" />
<col width="20%" />
<col width="50%" />
</colgroup>
<tbody>
<tr jdata="detail" jbind="detail">
<td jdata="index" jrenderFn="fnRenderIndex"></td>
<td jdata="item"></td>
<td jdata="fee"></td>
<td jdata="desc"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<hr/>
测试数据6
<div>
<table>
<thead>
<tr><th>分公司名称</th><th>账单</th></tr>
</thead>
<tbody>
<tr class="tpl6">
<td jdata="name"></td>
<td class="pad0">
<table>
<thead>
<tr><th>序号</th><th>部门名称</th><th>详情</th></tr>
</thead>
<tbody>
<tr jdata="bill">
<td jdata="index" jrender="fnRenderIndex"></td>
<td jdata="name"></td>
<td class="pad0">
<table>
<thead>
<tr><th jbind="bill">序号</th><th>条目名称</th><th>支出费用</th><th>详情</th></tr>
</thead>
<colgroup>
<col width="10%" />
<col width="20%" />
<col width="20%" />
<col width="50%" />
</colgroup>
<tbody>
<tr jdata="detail" jbind="detail">
<td jdata="index" jrender="fnRenderIndex"></td>
<td jdata="name"></td>
<td jdata="fee"></td>
<td jdata="desc"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<hr/>
测试数据7
<div>
<table>
<thead>
<tr><th>序号</th><th>姓名</th><th>性别</th><th>生日</th><th>爱好</th><th>简介</th></tr>
</thead>
<tbody>
<tr class="tpl7" jbind="index,name,gender,birthday,fav,country,desc" onclick="fnView($(this))">
<td jdata="index" jrender="fnRenderIndex"></td>
<td jdata="name"></td>
<td jdata="gender" jrender="fnRenderGender"></td>
<td jdata="birthday"></td>
<td jdata="fav"></td>
<td jdata="desc"></td>
</tr>
</tbody>
</table>
<div>
<form>
<table>
<tbody class="tpl7View">
<tr>
<td>序号</td>
<td><input jdata="index" jrender="fnRenderIndexInput" value=""/></td>
</tr>
<tr>
<td>姓名</td>
<td><input jdata="name" value=""/></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" jdata="gender" value="M"/>男
<input type="radio" jdata="gender" value="F"/>女
</td>
</tr>
<tr>
<td>生日</td>
<td><input jdata="birthday" value=""/></td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" jdata="fav" value="登山"/>登山
<input type="checkbox" jdata="fav" value="篮球"/>篮球
<input type="checkbox" jdata="fav" value="阅读"/>阅读
<input type="checkbox" jdata="fav" value="美女"/>美女
<input type="checkbox" jdata="fav" value="打架"/>打架
<input type="checkbox" jdata="fav" value="暗访"/>暗访
</td>
</tr>
<tr>
<td>朝代</td>
<td>
<select jdata="country">
<option value="">请选择</option>
<option value="魏">魏国</option>
<option value="蜀">蜀国</option>
<option value="唐">唐朝</option>
</select>
</td>
</tr>
<tr>
<td>简介</td>
<td>
<textarea jdata="desc"></textarea>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
<br/><br/><br/><br/><br/>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery plugin template</title>
<style type="text/css">
*{font-size:14px;}
table{border-collapse:collapse;border-spacing:0;border-left:1px solid #888;border-top:1px solid #888;background:#efefef;width:100%}
th,td{border-right:1px solid #888;border-bottom:1px solid #888;padding:5px 15px;}
th{font-weight:bold;background:#ccc;}
table table{border-left:0px solid #888;border-top:0px;}
table table tr:last-child > td{border-bottom:0px}
table table tr > td:last-child{border-right:0px}
table table tr > th:last-child{border-right:0px}
table tr td.pad0{padding: 0px;}
.box{background-color: #788990;}
.box td{background-color: #788990;}
.box th{background-color: #788990;}
</style>
<script src="../jquery-1.11.3.js"></script>
<script src="jquery.tpl.1.0.js"></script>
<script type="text/javascript">
var d1 = {name : "Shawn", job : "Engineer"};
var d2 = {data : {name : "Cook", job : "CEO"}};
var d3 = [
{name : "Jackson", job : "Engineer", gender : "M"}
,{name : "Sharui", job : "Engineer", gender : "F"}
,{name : "Tim Cook", job : "CEO"}
,{name : "Jack Ma", gender : "M"}
];
var d4 = {
name : "Jackson"
,bill : [
{month : "January", spend : 500, desc : "none"}
,{month : "February", spend : 1500, desc : "traffic, oil"}
]
};
var d5 = {
name : "Jackson"
,bill : [
{month : "January",
detail : [
{item : "餐费", fee : 500, desc : "日常餐费、请客吃饭"}
,{item : "交通费", fee : 1000, desc : "邮费支出"}
,{item : "通信费", fee : 200, desc : "电话费"}
]
}
,{month : "February",
detail : [
{item : "餐费", fee : 500, desc : "日常餐费、请客吃饭"}
,{item : "交通费", fee : 1000, desc : "邮费支出"}
,{item : "汽车保养费", fee : 800, desc : "被黑了"}
,{item : "通信费", fee : 200, desc : "电话费"}
]
}
]
};
var d6 = {
name : "XX南京分公司"
,bill : [
{name : "业务部门",
detail : [
{name : "餐费", fee : 500, desc : "日常餐费、请客吃饭"}
,{name : "交通费", fee : 1000, desc : "邮费支出"}
,{name : "通信费", fee : 200, desc : "电话费"}
]
}
,{name : "行政部门",
detail : [
{name : "餐费", fee : 500, desc : "日常餐费、请客吃饭"}
,{name : "交通费", fee : 1000, desc : "邮费支出"}
,{name : "汽车保养费", fee : 800, desc : "被黑了"}
,{name : "通信费", fee : 200, desc : "电话费"}
]
}
]
};
var d7 = [
{
id : "a001"
,name : "曹操"
,gender : "M"
,birthday : new Date(155, 10, 1) //"155-11-01"
,fav : ["登山", "美女", "打架"]
,country : "魏"
,imgPath : "c:/a001.jpg"
,desc : "字孟德,一名吉利,小字阿瞒,沛国谯县(今安徽亳州)人"
}
,{
id : "a002"
,name : "刘备"
,gender : "M"
,birthday : new Date(161, 9, 1) //"161-10-01"
,fav : ["篮球", "登山", "阅读"]
,country : "蜀"
,imgPath : "c:/a002.jpg"
,desc : "字玄德,东汉末年幽州涿郡涿县人"
}
,{
id : "a003"
,name : "武则天"
,gender : "F"
,birthday : new Date(624, 1, 17) //"624-02-17"
,fav : ["阅读","暗访"]
,country : "唐"
,imgPath : "c:/a003.jpg"
,desc : "名武曌,并州文水(今山西文水县东)人"
}
,{
id : "a004"
,name : "Shawn Zhai"
,gender : "M"
,birthday : new Date(1982, 9, 1)
,imgPath : "c:/a004.jpg"
,desc : "江苏 南京"
}
];
$(document).ready(function(){
var tpls = [];
var cfg = {debug:true, dateFormat:"公元yyyy年MM月dd日"};
var tpl1 = $(".tpl1").tpl(d1, cfg); tpls[tpls.length] = tpl1;
var tpl2 = $(".tpl2").tpl(d2, cfg); tpls[tpls.length] = tpl2;
var tpl3 = $(".tpl3").tpl(d3, cfg); tpls[tpls.length] = tpl3;
var tpl4 = $(".tpl4").tpl(d4, cfg); tpls[tpls.length] = tpl4;
var tpl5 = $(".tpl5").tpl(d5, cfg); tpls[tpls.length] = tpl5;
var tpl6 = $(".tpl6").tpl(d6, cfg); tpls[tpls.length] = tpl6;
var tpl7 = $(".tpl7").tpl(d7, cfg); tpls[tpls.length] = tpl7;
$.each(tpls, function(i,n){
tpls[i].find("[jbind]").mouseover(function(e){
var jd = $(this);
var jbind = jd.attr("jbind");
var d = jd.data();
var ks = [];
for(var k in d){
ks[ks.length] = k;
}
if(ks.length === 0){
ks = "预计加载:[" + jbind + "], 实际未加载任何数据";
}else{
//ks = "预计加载:[" + jbind + "], 实际加载:[" + ks.join(",") + "]";
ks = "预计加载:[" + jbind + "], 实际加载:" + json2str(d, "_prt");
}
jd.attr("title", ks);
jd.addClass("box");
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则,我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
});
tpls[i].find("[jbind]").mouseout(function(e){
var jd = $(this);
jd.removeClass("box");
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则,我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
});
});
});
function fnRenderGender(tpl, data, config){
if(data.v === "M"){
data.v = "男";
}else if(data.v === "F"){
data.v = "女";
}else{
data.v = "保密";
}
return data;
}
function fnRenderIndex(tpl, data, config){
$(this).append(data.v + 1);
return false;
}
function fnRenderIndexInput(tpl, data, config){
$(this).val(data.v + 1);
return false;
}
function fnView(jdom){
$(".tpl7View").tpl(jdom.data());
}
function json2str(o, exp) {
var arr = [];
var fmt = function(s) {
if (typeof s == 'object' && s != null) return json2str(s, exp);
return /^(string|number)$/.test(typeof s) ? "'" + s + "'" : s;
}
if(o.constructor == Array){
for (var i in o){
if(i === exp) continue;
arr.push(fmt(o[i]));
}
return '[' + arr.join(',') + ']';
}else{
for (var i in o){
if(i === exp) continue;
arr.push("'" + i + "':" + fmt(o[i]));
}
return '{' + arr.join(',') + '}';
}
}
var a=$("div:first").attr("aaaaaa");
</script>
</head>
<body>
<hr/>
测试数据1
<div>
<table>
<thead>
<tr><th>姓名</th><th>工作</th></tr>
</thead>
<tbody>
<tr class="tpl1">
<td jdata="name"></td><td jdata="job"></td>
</tr>
</tbody>
</table>
</div>
<hr/>
测试数据2
<div class="tpl2">
<table jdata="data" jbind="data">
<thead>
<tr><th>姓名</th><th>工作</th></tr>
</thead>
<tbody>
<tr>
<td jdata="name"></td><td jdata="job"></td>
</tr>
</tbody>
</table>
</div>
<hr/>
测试数据3
<div>
<table>
<thead>
<tr><th>序号</th><th>姓名</th><th>工作</th><th>性别</th></tr>
</thead>
<tbody>
<tr class="tpl3">
<td jdata="index" jbind="name,job,gender" jrender="fnRenderIndex"></td>
<td jdata="name" jbind="name,job,gender"></td>
<td jdata="job" jbind="name,job,gender"></td>
<td jdata="gender" jbind="name,job,gender" jrender="fnRenderGender"></td>
</tr>
</tbody>
</table>
</div>
<hr/>
测试数据4
<div>
<table>
<thead>
<tr><th>姓名</th><th>账单</th></tr>
</thead>
<tbody>
<tr class="tpl4">
<td jdata="name"></td>
<td class="pad0">
<table>
<thead>
<tr><th>序号</th><th>月份</th><th>支出费用</th><th>描述</th></tr>
</thead>
<tbody>
<tr jdata="bill" jbind="bill">
<td jdata="index"></td>
<td jdata="month"></td>
<td jdata="spend"></td>
<td jdata="desc"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<hr/>
测试数据5
<div>
<table>
<thead>
<tr><th>姓名</th><th>账单</th></tr>
</thead>
<tbody>
<tr class="tpl5">
<td jdata="name"></td>
<td class="pad0">
<table>
<thead>
<tr><th>序号</th><th>月份</th><th>详情</th></tr>
</thead>
<tbody>
<tr jdata="bill" jbind="bill">
<td jdata="index"></td>
<td jdata="month"></td>
<td class="pad0">
<table>
<thead>
<tr><th>序号</th><th>条目</th><th>支出费用</th><th>详情</th></tr>
</thead>
<colgroup>
<col width="10%" />
<col width="20%" />
<col width="20%" />
<col width="50%" />
</colgroup>
<tbody>
<tr jdata="detail" jbind="detail">
<td jdata="index" jrenderFn="fnRenderIndex"></td>
<td jdata="item"></td>
<td jdata="fee"></td>
<td jdata="desc"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<hr/>
测试数据6
<div>
<table>
<thead>
<tr><th>分公司名称</th><th>账单</th></tr>
</thead>
<tbody>
<tr class="tpl6">
<td jdata="name"></td>
<td class="pad0">
<table>
<thead>
<tr><th>序号</th><th>部门名称</th><th>详情</th></tr>
</thead>
<tbody>
<tr jdata="bill">
<td jdata="index" jrender="fnRenderIndex"></td>
<td jdata="name"></td>
<td class="pad0">
<table>
<thead>
<tr><th jbind="bill">序号</th><th>条目名称</th><th>支出费用</th><th>详情</th></tr>
</thead>
<colgroup>
<col width="10%" />
<col width="20%" />
<col width="20%" />
<col width="50%" />
</colgroup>
<tbody>
<tr jdata="detail" jbind="detail">
<td jdata="index" jrender="fnRenderIndex"></td>
<td jdata="name"></td>
<td jdata="fee"></td>
<td jdata="desc"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<hr/>
测试数据7
<div>
<table>
<thead>
<tr><th>序号</th><th>姓名</th><th>性别</th><th>生日</th><th>爱好</th><th>简介</th></tr>
</thead>
<tbody>
<tr class="tpl7" jbind="index,name,gender,birthday,fav,country,desc" onclick="fnView($(this))">
<td jdata="index" jrender="fnRenderIndex"></td>
<td jdata="name"></td>
<td jdata="gender" jrender="fnRenderGender"></td>
<td jdata="birthday"></td>
<td jdata="fav"></td>
<td jdata="desc"></td>
</tr>
</tbody>
</table>
<div>
<form>
<table>
<tbody class="tpl7View">
<tr>
<td>序号</td>
<td><input jdata="index" jrender="fnRenderIndexInput" value=""/></td>
</tr>
<tr>
<td>姓名</td>
<td><input jdata="name" value=""/></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" jdata="gender" value="M"/>男
<input type="radio" jdata="gender" value="F"/>女
</td>
</tr>
<tr>
<td>生日</td>
<td><input jdata="birthday" value=""/></td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" jdata="fav" value="登山"/>登山
<input type="checkbox" jdata="fav" value="篮球"/>篮球
<input type="checkbox" jdata="fav" value="阅读"/>阅读
<input type="checkbox" jdata="fav" value="美女"/>美女
<input type="checkbox" jdata="fav" value="打架"/>打架
<input type="checkbox" jdata="fav" value="暗访"/>暗访
</td>
</tr>
<tr>
<td>朝代</td>
<td>
<select jdata="country">
<option value="">请选择</option>
<option value="魏">魏国</option>
<option value="蜀">蜀国</option>
<option value="唐">唐朝</option>
</select>
</td>
</tr>
<tr>
<td>简介</td>
<td>
<textarea jdata="desc"></textarea>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
<br/><br/><br/><br/><br/>
</body>
</html>
相关推荐
template-method-demo 模板方法示例
最近在学习一个jquery插件-Json2Template,发现网上现成的例子完整的项目很少,所以自己写了一个
a jquery Plus for javascript to DataBind Template HTML Render 模板引擎
这是我的博客《前端常用插件之art-template模板引擎》文章的示例代码 具体使用可参考文章,或者网上搜索也可以
jQuery插件模板 一个基于jQuery插件模板和George Paterson的的测试配置。 用法 包括jQuery: < script src =" http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js " > </ script > ...
artTemplate模板 js替换使用 ### 编写模板 使用一个``type="text/html"``的``script``标签存放模板: <h1>{{title}} {{each list as value i}} 索引 {{i + 1}} :{{value}} {{/each}} ### 渲染...
vim-template, 用于Vim的简单模板插件 简单Vim模板插件作者:> 对于Vim来说这是一个简单的插件,它允许你为某些文件类型设置一组模板。 在 C/C 报头中添加像警卫这样的样板代码是很有用的,或者是许可免责声明。
jquery.template采用不同的方法将值插入模板,从而降低 XSS 攻击的风险。 用法 只需为模板传递一个 CSS 选择器,然后传递一个带有值的对象。 (模板在第一次使用后缓存) var $el = $ . template ( '#player' , {...
prism模板 vs插件
jquery template是一个很实用的插件。可以根据HTML模板,绑定上对应的数据(可以对这些数据进行格式化操作,如全部大写,全部小写等),输出或添加到页面上。我们可以经常看到,在一个ajax成功之后的处理,往往要用...
前端项目-jquery.loadtemplate,用于加载和使用模板的jquery插件。该插件设计简单但功能强大,支持从页面内加载模板,或使用Ajax加载HTML文件。
完整的一套关于art-template的Demo,采用前后台分离的方式,后台提供数据接口,前台渲染数据的方式,采用Ajax从后台获取数据进行渲染,前台使用jQuery+art-template,后台使用ASP.NET模拟后台数据接口,打开即可用
vue3使用print-template生成pdfDemo
该资源为logstash模板,在导入数据的时候,需要对数据格式进行格式化,可提前配置template模板进行覆盖,有需要可自行下载
腾讯的一款模板引擎,效率极佳,从此告别html字符串拼接,安全的数据渲染,自动防范xss攻击,只需简单引入即可
Windows Live Writer文本模板插件,点击即可插入预先编辑好的内容
前端开发时,我们经常会遇到动态拼接表单多div模块,但往往由于拼接太多...而该artTemplate.js文件使得页面模板化开发,从而使得追加的表单或div可以单独存在,并灵活的追加在页面中,突出的优点就是便于维护及操作。
Templatefiles 公司模板
webgl模板插件
自己整理的jquery template语法,很实用,对初学者有帮助,例子官网下载即可