<!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. OUTLOOK - Unable to Delete Meetings

    Error Information: Resolved: Check Meeting room permission.Get-MailboxFolderPermission MeetingRoom_1 ...

  2. 打开KVM Console的一些注意事项

    今天早上跟思科CIMC里的KVM console较劲了很久,终于成功的打开了KVM console. 总结了下面的一些注意事项.如果你也遇到了KVM console打不开,那么可以尝试一下. 我不想花 ...

  3. m3u8转码

    ffmpeg -i input.mp4 -c:v libx264 -c:a aac -strict -2 -f hls -hls_list_size 0 -hls_time 5 output.m3u8

  4. ABC卡

    如今在银行,P2P等各种贷款业务机构,普遍使用信用评分,对客户实行打分制,以期对客户有一个优质与否的评判.但是不是所有人都知道信用评分卡还分A,B,C卡三类!所以,如果你只知道ABC是Gary的ABC ...

  5. Swift Struct 结构体

    前言 Swift 语言有两种基本的数据类型,即类(class)和结构体(struct),class 这样的概念大家不会陌生,而 struct 也并不是什么新的概念,在 Objective-C 和 C ...

  6. IDEA使用笔记（十一）——好玩的类图结构

    今天使用 IntelliJ IDEA 发现一个好玩的操作,尤其对于研究源码了解类的层级关系有非常大的帮助! 1:先看效果 1-1:HashSet的类图结构——继承什么类.实现什么接口一目了然 1-2: ...

  7. 微信小程序--相关资料

    微信小程序Demo https://github.com/zce/weapp­-demojustjavac/awesome­wechat­weapp: 微信小程序开发资源汇总 https://gith ...

  8. [elk]kafka_elk

    kafka https://www.tutorialspoint.com/apache_kafka/apache_kafka_cluster_architecture.htm https://dzon ...

  9. Linux系统中文显示

    # Linux系统中文显示 ### 配置文件路径------------------------------ 路径`/etc/locate.conf` ### 查看系统当前字符集----------- ...

  10. MapReduce 计数器简介

    转自:http://my.oschina.net/leejun2005/blog/276891?utm_source=tuicool&utm_medium=referral 1.计数器 简介 ...