template模板，Jquery插件[demo]
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>jqueryplugintemplate</title>
<styletype="text/css">
*{font-size:14px;}
table{border-collapse:collapse;border-spacing:0;border-left:1pxsolid#888;border-top:1pxsolid#888;background:#efefef;width:100%}
th,td{border-right:1pxsolid#888;border-bottom:1pxsolid#888;padding:5px15px;}
th{font-weight:bold;background:#ccc;}
tabletable{border-left:0pxsolid#888;border-top:0px;}
tabletabletr:last-child>td{border-bottom:0px}
tabletabletr>td:last-child{border-right:0px}
tabletabletr>th:last-child{border-right:0px}
tabletrtd.pad0{padding:0px;}
.box{background-color:#788990;}
.boxtd{background-color:#788990;}
.boxth{background-color:#788990;}
</style>
<scriptsrc="../jquery-1.11.3.js"></script>
<scriptsrc="jquery.tpl.1.0.js"></script>
<scripttype="text/javascript">
vard1={name:"Shawn",job:"Engineer"};
vard2={data:{name:"Cook",job:"CEO"}};
vard3=[
{name:"Jackson",job:"Engineer",gender:"M"}
,{name:"Sharui",job:"Engineer",gender:"F"}
,{name:"TimCook",job:"CEO"}
,{name:"JackMa",gender:"M"}
];
vard4={
name:"Jackson"
,bill:[
{month:"January",spend:500,desc:"none"}
,{month:"February",spend:1500,desc:"traffic,oil"}
]
};
vard5={
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:"电话费"}
]
}
]
};
vard6={
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:"电话费"}
]
}
]
};
vard7=[
{
id:"a001"
,name:"曹操"
,gender:"M"
,birthday:newDate(155,10,1)//"155-11-01"
,fav:["登山","美女","打架"]
,country:"魏"
,imgPath:"c:/a001.jpg"
,desc:"字孟德，一名吉利，小字阿瞒，沛国谯县（今安徽亳州）人"
}
,{
id:"a002"
,name:"刘备"
,gender:"M"
,birthday:newDate(161,9,1)//"161-10-01"
,fav:["篮球","登山","阅读"]
,country:"蜀"
,imgPath:"c:/a002.jpg"
,desc:"字玄德，东汉末年幽州涿郡涿县人"
}
,{
id:"a003"
,name:"武则天"
,gender:"F"
,birthday:newDate(624,1,17)//"624-02-17"
,fav:["阅读","暗访"]
,country:"唐"
,imgPath:"c:/a003.jpg"
,desc:"名武曌，并州文水（今山西文水县东）人"
}
,{
id:"a004"
,name:"ShawnZhai"
,gender:"M"
,birthday:newDate(1982,9,1)
,imgPath:"c:/a004.jpg"
,desc:"江苏南京"
}
];
$(document).ready(function(){
vartpls=[];
varcfg={debug:true,dateFormat:"公元yyyy年MM月dd日"};
vartpl1=$(".tpl1").tpl(d1,cfg);tpls[tpls.length]=tpl1;
vartpl2=$(".tpl2").tpl(d2,cfg);tpls[tpls.length]=tpl2;
vartpl3=$(".tpl3").tpl(d3,cfg);tpls[tpls.length]=tpl3;
vartpl4=$(".tpl4").tpl(d4,cfg);tpls[tpls.length]=tpl4;
vartpl5=$(".tpl5").tpl(d5,cfg);tpls[tpls.length]=tpl5;
vartpl6=$(".tpl6").tpl(d6,cfg);tpls[tpls.length]=tpl6;
vartpl7=$(".tpl7").tpl(d7,cfg);tpls[tpls.length]=tpl7;
$.each(tpls,function(i,n){
tpls[i].find("[jbind]").mouseover(function(e){
varjd=$(this);
varjbind=jd.attr("jbind");
vard=jd.data();
varks=[];
for(varkind){
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){
varjd=$(this);
jd.removeClass("box");
if(e&&e.stopPropagation)
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble=true;
});
});
});
functionfnRenderGender(tpl,data,config){
if(data.v==="M"){
data.v="男";
}elseif(data.v==="F"){
data.v="女";
}else{
data.v="保密";
}
returndata;
}
functionfnRenderIndex(tpl,data,config){
$(this).append(data.v+1);
returnfalse;
}
functionfnRenderIndexInput(tpl,data,config){
$(this).val(data.v+1);
returnfalse;
}
functionfnView(jdom){
$(".tpl7View").tpl(jdom.data());
}
functionjson2str(o,exp){
vararr=[];
varfmt=function(s){
if(typeofs=='object'&&s!=null)returnjson2str(s,exp);
return/^(string|number)$/.test(typeofs)?"'"+s+"'":s;
}
if(o.constructor==Array){
for(variino){
if(i===exp)continue;
arr.push(fmt(o[i]));
}
return'['+arr.join(',')+']';
}else{
for(variino){
if(i===exp)continue;
arr.push("'"+i+"':"+fmt(o[i]));
}
return'{'+arr.join(',')+'}';
}
}
vara=$("div:first").attr("aaaaaa");
</script>
</head>
<body>
<hr/>
测试数据1
<div>
<table>
<thead>
<tr><th>姓名</th><th>工作</th></tr>
</thead>
<tbody>
<trclass="tpl1">
<tdjdata="name"></td><tdjdata="job"></td>
</tr>
</tbody>
</table>
</div>
<hr/>
测试数据2
<divclass="tpl2">
<tablejdata="data"jbind="data">
<thead>
<tr><th>姓名</th><th>工作</th></tr>
</thead>
<tbody>
<tr>
<tdjdata="name"></td><tdjdata="job"></td>
</tr>
</tbody>
</table>
</div>
<hr/>
测试数据3
<div>
<table>
<thead>
<tr><th>序号</th><th>姓名</th><th>工作</th><th>性别</th></tr>
</thead>
<tbody>
<trclass="tpl3">
<tdjdata="index"jbind="name,job,gender"jrender="fnRenderIndex"></td>
<tdjdata="name"jbind="name,job,gender"></td>
<tdjdata="job"jbind="name,job,gender"></td>
<tdjdata="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>
<trclass="tpl4">
<tdjdata="name"></td>
<tdclass="pad0">
<table>
<thead>
<tr><th>序号</th><th>月份</th><th>支出费用</th><th>描述</th></tr>
</thead>
<tbody>
<trjdata="bill"jbind="bill">
<tdjdata="index"></td>
<tdjdata="month"></td>
<tdjdata="spend"></td>
<tdjdata="desc"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<hr/>
测试数据5
<div>
<table>
<thead>
<tr><th>姓名</th><th>账单</th></tr>
</thead>
<tbody>
<trclass="tpl5">
<tdjdata="name"></td>
<tdclass="pad0">
<table>
<thead>
<tr><th>序号</th><th>月份</th><th>详情</th></tr>
</thead>
<tbody>
<trjdata="bill"jbind="bill">
<tdjdata="index"></td>
<tdjdata="month"></td>
<tdclass="pad0">
<table>
<thead>
<tr><th>序号</th><th>条目</th><th>支出费用</th><th>详情</th></tr>
</thead>
<colgroup>
<colwidth="10%"/>
<colwidth="20%"/>
<colwidth="20%"/>
<colwidth="50%"/>
</colgroup>
<tbody>
<trjdata="detail"jbind="detail">
<tdjdata="index"jrenderFn="fnRenderIndex"></td>
<tdjdata="item"></td>
<tdjdata="fee"></td>
<tdjdata="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>
<trclass="tpl6">
<tdjdata="name"></td>
<tdclass="pad0">
<table>
<thead>
<tr><th>序号</th><th>部门名称</th><th>详情</th></tr>
</thead>
<tbody>
<trjdata="bill">
<tdjdata="index"jrender="fnRenderIndex"></td>
<tdjdata="name"></td>
<tdclass="pad0">
<table>
<thead>
<tr><thjbind="bill">序号</th><th>条目名称</th><th>支出费用</th><th>详情</th></tr>
</thead>
<colgroup>
<colwidth="10%"/>
<colwidth="20%"/>
<colwidth="20%"/>
<colwidth="50%"/>
</colgroup>
<tbody>
<trjdata="detail"jbind="detail">
<tdjdata="index"jrender="fnRenderIndex"></td>
<tdjdata="name"></td>
<tdjdata="fee"></td>
<tdjdata="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>
<trclass="tpl7"jbind="index,name,gender,birthday,fav,country,desc"onclick="fnView($(this))">
<tdjdata="index"jrender="fnRenderIndex"></td>
<tdjdata="name"></td>
<tdjdata="gender"jrender="fnRenderGender"></td>
<tdjdata="birthday"></td>
<tdjdata="fav"></td>
<tdjdata="desc"></td>
</tr>
</tbody>
</table>
<div>
<form>
<table>
<tbodyclass="tpl7View">
<tr>
<td>序号</td>
<td><inputjdata="index"jrender="fnRenderIndexInput"value=""/></td>
</tr>
<tr>
<td>姓名</td>
<td><inputjdata="name"value=""/></td>
</tr>
<tr>
<td>性别</td>
<td>
<inputtype="radio"jdata="gender"value="M"/>男
<inputtype="radio"jdata="gender"value="F"/>女
</td>
</tr>
<tr>
<td>生日</td>
<td><inputjdata="birthday"value=""/></td>
</tr>
<tr>
<td>爱好</td>
<td>
<inputtype="checkbox"jdata="fav"value="登山"/>登山
<inputtype="checkbox"jdata="fav"value="篮球"/>篮球
<inputtype="checkbox"jdata="fav"value="阅读"/>阅读
<inputtype="checkbox"jdata="fav"value="美女"/>美女
<inputtype="checkbox"jdata="fav"value="打架"/>打架
<inputtype="checkbox"jdata="fav"value="暗访"/>暗访
</td>
</tr>
<tr>
<td>朝代</td>
<td>
<selectjdata="country">
<optionvalue="">请选择</option>
<optionvalue="魏">魏国</option>
<optionvalue="蜀">蜀国</option>
<optionvalue="唐">唐朝</option>
</select>
</td>
</tr>
<tr>
<td>简介</td>
<td>
<textareajdata="desc"></textarea>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
<br/><br/><br/><br/><br/>
</body>
</html>