<!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创建第一个Spring Boot项目

    一.安装SpringBoot插件 安装过程需要联网下载插件,属于在线安装,请耐心等待安装完成,下载安装完成以后,需要重启Eclipse 二.创建Spring Boot项目 如下图所示new-other ...

  2. jvm系列

    一.jvm理论 1.1.jvm理论-总述 1.2.jvm理论-class文件 1.2.1.jvm理论-常量池-string 1.2.2.jvm理论-常量池-8种基本类型 1.3.jvm理论-字节码指令 ...

  3. Javascript中页面加载完成后优先执行顺序

    Javascript中页面加载完成后优先执行顺序 document优先于windowwindow优先于element //document加载完成执行方法体 document.addEventList ...

  4. C++ 字面量

    https://docs.microsoft.com/en-us/cpp/cpp/string-and-character-literals-cpp?view=vs-2017 C++ supports ...

  5. 画图必备numpy函数

    给定一堆数字,需要统计这些数字中每个数字的个数. 如果这些数字是整数,那自然可以精确统计出来. 如果这些数字是浮点数,如果精确统计会发现几乎每个数字都只出现了一次.所以浮点数就要通过区间的方式进行统计 ...

  6. 【转载】linux系统时间自动同步：ntp

    NTP基本介绍 NTP(Network TimeProtocol,网络时间协议),使用来使本地机器与服务端机器时间保持同步的一种协议.如果我们只有一台机器那么只需要安装NTP客户端ntpdate这个包 ...

  7. Windows Server 2008 IIS安装FTP及端口配置

    添加角色IIS,选择上FTP服务 打开IIS,右击网站,添加FTP站点 允许访问的指定用户,必须是Windows系统真实存在的用户,为了安全起见,此用户只赋予user组即可,不能赋予远程桌面权限 如果 ...

  8. 如何将自己写的verilog模块封装成IP核

    如何将自己写的verilog模块封装成IP核 (2014-11-21 14:53:29) 转载▼ 标签: 财经 分类: 我的东东 =======================第一篇========= ...

  9. Kafka Docker集群搭建

    1. Zookeeper下载 http://apache.org/dist/zookeeper/ http://mirrors.hust.edu.cn/apache/zookeeper/zookeep ...

  10. CUDA加opencv复现导向滤波算法

    CUDA是GPU通用计算的一种,其中现在大热的深度学习底层GPU计算差不多都选择的CUDA,在这我们先简单了解下其中的一些概念,为了好理解,我们先用DX11里的Compute shader来和CUDA ...