mui 卡片視圖 遮罩蒙版
阿新 • • 發佈：2018-04-16
回調 mini HA -h ble sca round line -i
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet"/> <script type="text/javascript" charset="utf-8"> mui.init(); </script> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">hello</h1> </header> <div class="mui-content"> <!--卡片視圖--> <div class="mui-card" style="margin: 10px;"> <div class="mui-card-content" style="line-height: 0px;"> <img src="imgs/banner1.png" width="100%;"></div> <div class="mui-card-footer"> <div class="mui-media-body" > 小M <p>發布於2016-06-30 15：30</p> </div> </div> </div> <!--遮罩蒙版--> <button type="button" onClick="show_zhezhao()">顯示遮罩層</button> </div> </body> <script type="text/javascript"> function show_zhezhao(){ var mask = mui.createMask(callback);//callback為用戶點擊蒙版時自動執行的回調； mask.show();//顯示遮罩 } function callback(){ mui.toast(‘您取消了操作‘); } </script> </html>
mui 卡片視圖 遮罩蒙版