<!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>

mui 弹窗提醒，form表单基本信息的更多相关文章

  1. iview中Modal弹窗做form表单验证相关问题

    在modal中初始化状态,点击确定弹窗消失. 有的时候表单验证就不希望立刻消失 在iview官网中有自定义页头页脚 可以直接自定义使用 另一种验证写法 serform: { ctCatelogue: ...

  2. Form表单提交数据的几种方式

    一.submit提交 在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交, ...

  3. 使用ajax方法实现form表单的提交(附源码)

    写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...

  4. iview form 表单的怪异小BUG

    当同一个弹窗中的表单重复利用时: 我原先的代码逻辑是: <Form :label-width="100" class="mt20" ref="c ...

  5. 使用ajax方法实现form表单的提交

    作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. 写在前面的话 在使用form表单的时候,一旦点击提交触发submit ...

  6. vue项目element-ui框架中的弹窗中的表单验证清除问题

    问题回顾: 1.vue项目的在弹窗上的form表单验证,第一次点击新增时正常,第二次新增打开弹窗后由于表单内容为空,出现验证这种情况 2.为了解决上面的情况,在执行点击新增事件加上this.$refs ...

  7. thinkPHP5.0使用form表单提交数据和删除文章，不用TP的提示页面，使用弹出提示信息

    form表单提交数据和删除文章时,TP的默认信息提示页面的看起来不是很好看,想要实现弹窗提示怎么做呢? 前端:可以使用前端的一个知识--iframe,iframe元素会创建包含另外一个文档的内联框架: ...

  8. form表单验证失败，阻止表单提交

    form表单验证失败,阻止表单提交 效果演示: 贴上完整代码: <!DOCTYPE html> <html lang="en"> <head> ...

  9. 一个form表单对应多个submit

    一个form表单多个submit 在平时项目开发过程中,经常会遇到一个form表单对应多个submit提交的情况,那么 ,这种情况应该怎么解决呢,也很简单,这时候就不能用submit来提交了,可以通过 ...

随机推荐

  1. [Python设计模式] 第17章 程序中的翻译官——适配器模式

    github地址:https://github.com/cheesezh/python_design_patterns 适配器模式 适配器模式,将一个类的接口转换成客户希望的另外一个接口.Adapte ...

  2. SpringBoot2.x使用EasyPOI导入Excel浅谈

    SpringBoot2.x使用EasyPOI导入Excel浅谈 平时经常遇到客户要帮忙导入一些数据到数据库中,有些数据比较多有时候手动录入就会很耗时间,所以就自己写一个Excel导入的demo记录一下 ...

  3. VS Code 插件

    https://blog.fundebug.com/2018/07/24/vs-extensions/

  4. Guava future

    减少主函数的等待时间,使得多任务能够异步非阻塞执行 ListenableFuture是可以监听的Future,它是对java原生Future的扩展增强.Future表示一个异步计算任务,当任务完成时可 ...

  5. Love2D游戏引擎制作贪吃蛇游戏

    代码地址如下:http://www.demodashi.com/demo/15051.html Love2D游戏引擎制作贪吃蛇游戏 内附有linux下的makefile,windows下的生成方法请查 ...

  6. sql 有条件计数

    select InstitutionID=LEFT(InstitutionID,9), Irregularities_Type=sum(CASE WHEN Irregularities_Type> ...

  7. Couldn't find log associated with operation handle: OperationHandle [opType=EXECUTE_STATEMENT, getHandleIdentifier ()=5687ff62-aa71-4b47-af6c-89f6a3f7a1fe]

    这个异常的出现是因为hive-site-xml中的hive.server2.logging.operation.log.location属性未配置正确: 修改为: <property> & ...

  8. Spark 公共篇-InterfaceStability

    本章内容: 1.源码 InterfaceStability 类包含三个注解,用于说明被他们注解的类型的稳定性. /** * Annotation to inform users of how much ...

  9. 为Sublime Text 设置全局启动快捷键

    为Sublime Text创建快捷方式.找到Sublime Text安装目录中的“sublime_text.exe”文件,然后右击创建快捷方式,如下图:  为Sublime Tex设置全局快捷键.将上 ...

  10. 【交换机】交换机RLDP（环路检测&链路检测）功能介绍及配置说明

    功能简介RLDP 全称是Rapid Link Detection Protocol,是锐捷网络自主开发的一个用于快速检测以太网链路故障的链路协议.一般的以太网链路检测机制都只是利用物理连接的状态,通过 ...