mirror of
https://gitee.com/wkeyuan/DWSurvey.git
synced 2024-11-30 02:58:55 +08:00
升级移动端答卷页面，提升UI体验与加载速度
This commit is contained in:
keyuan
parent
75c59f8031
commit
67d88b409d
@ -7,7 +7,7 @@
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>${survey.surveyName }</title>
|
||||
<%--<link rel="stylesheet" href="${ctx }/js/plugs/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">--%>
|
||||
<link rel="stylesheet" href="${ctx }/js/plugs/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">
|
||||
<script type="text/javascript" src="${ctx }/js/plugs/jquery-ui-1.10.3.custom/js/jquery-1.10.1.js"></script>
|
||||
<%--<script src="${ctx }/js/plugs/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>--%>
|
||||
<script type="text/javascript" src="${ctx }/js/common/common.js"></script>
|
||||
@ -20,8 +20,8 @@
|
||||
<form id="surveyForm" action="${ctx }/dws-answer!saveMobile.action" method="post" data-ajax="false">
|
||||
<input type="hidden" id="surveyId" name="surveyId" value="${survey.id }">
|
||||
<input type="hidden" name="form-from" value="mobile" >
|
||||
<div id="answer-m-head">
|
||||
<div>
|
||||
<div style="padding: 0px 10px;">
|
||||
<div id="answer-m-head" >
|
||||
<div id="dwSurveyTitle" class="noLogoImg" style="padding-top: 5px;">
|
||||
<!-- <i class="fa fa-star"></i> -->
|
||||
<div id="dwSurveyName" class="dwSvyName" style="">${survey.surveyName }</div>
|
||||
@ -31,12 +31,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="m-errorMsg"></div>
|
||||
<div data-role="content" >
|
||||
<div id="answer-m-content">
|
||||
|
||||
<div id="dwSurveyQuContent" style="">
|
||||
<div id="dwSurveyQuContentBg">
|
||||
|
||||
<!-- <div style="border-top: 3px solid #81AB00;margin:0px auto;padding-bottom: 15px;"></div> -->
|
||||
<c:set var="pageNo" value="1"></c:set>
|
||||
<c:set var="isNextPage" value="0"></c:set>
|
||||
<ul id="dwSurveyQuContentAppUl">
|
||||
@ -67,21 +65,23 @@
|
||||
</div>
|
||||
<div class="surveyQuItem">
|
||||
<div class="surveyQuItemContent">
|
||||
<fieldset data-role="controlgroup" >
|
||||
<div class="controlgroup" >
|
||||
<legend>
|
||||
<span class="quTitleNum">${i.count }、</span>
|
||||
<span class="quTitleText">${en.quTitle}</span>
|
||||
</legend>
|
||||
<c:forEach items="${en.quRadios }" var="item" >
|
||||
<div class="dwQuOptionItemContent">
|
||||
<label for="qu_${en.quType }_${en.id }_${item.id}">${item.optionName }</label>
|
||||
<input id="qu_${en.quType }_${en.id }_${item.id}" type="radio" name="qu_${en.quType }_${en.id }" value="${item.id }">
|
||||
<div class="dwQuOptionItemContent" >
|
||||
<label class="dwRedioStyle dwQuInputLabel" ></label>
|
||||
<input id="qu_${en.quType }_${en.id }_${item.id}" type="radio" name="qu_${en.quType }_${en.id }" value="${item.id }">
|
||||
<label for="qu_${en.quType }_${en.id }_${item.id}">${item.optionName }</label>
|
||||
<c:if test="${item.isNote eq 1 }" >
|
||||
<input type='text' class='inputSytle_1' style="width:200px;padding:5px;${item.isNote eq 1 ? '':'display: none;'}" name="text_qu_${en.quType }_${en.id }_${item.id }" />
|
||||
<input type='text' class='inputSytle_1 option_other_text' name="text_qu_${en.quType }_${en.id }_${item.id }" />
|
||||
</c:if>
|
||||
</div>
|
||||
|
||||
</c:forEach>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -112,21 +112,24 @@
|
||||
</div>
|
||||
<div class="surveyQuItem">
|
||||
<div class="surveyQuItemContent">
|
||||
<fieldset data-role="controlgroup" >
|
||||
<div class="controlgroup" >
|
||||
<legend>
|
||||
<span class="quTitleNum">${i.count }、</span>
|
||||
<span class="quTitleText">${en.quTitle}</span>
|
||||
</legend>
|
||||
<c:forEach items="${en.quCheckboxs }" var="item">
|
||||
<div class="dwQuOptionItemContent">
|
||||
<label for="tag_qu_${en.quType }_${en.id }_${item.id }" >${item.optionName }</label>
|
||||
<input id="tag_qu_${en.quType }_${en.id }_${item.id }" type="checkbox" name="tag_qu_${en.quType }_${en.id }_${item.id }" value="${item.id }" >
|
||||
|
||||
<div class="dwQuOptionItemContent" >
|
||||
<label class="dwCheckboxStyle dwQuInputLabel" ></label>
|
||||
<input id="tag_qu_${en.quType }_${en.id }_${item.id }" type="checkbox" name="tag_qu_${en.quType }_${en.id }_${item.id }" value="${item.id }" >
|
||||
<label for="tag_qu_${en.quType }_${en.id }_${item.id }" >${item.optionName }</label>
|
||||
<c:if test="${item.isNote eq 1 }" >
|
||||
<input type='text' class='inputSytle_1' style="width:200px;padding:5px;" name="text_tag_qu_${en.quType }_${en.id }_${item.id }" />
|
||||
<input type='text' class='inputSytle_1 option_other_text' name="text_tag_qu_${en.quType }_${en.id }_${item.id }" />
|
||||
</c:if>
|
||||
</div>
|
||||
|
||||
</c:forEach>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -166,13 +169,13 @@
|
||||
|
||||
<c:choose>
|
||||
<c:when test="${en.checkType eq 'DATE'}">
|
||||
<input type="date" name="qu_${en.quType }_${en.id }" class="inputSytle_1 fillblankInput" >
|
||||
<input type="date" name="qu_${en.quType }_${en.id }" class="inputSytle_1 fillblankInput" style="margin-top: 10px;" >
|
||||
</c:when>
|
||||
<c:when test="${en.answerInputRow > 1 }">
|
||||
<textarea name="qu_${en.quType }_${en.id }" rows="${en.answerInputRow }" class="inputSytle_2 fillblankInput" ></textarea>
|
||||
<textarea name="qu_${en.quType }_${en.id }" rows="${en.answerInputRow }" class="inputSytle_2 fillblankInput" style="margin-top: 10px;" > ></textarea>
|
||||
</c:when>
|
||||
<c:otherwise>
|
||||
<input type="text" name="qu_${en.quType }_${en.id }" class="inputSytle_1 fillblankInput" >
|
||||
<input type="text" name="qu_${en.quType }_${en.id }" class="inputSytle_1 fillblankInput" style="margin-top: 10px;" >
|
||||
</c:otherwise>
|
||||
</c:choose>
|
||||
|
||||
@ -206,7 +209,7 @@
|
||||
|
||||
<div class="surveyQuItem">
|
||||
<div class="surveyQuItemContent">
|
||||
<fieldset data-role="controlgroup" >
|
||||
<div class="controlgroup" >
|
||||
<legend>
|
||||
<span class="quTitleNum">${i.count }、</span>
|
||||
<span class="quTitleText">${en.quTitle}</span>
|
||||
@ -223,7 +226,7 @@
|
||||
</c:forEach>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -354,7 +357,7 @@
|
||||
</c:forEach>
|
||||
|
||||
|
||||
<li class="li_surveyQuItemBody surveyQu_${pageNo }" style="${pageNo gt 1 ?'display: none':''}">
|
||||
<li class="li_surveyQuItemBody surveyQu_${pageNo }" style="padding-bottom: 40px;padding-top: 20px;${pageNo gt 1 ?'display: none':''}">
|
||||
<div class="surveyQuItemBody">
|
||||
<div class="surveyQuItem">
|
||||
<div id="jcaptchaImgBody" class="r-qu-body" style="display: none;">
|
||||
@ -376,7 +379,7 @@
|
||||
|
||||
|
||||
<input type="hidden" class="quType" value="submitSurveyBtn">
|
||||
<div class="surveyQuItemContent" style="margin-bottom: 0px;min-height:20px;">
|
||||
<div class="surveyQuItemContent" >
|
||||
<!-- <a href="#" data-theme="b" data-role="button">提 交</a> -->
|
||||
<input type="button" class="submitSurvey" id="submitSurvey" value="提 交" data-role="button" data-theme="b" />
|
||||
<!-- <a href="#" class="sbtn24 sbtn24_0 submitSurvey">提 交</a> -->
|
||||
@ -395,12 +398,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-role="footer" >
|
||||
<h3>Powered by <a href="http://diaowen.net/index-m.jsp" style="text-decoration: none;" rel="external">DWSurvey</a></h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<div class="dw-footer" >
|
||||
<div><a href="http://diaowen.net/index-m.jsp" style="text-decoration: none;" rel="external" title="开源的调查问卷系统" >调问网 DWSurvey </a>提供技术支持</div>
|
||||
</div>
|
||||
|
||||
<div id="fixedMsg" style="position: fixed;top: 0px;width: 100%;padding: 10px;text-align: center;font-size: 18px;letter-spacing: 4px;line-height: 56px;background-color: #111;background-color: rgba(17,17,17,0.5);color: #fff;color: rgba(255,255,255,0.5);z-index: 200;display: none;"></div>
|
||||
<%@ include file="/WEB-INF/page/layouts/other.jsp"%>
|
||||
</body>
|
||||
|
||||
@ -1,12 +1,265 @@
|
||||
/*** old ***/
|
||||
.starRating{
|
||||
font-size: 26px;
|
||||
}
|
||||
.starRating .fa{
|
||||
cursor: pointer;
|
||||
}
|
||||
.starRating .fa-star{
|
||||
color: #3388CC;
|
||||
}
|
||||
.subbtn{
|
||||
opacity:1! important;
|
||||
color: white;
|
||||
}
|
||||
.m_quOrderByUi{
|
||||
margin: 5px 0 5px 0;
|
||||
padding: 0;
|
||||
border: 1px solid #d5d5d5;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.m_quOrderByUi li{
|
||||
border-color: #fff;
|
||||
font-size: 16px;
|
||||
min-height: 41px;
|
||||
position: relative;
|
||||
padding-right: 45px!important;
|
||||
border-bottom: 1px solid #EBEBEB!important;
|
||||
}
|
||||
.m_orderby_num{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 55%;
|
||||
margin-top: -15px;
|
||||
min-width: 26px;
|
||||
height: 26px;
|
||||
background: #85C8FF;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 26px;
|
||||
border-radius: 15px;
|
||||
z-index: 100;
|
||||
display: none;
|
||||
}
|
||||
.m_orderby_sel{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
font-size: 30px;
|
||||
z-index: 9999;
|
||||
|
||||
background-color: rgb(248, 248, 248);
|
||||
border: 1px solid rgb(166, 166, 166);
|
||||
border-image-source: initial;
|
||||
border-image-slice: initial;
|
||||
border-image-width: initial;
|
||||
border-image-outset: initial;
|
||||
border-image-repeat: initial;
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
body{
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
/*** new ***/
|
||||
#answer-m-head .dwSvyName{
|
||||
color: dodgerblue;
|
||||
color: #365f8f;
|
||||
font-weight: bold;
|
||||
letter-spacing: 2px;
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
padding: 10px 0px;
|
||||
}
|
||||
#dwSurveyNoteEdit{
|
||||
padding: 10px 0px;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: grey;
|
||||
font-size: 13px;
|
||||
line-height: 22px;
|
||||
}
|
||||
#answer-m-content{
|
||||
padding-top: 10px;
|
||||
}
|
||||
#dwSurveyQuContentAppUl{
|
||||
list-style: none;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
#dwSurveyQuContentAppUl li{
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
#dwSurveyQuContentAppUl li .controlgroup > legend{
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.surveyQuItem .surveyQuItemContent {
|
||||
padding: 0px;
|
||||
border: none;
|
||||
width: 100%;
|
||||
}
|
||||
.surveyQuItemContent .dwQuOptionItemContent{
|
||||
margin: .5em 0;
|
||||
position: relative;
|
||||
background-color: #f6f6f6;
|
||||
border: 1px solid #ddd;
|
||||
color: #333;
|
||||
/*text-shadow: 0 1px 0 #f3f3f3;*/
|
||||
padding: 6px 10px;
|
||||
border-radius: .3125em;
|
||||
font-size: 14px;
|
||||
background-color: white;
|
||||
}
|
||||
.surveyQuItemContent .columnItemContnetTd .dwQuOptionItemContent{
|
||||
margin: 0px;
|
||||
background-color: white;
|
||||
border: none;
|
||||
color: #333;
|
||||
text-shadow: none;
|
||||
padding: 0px;
|
||||
border-radius: 0em;
|
||||
font-size: 14px;
|
||||
}
|
||||
.surveyQuItemContent .dwQuOptionItemContent:active{
|
||||
border-color: rgb(129, 152, 186);
|
||||
border-color: #5aa9ef;
|
||||
border-color: #1e94fc;
|
||||
background: #dae8f5;
|
||||
background: white;
|
||||
border-color: #ddd;
|
||||
}
|
||||
.surveyQuItemContent .dwQuOptionItemContent.active{
|
||||
border-color: #1e94fc;
|
||||
background: #dae8f5;
|
||||
background: white;
|
||||
border-color: #ddd;
|
||||
background-color: #e4edf7;
|
||||
}
|
||||
.surveyQuItemContent .dwQuOptionItemContent input{
|
||||
|
||||
}
|
||||
.surveyQuItemContent .dwQuOptionItemContent label{
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
white-space: normal;
|
||||
z-index: 2;
|
||||
}
|
||||
.surveyQuItemContent .inputSytle_1{
|
||||
display: block;
|
||||
width: 100%;
|
||||
outline: 0;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
padding: 6px 5px;
|
||||
margin-top: 10px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
.dwQuOptionItemContent input[type='radio'],.dwQuOptionItemContent input[type='checkbox']{
|
||||
display: none;
|
||||
}
|
||||
/** 单选样式***/
|
||||
.dwQuOptionItemContent .dwRedioStyle {
|
||||
background: transparent url(../images/answer-icon-1.png) no-repeat center top;
|
||||
vertical-align: middle;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
background-position: -2px -6px;
|
||||
display:inline-block;;
|
||||
}
|
||||
.dwQuOptionItemContent .dwRedioStyle.checked{
|
||||
background-position: -2px -31px;
|
||||
}
|
||||
/**多选样式**/
|
||||
.dwQuOptionItemContent .dwCheckboxStyle {
|
||||
background: transparent url(../images/answer-icon-1.png) no-repeat center top;
|
||||
vertical-align: middle;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
background-position: -2px -60px;
|
||||
display:inline-block;
|
||||
}
|
||||
.dwQuOptionItemContent .dwCheckboxStyle.checked{
|
||||
background-position: -2px -87px;
|
||||
}
|
||||
.ui-controlgroup-controls{
|
||||
border-bottom:1px solid #ddd;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.ui-controlgroup-controls .m_clickQuOrderItem{
|
||||
background-color: #f6f6f6;
|
||||
border: 1px solid #ddd;
|
||||
color: #333;
|
||||
text-shadow: 0 1px 0 #f3f3f3;
|
||||
font-size: 14px;
|
||||
border-radius: 0px;
|
||||
border-bottom: none;
|
||||
}
|
||||
.ui-controlgroup-controls .m_clickQuOrderItem:first-child{
|
||||
|
||||
}
|
||||
.ui-controlgroup-controls .m_clickQuOrderItem label{
|
||||
border: none;
|
||||
}
|
||||
|
||||
.surveyQuItemContent .mFillblankTableTr label{
|
||||
display: block;
|
||||
margin: 0 0 .4em;
|
||||
}
|
||||
|
||||
.surveyQuItemContent .mFillblankTableTr{
|
||||
margin: 10px 0px;
|
||||
}
|
||||
.surveyQuItemContent .mFillblankTableTr .dwQuOptionItemContent label{
|
||||
display: inline-block;
|
||||
margin: 0px;
|
||||
}
|
||||
.surveyQuItemContent .quSliderItemTr .mFillblankTableEditTd label{
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.surveyQuItemContent .mFillblankTableTr .dwMFillblankInput,input[type='text'].fillblankInput{
|
||||
width: 100%;
|
||||
outline: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.surveyQuItemContent .mFillblankTableTr .dwMFillblankInput,input[type='text'].fillblankInput,.option_other_text{
|
||||
display: block;
|
||||
padding: 6px 5px;
|
||||
border: 1px solid #ddd;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.nextPage_a, .submitSurvey{
|
||||
width: 100%;
|
||||
line-height: 25px;
|
||||
border-radius: 2px;
|
||||
padding: 8px 0px;
|
||||
margin-left: 0px;
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
background: #1e94fc;
|
||||
border: none;
|
||||
}
|
||||
.dw-footer{
|
||||
display: block;
|
||||
padding: 20px 0px;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
padding-top: 30px;
|
||||
color: #333;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
.dw-footer a{
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@ -164,12 +164,49 @@ $(document).ready(function(){
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#dwSurveyQuContent input[type='radio'],#dwSurveyQuContent input[type='checkbox']").change(function(){
|
||||
$("#dwSurveyQuContent .dwQuOptionItemContent").unbind();
|
||||
$("#dwSurveyQuContent .dwQuOptionItemContent").click(function(){
|
||||
clickItem($(this));
|
||||
lgcommon($(this));
|
||||
validateCheck($(this).parents(".li_surveyQuItemBody"),false);
|
||||
$(".fillblankInput,.dwMFillblankInput,.dwChenMFillblankInput").blur();
|
||||
});
|
||||
|
||||
function clickItem(thObj){
|
||||
var quItemBody=thObj.parents(".li_surveyQuItemBody");
|
||||
var quType=quItemBody.find(".quType").val();
|
||||
var dwQuInputLabel=thObj.find(".dwQuInputLabel");
|
||||
if("RADIO"===quType){
|
||||
|
||||
quItemBody.find(".dwQuInputLabel").removeClass("checked");
|
||||
quItemBody.find("input[type='radio']").prop("checked",false);
|
||||
thObj.find("input[type='radio']").prop("checked",true);
|
||||
dwQuInputLabel.addClass("checked");
|
||||
quItemBody.find(".dwQuOptionItemContent").removeClass("active");
|
||||
thObj.addClass("active");
|
||||
|
||||
}else if("CHECKBOX"===quType){
|
||||
var thCheckbox = thObj.find("input[type='checkbox']");
|
||||
if(thCheckbox.prop("checked")){
|
||||
thObj.find("input[type='checkbox']").prop("checked",false);
|
||||
dwQuInputLabel.removeClass("checked");
|
||||
thObj.removeClass("active");
|
||||
}else{
|
||||
thObj.find("input[type='checkbox']").prop("checked",true);
|
||||
dwQuInputLabel.addClass("checked");
|
||||
thObj.addClass("active");
|
||||
}
|
||||
}else if("MULTIFILLBLANK"===quType){
|
||||
|
||||
var chenRow=thObj.parents(".mFillblankTableTr");
|
||||
chenRow.find(".dwQuInputLabel").removeClass("checked");
|
||||
chenRow.find("input[type='radio']").prop("checked",false);
|
||||
thObj.find("input[type='radio']").prop("checked",true);
|
||||
dwQuInputLabel.addClass("checked");
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
//填空题
|
||||
$(".fillblankInput,.dwMFillblankInput,.dwChenMFillblankInput").blur(function(){
|
||||
lgcommon($(this));
|
||||
|
||||
Loading…
Reference in New Issue
Block a user