1、mui.alert() 普通提醒
参数

1、message Type: String 提示对话框上显示的内容
2、title Type: String 提示对话框上显示的标题
3、btnValue Type: String 提示对话框上按钮显示的内容
4、callback Type: Function 提示对话框上关闭后的回调函数
5、type Value: 'div'是否使用h5绘制的对话框

演示代码

mui.alert('欢迎使用Hello MUI', 'Hello MUI' ,'我知道了', function() {
mui.toast('你刚关闭了警告框');
});

2、mui.confirm() 确定消息框
参数

1、message Type: String 提示对话框上显示的内容
2、title Type: String提示对话框上显示的标题
3、btnValue Type: Array 提示对话框上按钮显示的内容
4、callback Type: Function 提示对话框上关闭后的回调函数
5、type Value: 'div' 是否使用h5绘制的对话框

演示代码

mui.confirm('真的要删除吗?','Hi...',new Array('否','是'),function(e){
if(e.index == 1){mui.toast('是');}else{mui.toast('否');}
});

3、mui.prompt() 输入框
参数

message Type: String 提示对话框上显示的内容
placeholder Type: String 编辑框显示的提示文字
title Type: String 提示对话框上显示的标题
btnValue Type: Array 提示对话框上按钮显示的内容
callback Type: Function提示对话框上关闭后的回调函数
type Value: 'div' 是否使用h5绘制的对话框

演示代码

mui.prompt('请输入您的姓名?','Hi...','我是输入框',new Array('取消','确定'),function(e){
if(e.index == 1){
mui.toast(e.value);
}else{
mui.toast('您取消了输入');
}
});

4、mui.toast() 自动消失的消息框

mui.toast('hi...');

5、表单元素

基本说明:
所有包裹在.mui-input-row 类中的 input、textarea等元素都将被默认设置宽度属性为width: 100%; 。 将 label 元素和上述控件控件包裹在.mui-input-group中可以获得最好的排列。

<form class="mui-input-group">
<div class="mui-input-row">
<label>用户名</label>
<input type="text" class="mui-input-clear" placeholder="请输入用户名">
</div>
<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 mui-btn-primary" >确认</button>
<button type="button" class="mui-btn mui-btn-danger" >取消</button>
</div>
</form>

输入增强
mui目前提供的输入增强包括:快速删除、语音输入*5+ only和密码框显示隐藏密码。
1、快速删除:只需要在input控件上添加.mui-input-clear类,当input 控件中有内容时,右侧会有一个删除图标,点击会清空当前input的内容;

<form class="mui-input-group">
<div class="mui-input-row">
<label>快速删除</label>
<input type="text" class="mui-input-clear" placeholder="请输入内容">
</div>
</form>

2、搜索框:在.mui-input-row同级添加.mui-input-search 类,就可以使用search控件

<form class="mui-input-group">
<div class="mui-input-row mui-search">
<input type="search" class="mui-input-clear" placeholder="搜索点这里">
</div>
</form>

3、密码框:给input元素添加.mui-input-password类即可使用

<form class="mui-input-group">
<div class="mui-input-row">
<label>密码框</label>
<input type="password" class="mui-input-password" placeholder="请输入密码">
</div>
</form>

初始化
mui在mui.init()中会自动初始化基本控件,但是 动态添加的元素需要重新进行初始化

mui('.mui-input-row input').input();

