mui 弹窗提醒，form表单基本信息

最新推荐文章于 2023-12-28 15:19:52 发布

dblhj3915

最新推荐文章于 2023-12-28 15:19:52 发布

阅读量740

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zc290987034/p/8846060.html

版权

<!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 style="padding: 20px;">
        <button type="button" onClick="showTest()">点击测试信息框</button>
        <button type="button" class="mui-btn mui-btn-primary" onClick="showFirm()">点击测试询问框</button>
        
        <button type="button" class="mui-btn mui-btn-success" onClick="showDuihua()">点击测试对话框</button>
    </div>
    
    <form class="mui-input-group">
        <!--加上class="mui-input-clear" 可快速删除-->
        <div class="mui-input-row">
            <label>用户名</label>
            <input type="text" class="mui-input-clear" placeholder="请输入用户名">
        </div>
        <!--加上class="mui-input-password" 可查看密码的明文信息-->
        <div class="mui-input-row">
            <label>密码</label>
            <input type="password" class="mui-input-password" placeholder="请输入密码">
        </div>
        <div class="mui-button-row">
            <button type="button" class="mui-btn-primary">确定</button>
            <button type="button" class="mui-btn-danger">取消</button>
        </div>
    </form>
    
    <h4 class="">mui在mui.init()中会自动初始化基本控件，但是 动态添加的元素需要重新进行初始化，（也就是你需要ajax请求数据时返回的值需要给哪个class 就给哪个class在重新初始化一下）----(mui('.mui-input-row input').input();)</h4>
</div>
</body>
<script type="text/javascript">
    //信息框
    //alert('需要提醒的话','提醒标题','只有一个确认按钮',function(){mui.toast('点击确定后执行什么，或不加function()  自动会关闭窗口');})
    function showTest(){
        mui.alert('信号','小提醒','ok',callBack1('您说的是对的'));
    }
    function callBack1(title){
        mui.toast(title);
    }
    //询问框
    function showFirm(){
        mui.confirm(
            '您真的要这样做吗？',
            '小提醒',
            new Array('不行','好的'),
            function(e){
                if(e.index == 1){
                    console.log(e);
                    mui.toast('我点击了好的');
                }else{
                    mui.toast('我点击了不行');
                }
            }
        )
    }
    
    //输入框
    function showDuihua(){
        mui.prompt(
            '请您输入姓名',
            '战三',
            'hi..',
            new Array('取消','确定'),
            function(e){
                if(e.index == 1){
                    if(e.value == ''){
                        mui.toast('您没有输入');
                    }else{
                        mui.toast(e.value);
                    }
                }else{
                    mui.toast('您点击了取消');
                }
                
            }
        )
    }
</script>
    
</html>

转载于:https://www.cnblogs.com/zc290987034/p/8846060.html

dblhj3915

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
mui 弹窗提醒，form表单基本信息

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale...
复制链接

扫一扫