template.jså®æå端æ°æ®çéå
åè¨:æè¿å ¬å¸è¦æ±åjs,第ä¸æ¬¡ç¨è¿ä¸ªæ¡æ¶,就记å½ä¸ä¸
ä¸,æéè¦æåç«¯ä¼ è¿æ¥çæ°æ®(listéå),ä¹å°±æ¯éå¸+éé¢
2,å¯¼å ¥js
<script src="js/template.js"></script>
3,页é¢,å ç²æ¯éç¹
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/root.css"/>
<script src="js/rem.js"></script>
<title>è´ä¹°éå¸</title>
</head>
<body>
<div class="buy_head">
<img src="images/return.png" class="return" alt="" />
<div class="buy_head_title f36 tc">ç£åäº</div>
</div>
<div class="buy_tab">
<a href="buy_vip.html" class="buy_tab_main c99 f30">
ä¼å
</a>
<a href="buy_coin.html" class="buy_tab_main c33 f38 ml50">
<span>éå¸</span>
<div class="buy_tab_main_b2"></div>
</a>
<a href="buy_space.html" class="buy_tab_main c99 f30 ml56">空é´</a>
</div>
<img src="images/vip2.png" class="buy_vip_banner" alt="" />
<div class="buy_choice">
<script type="text/html" id="basic">
{{each list as file i}}
<div class="buy_choice_main">
<div class="c66 f26 tc mt34 buy_pay_coin_head">{{file.gold}}个</div>
<div class="mt24 buy_pay_coin left tc mt20 c0a">
<input id="typeId" type="hidden" value="{{file.id}}">
<span class="f30 coin_fh">ï¿¥</span><span class="f50 num">{{file.cny}}</span>
</div>
</div>
{{/each}}
</script>
</div>
<div class="pay_style">
<img src="images/pay_style.png" class="pay_style_1" alt="" />
<span>æ¯ä»å®</span>
<img src="images/pay2.png" class="pay_style_2" alt="" />
</div>
<div class="pay_foot">
<div class="buy_pay_coin_foot">
<input id="payType" type="hidden" value="89465ad8f5344760b81321c5d3b6c871">
<span class="f30 coin_fh b6c3">ï¿¥</span><span class="f50 num">1</span>
</div>
<div class="pay_but tc f32">è´ä¹°</div>
</div>
</body>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/root.js"></script>
<script src="js/template.js"></script>
<script>
/**
* èªå¨å è½½è§å
*/
window.onload = function () {
var gold='gold';
$.post("/tblset/findTblSetsByType.do",{type:gold},function(data){
//var data = JSON.parse(data);
//console.log(data.list);
var li = template('basic',{list:data.obj});
$('.buy_choice').html("");
$('.buy_choice').prepend(li);
$(".return").click(function(){
window.history.go(-1);
})
$(".buy_choice_main").eq(0).addClass("buy_vip2_active");
$(".buy_choice_main").each(function(i){
$(".buy_choice_main").eq(i).click(function(){
$(".buy_choice_main").removeClass("buy_vip2_active");
$(this).addClass("buy_vip2_active");
var coin = $(this).children(".buy_pay_coin").children(".num").html();
var payType=$(this).children(".buy_pay_coin").children("#typeId").val();
$(".buy_pay_coin_foot .num").html(coin)
//$(".buy_pay_coin_foot").html(coin);
$("#payType").val(payType);
})
})
});
//è´ä¹°ç¹å»äºä»¶
$(function() {
$(".pay_but").click(
function() {
var payType=$("#payType").val();
if (payType != "") {
window.location.href = "/tblset/aliPayController.do?payType="+payType;
} else {
mask("æ示","ç½ç»é误!","åæ¶","ç¡®å®");
}
});
})
}
</script>
</html>
äº,è·åæ°æ®å°é¡µé¢åæ ¼å¼åæ¶é´, ç¨templateè°ç¨æ¹æ³
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/root.css"/>
<script src="js/rem.js"></script>
<title>æçæ¶æ¯</title>
</head>
<body>
<div class="buy_head">
<img src="images/return.png" class="return" alt="" />
<div class="buy_head_title f36 tc">æçæ¶æ¯</div>
</div>
<div class="h20 W100"></div>
<div id="msgShow">
<script type="text/html" id="msgs">
{{each list as dataList i}}
<div class="news_list" id="msgs">
<img src="images/news.png" class="news_img left" alt="" />
<div class="news_list_main f28 c66 left">
{{dataList.content}}
</div>
<div class="news_time f20 c99 W100 left tc mt26">
<span>{{json_parse(dataList.creDate)}}</span>
</div>
</div>
{{/each}}
</script>
<div class="look_more" id="typeface" οnclick="nextpage()">
æ¥çæ´å¤
<img src="images/look_more.png" alt="" />
</div>
</div>
</body>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/root.js"></script>
<script src="js/template.js"></script>
<script>
var page = 1;
var pageInfoGlobal = null;
$(function (){
getTradeHistory(page);
})
function nextpage() {
if(pageInfoGlobal!=null && pageInfoGlobal.obj.hasNextPage){
page++;
console.log("---->"+page);
getTradeHistory(page);
} else {
$("#typeface").hide();
}
}
function getTradeHistory(page){
$.ajax({
type:"get",
url:"/user/userMsg/findUserMsgs.do?pageNum="+page+"&pageSize=10",
success:function(data){
pageInfoGlobal = data;
//console.log(data.obj.list);
console.log(data);
if(data.obj.total != 0 && data.obj.hasNextPage){
}else{
$("#typeface").hide();
}
var list=data.obj.list
var li = template('msgs',{list:list});
$('#msgShow').prepend(li);
},
error:function(){
alert("ç½ç»é误");
}
});
};
$(".return").click(function(){
window.history.go(-1);
})
template.helper("json_parse",function(fmt){
var data=new Date(fmt);
if(isToday(data)){
return data.Format("HH:mm:ss");
}else{
return data.Format("yyyy-MM-dd HH:mm:ss");
}
});
//æ ¼å¼åæ¶é´
Date.prototype.Format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, //æ份
"d+": this.getDate(), //æ¥
"H+": this.getHours(), //å°æ¶
"m+": this.getMinutes(), //å
"s+": this.getSeconds(), //ç§
"q+": Math.floor((this.getMonth() + 3) / 3), //å£åº¦
"S": this.getMilliseconds() //毫ç§
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
function isToday(str) {
return new Date().getTime() - new Date(str).getTime() < 86400000;
}
</script>
</html>