核心功能点：JS art-template.js 模板
优点：html dom元素的新增可以直接使用模板，而不用使用字符串拼接html的方式
使用效果
使用效果
问卷功能效果
问卷页面代码
<!DOCTYPE html style="background: transparent;">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>title</title>
<link rel="stylesheet" type="text/css" href="../../../css/api.css"/>
<style>
.tbRow{
margin:10px 10px 0px 10px;
}
.tbCell{
display:table-cell;
vertical-align:middle;
padding-left:10px;
}
.tbYd{
background-color: #10CC6D;
border-radius: 50%;
height: 23px;
width:30px;
color:white;
font-size:12px;
text-align:center;
padding-top:7px;
}
.tbUndeline{
border-bottom:solid 1px #F1F1F1;
padding-bottom:8px;
}
.tbItem{
margin:10px 20px 2px 20px;
}
.btn{
display:block;
width:90%;
margin:30px auto;
background-color:#0E9EF4;
color:white;
padding:15px;
border-radius: 5px;
}
.imgDiv{
width:40%;
float:left;
}
.imgDiv img{
width:100%;
max-height:50%;
border-radius: 5px;
}
</style>
</head>
<body style="background: transparent;">
<div id="bg" style="display:none;top:0px;left:0px;right:0px;bottom:0px; position:absolute;z-index: 9999; background-color: black;opacity: 0.5;width:100%;height:100%;"></div>
<div id="content">
</div>
<button type="button" οnclick="sbQue();" class="btn">
提 交
</button>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript" src="../../../script/common.js"></script>
<script type="text/javascript" src="../../../script/template-native.js"></script>
<script type="text/javascript" src="../script/jquery.js"></script>
<script type="text/javascript" src="../script/business.js"></script>
<!--单选模板-->
<script id="sigleModel" type="text/html">
<div class="question" data-id="<%=data.id%>">
<div class="tbRow tbUndeline">
<div class="tbCell ">
<div class="tbYd queIndex">
<%=data.index%>
</div>
</div>
<div class="tbCell queTitle">
<%=data.describe%>
</div>
</div>
<% for(var i=0;i<data.answers.length;i++){ %>
<div class="tbItem tbUndeline" οnclick="sigleClick(this);">
<div class="tbCell ">
<%if(data.type==1){%>
<input type="radio" value="<%=i+1%>" class="ckflag" name="rdo_<%=data.index%>"/>
<%}%>
<%if(data.type==3){%>
<input type="checkbox" value="<%=i+1%>" class="ckflag" name="rdo_<%=data.index%>"/>
<%}%>
</div>
<div class="tbCell queTitle itemText">
<%=data.answers[i] %>
</div>
<div class="tbCell queTitle" style="display: none;">
<input maxlength="20" placeholder="请输入" value="" class="other"/>
</div>
</div>
<%}%>
</div>
</script>
<!--单选图片模板-->
<script id="sigleImgModel" type="text/html">
<div class="question" data-id="<%=data.id%>">
<div class="tbRow tbUndeline">
<div class="tbCell ">
<div class="tbYd queIndex">
<%=data.index%>
</div>
</div>
<div class="tbCell queTitle">
<%=data.describe%>
</div>
</div>
<% for(var i=0;i<data.answers.length;i++){ %>
<div class="tbItem imgDiv" οnclick="sigleClick(this);">
<div class="tbCell ">
<%if(data.type==1){%>
<input type="radio" value="<%=i+1%>" class="ckflag" name="rdo_<%=data.index%>"/>
<%}%>
<%if(data.type==3){%>
<input type="checkbox" value="<%=i+1%>" class="ckflag" name="rdo_<%=data.index%>"/>
<%}%>
</div>
<div class="tbCell queTitle itemText">
<img src="<%=data.answers[i] %>" />
</div>
<div class="tbCell queTitle" style="display: none;">
<input maxlength="20" placeholder="请输入" value="" class="other"/>
</div>
</div>
<%} %>
<div style="clear:both;height: 8px;"></div>
</div>
</script>
<script type="text/javascript">
//配置参数
var configParam ={};
apiready = function(){
configParam=api.pageParam;
api.showProgress({
title: '读取配置中...',
text: ''
});
investBusiness.getJsonDatas("allQueList",{levelID:configParam.datas.special_data.queId},function(ret){
api.hideProgress();
if (!ret){
alert("参数配置有误");
return;
};
if(ret.length==0)
{
alert("无问卷数据");
return;
}
loadDom(ret);
});
};
//加载
function loadDom(queList){
for(var i=0;i<queList.length;i++)
{
var que=queList[i];
que.index=i+1;
que.answers=[];
for(var j=1;j<=10;j++){
var as=eval("que.answer"+j);
if(as!="")
{
que.answers.push(as);
}
}
//单选
if(que.type==1)
{
var html ="";
//判断是不是图片
if(que.answer1.lastIndexOf("http")>=0 && que.answer1.length>5){
html = template("sigleImgModel", {data:que});
}else{
html = template("sigleModel", {data:que});
}
$("#content").append(html);
}
//多选
if(que.type==3)
{
var html ="";
//判断是不是图片
if(que.answer1.lastIndexOf("http")>=0 && que.answer1.length>5){
html = template("sigleImgModel", {data:que});
}else{
html = template("sigleModel", {data:que});
}
$("#content").append(html);
}
}
}
//单机单选
function sigleClick(ele){
$(ele).parent().find(".other").val("");
//隐藏其他输入框
$(ele).parent().find(".other").parent().hide();
//多选有取消选择问题
if($(ele).find(".ckflag").eq(0).attr("type")=="checkbox")
{
$(ele).find(".ckflag").get(0).checked=!$(ele).find(".ckflag").get(0).checked;
}else{
$(ele).find(".ckflag").get(0).checked=true;
}
if($.trim($(ele).find(".itemText").text())=="其他")
{
//显示其他
$(ele).find(".other").parent().show();
}
}
//提交答题
function sbQue(){
api.showProgress({
title: '提交中...',
text: ''
});
//要提交的数据
var submitDatas=[];
//是否完成
var isCompalte=true;
$(".question").each(function(){
var ckCount=$(this).find(".ckflag:checked").size();
if(ckCount==0)
{
isCompalte=false;
return false;
}
var sd={};
sd.user_id=configParam.user_id;
sd.subject_info_id=$(this).attr("data-id");
sd.other="";
sd.result="";
//获得选中的值
$(this).find(".ckflag:checked").each(function(){
sd.result+=$(this).val()+",";
//有其他
if($.trim($(this).parent().parent().find(".itemText").text())=="其他")
{
sd.other=$.trim($(this).parent().parent().find(".other").val());
}
});
submitDatas.push(sd);
});
if(isCompalte==false)
{
api.hideProgress();
alert("请完成问卷之后再提交");
return;
}
investBusiness.getJsonDatas2("SubmitRecord", submitDatas, function (ret) {
api.hideProgress();
if (ret.result == true)
{
//允许抽奖
if(configParam.datas.special_data.allowDraw==1)
{
$("#bg").show();
investBusiness.setLuckDraw(configParam.datas.special_data.drawPath);
luckDraw();
}else{
api.alert({
title: '',
msg: '提交成功，感谢您的支持',
}, function(ret, err) {
api.closeWin();
});
}
}
else if (ret.result == false)
{
alert(ret.resultText);
}
else{
alert("网络异常，请稍候再试");
}
});
}
function luckDraw() {
api.showProgress({
title: '数据处理中...',
text: ''
});
var param = {};
param.key = $api.getStorage('session_key');
investBusiness.getJsonDatas("luckDraw", param, function (ret) {
api.hideProgress();
var pageParam={};
if (ret.success == true) {
pageParam.result=true;
pageParam.msg=ret.datas.title;
} else {
pageParam.result=false;
pageParam.msg=ret.datas.error;
}
api.openFrame({
name: 'box',
url: '../../ad/treasureBox.html',
rect: {
x:0,
y:80,
w:api.winWidth,
h:api.winHeight-80
},
pageParam:pageParam
});
}, function (err) {
api.hideProgress();
api.confirm({
title: '提示',
msg: '网络读取错误',
buttons: ['重试', '返回']
}, function (ret, err) {
if (ret.buttonIndex == 1) {
luckDraw();
}
});
});
}
</script>
</html>
1218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
