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. 一致性哈希算法原理、避免数据热点方法及Java实现

     一致性哈希算法在1997年由麻省理工学院提出的一种分布式哈希(DHT)实现算法,设计目标是为了解决因特网中的热点(Hot spot)问题,初衷和CARP十分类似.一致性哈希修正了CARP使用的简 单 ...

  2. Jasper-template

    ylbtech-Jasper: 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbtech. ...

  3. Ajax学习(1)

    Web 1.0 它指的就是具有完全不同的请求和响应模型的传统 Web.比如,到 hdu.edu.cn 网站上点击一个按钮.就会对服务器发送一个请求,然后响应再返回到浏览器.该请求不仅仅是新内容和项目列 ...

  4. selectedIndex 属性可设置或返回下拉列表中被选选项的索引号。

    转自:https://blog.csdn.net/xxj19950917/article/details/73002046

  5. python 进行web测试

    1:安装nosetests Python 单元测试框架之Nose http://blog.sina.com.cn/s/blog_65a8ab5d0101fihb.html Python nose te ...

  6. AngularJs(Part 4)--Modules depending on other Modules

    Angular does an excellent job of managing object dependencies. it can even take care of module depen ...

  7. 卸载openjdk安装java后,netbeans启动不了

    Cannot find java. Please use the --jdkhome switch. 默认的jdkhome不存在了,所以重新指定一下就可以了. 修改 /netbeans-8.0/etc ...

  8. 【机器学习】迭代决策树GBRT(渐进梯度回归树)

    一.决策树模型组合 单决策树C4.5由于功能太简单,并且非常容易出现过拟合的现象,于是引申出了许多变种决策树,就是将单决策树进行模型组合,形成多决策树,比较典型的就是迭代决策树GBRT和随机森林RF. ...

  9. C# 写 LeetCode easy #7 Reverse Integer

    7.Reverse Integer Given a 32-bit signed integer, reverse digits of an integer. Example 1: Input: 123 ...

  10. CentOS 7 部署 nginx-1.14.2

    参考:http://www.linuxe.cn/post-168.html 链接:https://pan.baidu.com/s/1NzHIY7mYgHJ6yMF_rdd0ZQ 提取码:n8o9 下载 ...