移动端web初体验
使用mui项目模板，用APP视角预览。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 6 <title></title> 7 <script src="js/mui.min.js"></script> 8 <link href="css/mui.min.css" rel="stylesheet"/> 9 <script type="text/javascript" charset="utf-8"> 10 mui.init(); 11 </script> 12 </head> 13 <body> 14 <header class="mui-bar mui-bar-nav"> 15 <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> 16 <h1 class="mui-title">折叠面板</h1> 17 </header> 18 <div class="mui-content"> 19 <ul class="mui-table-view"> 20 <li class="mui-table-view-cell mui-collapse mui-active"> 21 <a class="mui-navigate-right">面板1</a> 22 <div class="mui-collapse-content"> 23 <p>面板1子内容</p> 24 </div> 25 </li> 26 <li class="mui-table-view-cell mui-collapse"> 27 <a class="mui-navigate-right">面板2</a> 28 <div class="mui-collapse-content"> 29 <p>面板2子内容</p> 30 </div> 31 </li> 32 </ul> 33 </div> 34 <div class="mui-content"> 35 <button type="button" class="mui-btn">点击这里</button> 36 <button type="button" class="mui-btn mui-btn-blue" onclick="showMenu();">点击这里</button> 37 <button type="button" class="mui-btn mui-btn-outlined mui-btn-blue my">点击这里</button> 38 </div> 39 <div id="menus_1" class="mui-popover mui-popover-bottom mui-popover-action"> 40 <ul class="mui-table-view"> 41 <li class="mui-table-view-cell"> 42 <a href="#">菜单一</a> 43 </li> 44 <li class="mui-table-view-cell"> 45 <a href="#">菜单二</a> 46 </li> 47 </ul> 48 <ul class="mui-table-view"> 49 <li class="mui-table-view-cell"> 50 <a href="#menus_1"><b>取消</b></a> 51 </li> 52 </ul> 53 </div> 54 <div class="mui-content"> 55 <div class="mui-input-row mui-checkbox mui-left"> 56 <label>运动</label> 57 <input name="checkbox1" value="运动" type="checkbox" /> 58 </div> 59 <div class="mui-input-row mui-checkbox mui-left"> 60 <label>看书</label> 61 <input name="checkbox1" value="看书" type="checkbox" /> 62 </div> 63 </div> 64 <div class="mui-content"> 65 <div class="mui-input-row mui-radio mui-left"> 66 <label>运动</label> 67 <input name="checkbox1" value="运动" type="radio" class="rds" /> 68 </div> 69 <div class="mui-input-row mui-radio mui-left"> 70 <label>看书</label> 71 <input name="checkbox1" value="看书" type="radio" class="rds"/> 72 </div> 73 </div> 74 <button type="button" class="mui-btn-blue" onclick="getVals();">获取当前值</button> 75 <script type="text/javascript"> 76 77 function showMenu(){ 78 mui('#menus_1').popover('toggle'); 79 } 80 function getVals(){ 81 var res = getRadioRes('rds'); 82 if(res == null){ 83 mui.toast('请选择'); 84 return; 85 } 86 mui.toast(res); 87 } 88 function getRadioRes(className){ 89 var rdsObj = document.getElementsByClassName(className); 90 var checkVal = null; 91 for(i=0; i<rdsObj.length; i++){ 92 if(rdsObj[i].checked){ 93 checkVal = rdsObj[i].value; 94 } 95 } 96 return checkVal; 97 } 98 </script> 99 </body> 100 </html>
