精华内容
下载资源
问答
  • 关于MUI对话框

    2019-07-14 22:57:04
    最近在使用MUI进行一个电商类项目,很多地方用到了其中的对话框dialog组件,做一个简单的总结 Dialog组件包括 alert 警告框 confirm 确认框 prompt 输入对话框 toast 自动消失提示框 我使用较多的是confirm和...

    最近在使用MUI进行一个电商类项目,很多地方用到了其中的对话框dialog组件,做一个简单的总结
    Dialog组件包括
    alert 警告框
    在这里插入图片描述
    confirm 确认框
    在这里插入图片描述
    prompt 输入对话框
    在这里插入图片描述
    toast 自动消失提示框
    在这里插入图片描述
    我使用较多的是confirm和toast

    toast

     mui.toast(message,{ option }) 
     
    // message:'String' - 消息框显示的文字内容
    
    //options: {JSON}  - 提示消息的参数
    //**options 参数需要mui v3.5+支持
    
    //duration	持续显示时间,默认值 short(2000ms)	支持 整数值 和 String ,
    //String可选: long(3500ms),short(2000ms)
    //type	强制使用mui消息框(div模式)	'div'
    

    confirm

    mui.confirm('这里是内容', '标题', ['确认', '取消'], function (e){
    	if (e.index == 0) {
                    console.log('点击确认')
                } else {
                    console.log('点击取消')
                }
    });
    

    内容可以解析html代码,可以自己再写结构

    展开全文
  • mui prompt对话框自定义样式

    千次阅读 2019-08-12 16:18:33
    说明一下,项目是公司上一个前端用mui框架做的,对于mui我是没有接触过得,在这基础上还要改别人的代码也是很悲剧。 自定义mui prompt弹框在网上找了不少资料,梳理了一下两种写法 官网写法,有局限性没有详细...

    最近项目中的新需求,在原有项目上,增加自定义弹框。说明一下,项目是公司上一个前端用mui框架做的,对于mui我是没有接触过得,在这基础上还要改别人的代码也是很悲剧。

     自定义mui prompt弹框在网上找了不少资料,梳理了一下两种写法

     官网写法,有局限性没有详细说明如何自定义样式
    //修改弹出框默认input类型为password     
    mui.prompt('text','deftext','title',['true','false'],null,'div') 
    document.querySelector('.mui-popup-input input').type='password' 
    
    自定义写法
    1. 需要增加的内容代码写出来,然后添加在对话框类元素里面
    var g = '<input type="text" placeholder="请输入重量(g)" id="weight"/><input type="number" id="price" placeholder="填入价格(元)"/></div>';
    var dom = $(".mui-popup-input").append(g);
    
    2. 如上同样方法,使用innerHtml,添加内容到dom元素中
    $(".mui-popup-input").innerHtml = g

     

    展开全文
  • 今天加mui的确认框,发现即便在里面放很少的代码,也没有多次触发这个事件,确认框依旧会弹出两次,然后就是疯狂的查,最后发现是触发点击事件的方式不对,上码 //这个就是我常用的点击事件触发,在里面加上mui....

    今天加mui的确认框,发现即便在里面放很少的代码,也会多次触发事件,确认框依旧会弹出两次,然后就是疯狂的查,最后发现是触发点击事件的方式不对,上码

    //这个就是我常用的点击事件触发,在里面加上mui.confirm
    $("body").on("tap", "#conserve", function() {
    console.log(JSON.stringify(e));
    });
    //这个是正确的
    $("body").on("click", "#conserve", function() {
    console.log(JSON.stringify(e));
    });
    

    看出不同了没,就是触发方式,应该用click。
    click和tap有什么不同呢
    click与tap都会出发点击事件,但是在手机web端,click会有200-300ms延迟,所以一般用tap(轻击)代替click作为点击事件。
    但是,注意了,tap有可能出现点透事件(mui弹框两次出现可能与此有关),点透事件的实质就是多层,而绑定了tap事件的那层,在事件触发之后这个元素就会display: none,而在z轴上有多个容器,点透,很形象吧。有兴趣的可以去研究一下
    解决方案: (1)使用fastclick。 (2)添加一个延迟。

    展开全文
  • mui对话框

    千次阅读 2017-05-08 14:41:39
    可选参数,代表是否使用h5绘制的对话框,也就是对话框样式是否可以修改,如果有这个选项,你就可以这一句的下面修改它的样式啦, document.querySelector('.mui-popup-input input').type='password' document....

        mui.alert("内容", "标题", "按钮内容",function(){},[,'div']); 可选参数,代表是否使用h5绘制的对话框,也就是对话框样式是否可以修改,如果有这个选项,你就可以这一句的下面修改它的样式啦,

    document.querySelector( '.mui-popup-input input' ).type= 'password'
    document.querySelector('.mui-popup-input input').style.height="36px";

    可以看这个例子http://blog.csdn.net/qq_33769914/article/details/71403873



        mui.confirm( message, title,  btnValue, callback,[,'div'] )和上面一样的


        mui.prompt( message, placeholder, title,  btnValue, callback,[,'div'] )


    注意:他们callback回调函数function里面的this可能并不是你点击的那个元素。所以要在点击之后获取到那个this然后再这里使用

    展开全文
  • MUI 对话框设置

    千次阅读 2018-08-28 15:27:36
    mui对话框设置 对话框有很多种,形式也多种多样,综合起来,其间也无太多差异,无非就是样式和调用的问题。 官方效果: 自定义效果: 具体代码设置,请参考文件:内部在线报名系统,课程详情页 ...
  • MUI对话框使用

    2018-09-28 10:26:00
    一、alert告警框 用法 .alert(message,title,btnvalue,callback[,type]); document.getElementById("noclick").addEventListener('tap', ... mui.alert("欢迎使用Hello MUI", "Hello MUI","确定关闭", fu...
  • mui对话框事件

    2019-09-28 17:41:23
    mui.confirm('生成成功,是否跳转到订单页面?','',['跳转','取消'],function(e){ if(e.index==0){ //点击跳转 }else if(e.index==1){ //点击取消 } },'div'); 在prompt中e.index获取点击的按钮,e....
  • mui对话框、表单

    2019-10-04 05:48:56
    1、mui.alert() 普通提醒参数 1、message Type: String 提示对话框上显示的内容 2、title Type: String 提示对话框上显示的标题 3、btnValue Type: String 提示对话框上按钮显示的内容 4、callback Type: ...
  • mui对话框如何点击按钮不关闭弹框

    千次阅读 2019-05-27 11:27:07
    mui对话框如何点击按钮不关闭弹框 目前的mui默认是点击对话框的按钮会关闭弹窗,如何设置使点击按钮判断后再关闭弹窗呢 查看mui.js 文件后发现 返回false不关闭当前popup // document.getElementById("promptBtn")...
  • 目前版本的 mui.js 点击对话框的按钮只能关闭对话框 做如下修改 点击按钮后return false 即可 转载于:https://www.cnblogs.com/ooo0/p/6282737.html
  • mui dialog(对话框

    千次阅读 2017-10-13 10:00:25
    2.3 dialog(对话框) 警告框 $.alert('警告内容\n可以使用\n换行', '警告的标题','按钮文字' ,function() {  //点击确认之后的回调 }) 注意.alert( message, title, btnValue, callback [, type] ) ...
  • MUI dialog(对话框

    2020-03-31 10:43:55
    dialog(对话框) 创建并显示对话框,弹出的对话框为非阻塞模式,用户点击对话框上的按钮后关闭( h5模式的对话框也可通过closepopup关闭 ),并通过callback函数返回用户点击按钮的索引值或输入框中的值。 Dialog ...
  • 七. MUI - dialog对话框、ipnut (表单)

    千次阅读 2017-04-10 16:52:22
    1、mui.alert() 普通提醒 参数 1、message Type: String 提示对话框上显示的内容 2、title Type: String 提示对话框上显示的标题 3、btnValue Type: String 提示对话框上按钮显示的内容 4、callback Type: ...
  • MUI常用组件之对话框

    2017-10-16 20:06:40
    ①message:类型string,提示对话框上显示的内容。 ②title:类型string,提示对话框上显示的标题。 ③btnValue:类型string,提示对话框上按钮显示的内容。 ④callback:类型function,提示对话框关闭后执行的...
  • Mui-弹出对话框

    2019-06-23 14:41:00
    --对话框--文本输入值 <! DOCTYPE html > < html > < head > < meta charset ="utf-8" > < meta name ="viewport" content ="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale...
  • 本文主要讲述dialog(对话框),包括:警告框、确认框、输入对话框、消息提示框四类。 组件名 作用 alert 警告框 confirm 确认框 prompt ...mui-bar mui-bar-nav"&gt; ...
  • 引言 在开发行业中,对话框可以说是无处不在的了。在开发界我们一般把对话框分成警告框、确认框、输入框和自动消失的提示框。 比如用户无意中点击了关闭按钮,这是我们的程序不能傻乎乎的就关闭了,我们...mui.ale...
  • 1、checkbox(复选框) ...默认checkbox在右侧显示,若希望在左侧显示,只需增加.mui-left类即可,如下: checkbox左侧显示示例 若要禁用checkbox,只需在checkbox上增加disabled属性即可; 代码块激活字符: m
  • Mui Redux警报 Material-UI + Redux对话框和小吃栏。 根据Material-UI文档,将显示和快速使用和组件。 尽管这是使用它们的“React方式”,但我个人认为,由于其易变性,因此不应将它们用作固定组件,而显示是由父...
  • mui

    2019-09-30 13:51:01
    MUI + SDK 使用笔记: MUI是什么:http://ask.dcloud.net.cn/article/91 /* MUI 使用说明: * * 1.每个用到mui的页面都调用下mui.init。 * 2.如果需要使用大H5+对象,就写到plusReady中,如plus对象。 ...
  • MUI框架详解-全面讲解MUI框架使用

    千次阅读 2018-11-10 15:22:54
    课程目录: 01MUI 介绍、新项目创建、 基础布局.mp4 02MUI - accordion(折叠面板)、button.mp4 03MUI - actionsheet(操作表)、badge.mp4 04MUI - 复选框、单选框...06MUI - dialog对话框、ipnut (表单).mp4 07MU...
  • Mui

    2018-09-07 13:40:00
    confrim: var btnArray = ['否', '是']; mui.confirm("开始吗?", "提示", btnArray, function (e) { console.log(e.index); }); closePopup mui.c...
  • MUI - dialog对话框、ipnut (表单).mp4 MUI - datepicker(时间选择器).mp4 MUI 介绍、新项目创建、 基础布局.mp4 MUI - 窗口管理及窗口之间的数据传递.mp4 MUI - 复选框、单选框、使用js获取选择值.mp4 MUI - ...
  • 自定义Dialog对话框(实现类似微信分享对话框),里面有完整的代码实现过程及示例
  • MUI框架

    千次阅读 2018-05-28 18:37:21
    MUI 有以下两大亮点:一、轻量追求性能体验,是我们开始启动MUI项目的首要目标,轻量必然是重要特征;MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K二、原生UI鉴于之前的很多前端框架(特别是响应式...
  • mui 提示

    2019-06-14 15:57:15
    提示框 alert(警告框) 用法: .alert( message, title, ...提示对话框上显示的内容 title Type: String 提示对话框上显示的标题 btnValue Type: String 提示对话框上按钮显示的内容 callback Type: St...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,281
精华内容 512
关键字:

mui选择对话框