【微信端】
1.标签的拼装,来实现列表相间的背景颜色
css
.cellbg_odd { background-color: #B07AAD } .cellbg_even { background-color: #D5B4D2 }
html
<div class="weui_cells weui_cells_access <if condition=‘$k%2 eq 0‘>cellbg_odd</if><if condition=‘$k%2 eq 1‘>cellbg_even</if>">
2.级联关系
html
<div class="weui_panel"> <div class="weui_panel_bd"> <div class="weui_media_box weui_media_small_appmsg"> <div class="weui_cells weui_cells_access"> <a href="javascript:;" class="weui_cell" onclick="selectmenu(‘1‘);"> <div class="weui_cell_hd"><i class="icon icon-104 f20"></i></div> <div class="weui_cell_bd weui_cell_primary"> <p style="color:#ca0da9;font-weight: bold">*****</p> </div> <span id="cell_1" class="icon icon-74 f-black"></span> </a> </div> </div> </div> <div style="display: none;" id="menu_1"> <div class="weui_info">联系人: **</div> <div class="weui_info">联系电话: ****-********</div> </div> </div>
js
function selectmenu(n){ var eleMore = document.getElementById("menu_"+n); if(eleMore.style.display=="none"){ eleMore.style.display = ‘block‘; $("#cell_"+n).removeClass("icon-74"); $("#cell_"+n).addClass("icon-35 "); }else{ eleMore.style.display = ‘none‘; $("#cell_"+n).removeClass("icon-35"); $("#cell_"+n).addClass("icon-74"); } }
3.单选(保证id的唯一)
html
<volist name=‘opt‘ id="vo" key="k"> <div class="page" style="-webkit-overflow-scrolling: touch;"> <div class="page__inner" style="position: relative; height:auto;"> <div id="question"> <div class="title">第 {yc:$k} 题(单选) </div> <p id="content">{yc:$vo.content} </p> <input type="hidden" id="correct_opt_{yc:$k}" value="{yc:$vo.correct}" /> </div> <!--内容开始--> <div class="weui_cells weui_cells_radio" style=‘margin-top:5px;background:transparent;‘> <volist name="options_opt" id="options"> <if condition="$options[‘q_id‘] eq $vo[‘id‘]"> <label class="weui_cell weui_check_label" id="lable" for="x{yc:$i}"> <div id="choiceall"> <p id="select">{yc:$options.optNum}. {yc:$options.content}</p> </div> <div class="weui_cell_ft"> <input type="radio" class="weui_check" name="radio{yc:$k}" id="x{yc:$i}" value="{yc:$options.optNum}"> <span class="weui_icon_checked"></span> </div> </label> </if> </volist> </div> <div id="button"> <div id="pre_next" style="margin-right:80px"> <a id="pre" name="prevbtn" class="prevbtn">上一题</a> </div> <div id="pre_next"> <button id="next" name="nextbtn" class="nextbtn" onclick="_onclick_opt({yc:$k})" style="background-color:transparent;border:0px">下一题</button> </div> </div> </div> <!--内容结束--> </div> </volist>
js
function _onclick_opt(i) { answer_opt[i - 1] = $("input[name=‘radio" + i + "‘]:checked").val(); correct_opt[i - 1] = $("#correct_opt_" + i).val(); }
4.多选
html
<volist name=‘multi‘ id="vo" key="k"> <div class="page" style="-webkit-overflow-scrolling: touch;"> <div class="page__inner" style="position: relative; height:auto;"> <div id="questionF"> <div class="title">第{yc:$k +5}题(多选)</div> <p id="contentF">{yc:$vo.content}</p> <input type="hidden" id="correct_multi_{yc:$k +5}" value="{yc:$vo.correct}" /> </div> <!--内容开始--> <div class="weui_cells weui_cells_radio" style=‘margin-top:5px;background:transparent;‘> <volist name="options_multi" id="options"> <if condition="$options[‘q_id‘] eq $vo[‘id‘]"> <label class="weui_cell weui_check_label" id="lable" for="s{yc:$i}"> <div id="choiceall"> <p id="select">{yc:$options.optNum}. {yc:$options.content}</p> </div> <div class="weui_cell_ft"> <input type="checkbox" class="weui_check" name="checkbox{yc:$k +5}" id="s{yc:$i}" value="{yc:$options.optNum}"> <span class="weui_icon_checked"></span> </div> </label> </if> </volist> </div> <div id="button"> <div id="pre_next" style="margin-right:80px"> <a id="pre" name="prevbtn" class="prevbtn">上一题</a> </div> <div id="pre_next"> <button id="next" name="nextbtn" class="nextbtn" onclick="_onclick_multi({yc:$k +5})" style="background-color:transparent;border:0px">下一题</button> </div> </div> </div> <!--内容结束--> </div> </volist>
js
function _onclick_multi(i) { var temp = []; $("input[name=‘checkbox" + i + "‘]:checked").each(function() { temp.push($(this).val()); }); answer_opt[i - 1] = temp; correct_opt[i - 1] = $("#correct_multi_" + i).val(); }