升级移动端答卷页面，提升UI体验与加载速度

src/main/webapp/WEB-INF/page/content/diaowen-design/answer-survey-m.jsp

@@ -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">提&nbsp;交</a>&nbsp;&nbsp; -->
 									<input type="button" class="submitSurvey" id="submitSurvey" value="提&nbsp;交" data-role="button" data-theme="b" />
 									 <!-- <a href="#" class="sbtn24 sbtn24_0 submitSurvey">提&nbsp;交</a>&nbsp;&nbsp; -->
@@ -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="开源的调查问卷系统" >调问网&nbsp;DWSurvey&nbsp;</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>

src/main/webapp/css/answer-m.css

@@ -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: 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;
-    line-height: 20px;
+    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;
 }

src/main/webapp/js/common/ans-m.js

@@ -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));