mui对话框、表单的更多相关文章

  1. jquery ui 常用(二)(对话框 | 旋转器 | 工具提示框(表单) | 特效(百叶窗) )

    一.添加信息的对话框  http://www.w3cschool.cc/try/tryit.php?filename=jqueryui-example-dialog-modal-form. 模态表单 ...

  2. jQuery UI 对话框(Dialog) - 模态表单

    <!doctype html><html lang="en"><head> <meta charset="utf-8" ...

  3. bootstrap 表单+按钮+对话框

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. MFC中属性表单和向导对话框的使用

    每次在使用MFC创建一个框架时,需要一步步选择自己的程序的外观,基本功能等选项,最后MFC会生成一个基本的程序框架,这个就是向导对话框:而属性表单则是另外一种对话框,表单上有多个属性页,每点击某一页, ...

  5. vue + ElementUI 关闭对话框清空验证,清除form表单

    前面跟大家提到过 elementUI验证的问题,那么今天就来看看 点击对话框和关闭按钮 怎么清空验证,清空form表单,避免二次点击还会有 验证错误的提示 1.首先在你的对话框 取消按钮 加一个cli ...

  6. element-ui中关闭对话框清空验证,清除form表单数据

    对于elementUI中对话框,点击对话框和关闭按钮 怎么清空验证,清空form表单,避免二次点击还会有 验证错误的提示.今天终于自己查资料解决了,分享给大家 1.首先在你的对话框 取消按钮 加一个c ...

  7. mui弹出输入法遮住input表单元素

    转自https://www.cnblogs.com/devilyouwei/p/6293190.html mui弹出输入法遮住input表单元素   问题如下:当我用mui开发app时,在mui-sc ...

  8. Xamarin.Forms登录对话框及表单验证

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议,请网站留言: 如果您觉得Dotnet9对您有帮助,欢迎赞赏. Xamarin.Forms登录系统 内容目录 实现效果 业务场景 编码实现 ...

  9. html5中新增的form表单属性

    html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...

随机推荐

  1. C# 深化基本概念

    关于IDisposable的Dispose方法 .Net中GC会自动回收托管资源, 对于非托管资源应该使用Dispose方法. 在使用Dispose方法时,应注意避免在Dispose内部中继续释放托管 ...

  2. ffmpeg 合并文件

    ffmpeg文件合并   文件1.ts~ 100.ts 流媒体文件1.txt 格式 file .ts file .ts ... file .ts 命 令   (-vcodec copy -acodec ...

  3. shell 脚本学习之一 ------let,echo,变量

    转自:http://blog.chinaunix.net/uid-26827001-id-3154024.html 首先看到好多以这样开头的    #!/bin/bash   这个是告诉系统 解释此脚 ...

  4. hadoop2.6.0中自定义分割符

    最近在学习hadoop,用的hadoop2.6.0 然后在学习编写mapreduce程序时,发现默认对文件的输入是采用每行进行分割,下面来分析下改变这个分割方式的办法: 来看看默认是怎样实现的:

  5. Auto Layout Guide----(二)-----Auto Layout Without Constraints

    Auto Layout Without Constraints 没有约束的自动布局 Stack views provide an easy way to leverage the power of A ...

  6. FASTX-Toolkit组件用法

    FASTX-Toolkit组件用法 Command Line Arguments FASTQ-to-FASTA FASTQ/A Quality Statistics FASTQ Quality cha ...

  7. POJ 1064 Cable master (二分)

    题意:给定 n 条绳子,它们的长度分别为 ai,现在要从这些绳子中切出 m 条长度相同的绳子,求最长是多少. 析:其中就是一个二分的水题,但是有一个坑,那么就是最后输出不能四舍五入,只能向下取整. 代 ...

  8. ACM-ICPC2018南京网络赛 AC Challenge(一维状压dp)

    AC Challenge 30.04% 1000ms 128536K   Dlsj is competing in a contest with n (0 < n \le 20)n(0<n ...

  9. 将Angular6自己定义的模块发布成npm包

    创建自己的模块组件 1. ng new 一个工程 2. ng g m 创建模块 例如我这里的modules文件下创建header模块 3. ng g c modules/head 创建一个hear组件 ...

  10. Linux shell 单引号和双引号

    在编写shell脚本的时候经常会用到引号,有些时候却老是忘记单引号和双引号之间的区别, 所以就整理一下供以后脑子不好使了的时候前来复习一下.首先说下他们的共同点: 好像就只有 一个,就是它们都可以用来 ...