<!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. SpringBoot(十二)：springboot2.0.2写测试用例

    导入maven依赖: <dependency> <groupId>junit</groupId> <artifactId>junit</artif ...

  2. [Python设计模式] 第24章 加薪审批——职责链模式

    github地址:https://github.com/cheesezh/python_design_patterns 题目 用程序模拟以下情景 员工向经理发起加薪申请,经理无权决定,需要向总监汇报, ...

  3. Java代码质量监控工具Sonar安装

    1.  代码质量七宗罪 Sonar是一个代码质量管理系统.它的帮助文档开篇明义,提出了代码质量的七宗罪.总结的比較到位.最好还是一看: 1.        Bug和隐藏Bug(Bugs and Pot ...

  4. PHP中一些常用知识点

    1.json字符串转json对象 $data='[{"user_id":"93","price":"52.50"},{& ...

  5. 实战UITableview深度优化

    演示项目下载地址:https://github.com/YYProgrammer/YYTableViewDemo 项目里的低性能版是常规写法实现的tableview,高性能版是做了相关优化后的tabl ...

  6. users-and-groups-in-linux

    https://www.tecmint.com/compress-files-and-finding-files-in-linux/ https://www.tecmint.com/manage-us ...

  7. 理解、学习与使用 JAVA 中的 OPTIONAL<转>

    从 Java 8 引入的一个很有趣的特性是 Optional  类.Optional 类主要解决的问题是臭名昭著的空指针异常(NullPointerException) —— 每个 Java 程序员都 ...

  8. 解决MAMP启动mysql服务 但是Navicat连接不上

    问题重现 错误信息 2003 - Can't connect to MySQL server on '127.0.0.1' (61 "Connection refused") 解决 ...

  9. ViZDoom深度预测(Depth Prediction)

    代码:github.com/huangshiyu13/ViZDoomDepth 图片被分成3x6的区域,利用模型预测每个区域的平均深度,效果如下图:

  10. SAP FICO 凭证导入接口 数据xml格式

    接口传入参数说明 <soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xm ...