移动端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>