xuzhengzong

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盘

 

分类:

技术点:

相关文章: