<!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. Eclipse中Project的属性Deployment Assembly（部署程序集）消失了，不存在了，去哪儿了

    1. 该项目不是web项目,所以不存在Deployment Assembly 属性.在Eclipse中,怎样将一个非web project变成一个web project? 1)右键项目,选择Proje ...

  2. zookeeper视图工具

    https://www.cnblogs.com/xd502djj/p/8919425.html

  3. SSE图像算法优化系列七：基于SSE实现的极速的矩形核腐蚀和膨胀（最大值和最小值）算法。

    因未测试其他作者的算法时间和效率,本文不敢自称是最快的,但是速度也可以肯定说是相当快的,在一台I5机器上占用单核的资源处理 3000 * 2000的灰度数据用时约 20ms,并且算法和核心的大小是无关 ...

  4. 用分离、附加的方式实现sql server数据库的备份和还原

    一.数据库分离.附加的说明 SQL Server提供了"分离/附加"数据库."备份/还原"数据库.复制数据库等多种数据库的备份和恢复方法.这里介绍一种学习中常用 ...

  5. MVP模式和Clean模式

    从类图上来看,MVP都是一个业务一个Presenter,每个Presenter都是一个接口,它还包含了View的接口,用于定于和View相关的行为,然后Activity等业务类实现View的接口,因为 ...

  6. webpack2.x抽取css

    这里以.vue文件为例,需要安装extract-text-webpack-plugin包 我们主要设置的文件是webpack.config.js文件. 抽取成一个css文件 这个设置是提取成一个单独的 ...

  7. RabbitMQ 特性

    1RabbitMQ 特点 与 SpringAMQP 完美整合.API 丰富. 集群模式丰富,表达式配置,HA 模式,镜像队列模型. 保证数据不丢失的前提做到高可靠性.可用性.

  8. GCC:/usr/lib/libstdc++.so.6: version GLIBCXX_3.4.15 not found

    源码编译升级安装了gcc后,编译程序或运行其它程序时,有时会出现类似/usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.15' not found的问题.这 ...

  9. 值得从PHP转向JavaScript

    1.掌握一门语言而成为爆栈工程师确实诱惑力极大 2.JavaScript 代码的语义性比 PHP 更强一些,当然语言整体特性也复杂不少,学习成本是更高的 3.JSON原生:配合MongoDB的话,从头 ...

  10. 微信jssdk常见错误及解决方法

    调用config 接口的时候传入参数 debug: true 可以开启debug模式,页面会alert出错误信息.以下为常见错误及解决方法: invalid url domain当前页面所在域名与使用 ...