1、这个框架还不错,样式很美。官网及文档传送门:http://dev.dcloud.net.cn/mui/ui/
2、引入示例:
<!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="{theme:javascript/jquery-1.8.2.min.js}"></script> <script src="{theme:javascript/jquery.cookie.js}"></script> <script src="{theme:javascript/mui.min.js}"></script> <script src="{theme:javascript/mui.js}"></script> <link href="{skin:css/mui.min.css}" rel="stylesheet" /> <link rel="stylesheet" type="text/css" href="{skin:css/icons-extra.css}" /> <link rel="stylesheet" href="{skin:css/jimu.css}" /> <script type="text/javascript" charset="utf-8"> mui.init(); </script> </head>
3、示例:
<script type="text/javascript" charset="utf-8"> //mui初始化 mui.init({ swipeBack: true //启用右滑关闭功能 }); var info = document.getElementById("info"); document.getElementById("alertBtn").addEventListener(\'tap\', function() { mui.alert(\'欢迎使用Hello MUI\', \'Hello MUI\', function() { info.innerText = \'你刚关闭了警告框\'; }); }); document.getElementById("confirmBtn").addEventListener(\'tap\', function() { var btnArray = [\'否\', \'是\']; mui.confirm(\'MUI是个好框架,确认?\', \'Hello MUI\', btnArray, function(e) { if (e.index == 1) { info.innerText = \'你刚确认MUI是个好框架\'; } else { info.innerText = \'MUI没有得到你的认可,继续加油\' } }) }); document.getElementById("promptBtn").addEventListener(\'tap\', function(e) { e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug,使用plus.nativeUI.prompt会造成输入法闪一下又没了 var btnArray = [\'取消\', \'确定\']; mui.prompt(\'请输入你对MUI的评语:\', \'性能好\', \'Hello MUI\', btnArray, function(e) { if (e.index == 1) { info.innerText = \'谢谢你的评语:\' + e.value; } else { info.innerText = \'你点了取消按钮\'; } }) }); document.getElementById("toastBtn").addEventListener(\'tap\', function() { mui.toast(\'欢迎体验Hello MUI\'); }); </script>
4、相关插件已备份至U盘