Mui-弹出对话框

最新推荐文章于 2022-03-28 18:01:34 发布
最新推荐文章于 2022-03-28 18:01:34 发布
阅读量261 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/fdxjava/p/11072803.html
版权 
<!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">测试属性</h1>
        </header>
        <div class="mui-content">
            <div style="padding: 20px;">
                <button type="button" onclick="showTest();">点击进行测试</button>
            </div>
        </div>
        <script type="text/javascript">
            function showTest(){
                mui.alert('hi...','小提醒','ok',callBack1);
            }
            function callBack1(){
                mui.toast('ok');
            }
        </script>
    </body>

</html>

--弹出自定义按钮框

<!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">测试属性</h1>
        </header>
        <div class="mui-content">
            <div style="padding: 20px;">
                <button type="button" onclick="showTest();">点击进行测试</button>
            </div>
        </div>
        <script type="text/javascript">
            function showTest(){
                mui.confirm('您真的要这样做吗？','小提醒',new Array('算了','确认'),function(e){
                    if(e.index == 1){
                        mui.toast('ok');
                    }else{
                        mui.toast('取消');
                    }
                });
            }
            
        </script>
    </body>

</html>

--对话框--文本输入值

<!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">测试属性</h1>
        </header>
        <div class="mui-content">
            <div style="padding: 20px;">
                <button type="button" onclick="showTest();">点击进行测试</button>
            </div>
        </div>
        <script type="text/javascript">
            function showTest(){
                mui.prompt('请输入你的姓名','文本默认值','标题',new Array('取消','确认'),function(e){
                    if(e.index == 1){
                        mui.toast(e.value);
                    }else{
                        mui.toast('您取消了输入');
                    }
                });
            }
            
        </script>
    </body>

</html>

 

转载于:https://www.cnblogs.com/fdxjava/p/11072803.html

weixin_30613343
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
mui dialog（对话框）
qq_39430589的博客
10-13 1740
2.3 dialog（对话框） 警告框 $.alert('警告内容\n可以使用\n换行', '警告的标题','按钮文字' ,function() {     //点击确认之后的回调 }) 注意.alert( message, title, btnValue, callback [, type] ) message必须是字符串 确认框 var btnArray = ['否',
mui弹出提示_dialog（对话框） - MUI 中文文档
weixin_39939668的博客
12-22 1082
创建并显示对话框，弹出的对话框为非阻塞模式，用户点击对话框上的按钮后关闭( h5模式的对话框也可通过closepopup关闭 )，并通过callback函数返回用户点击按钮的索引值或输入框中的值。Dialog 组件包含:组件名作用快速体验警告框警告框输入对话框输入对话框消息提示框自动消失提示框(function() {var ele = [‘alertBtn’, ‘confirmBtn’, ‘pr...
MUI 弹出消息框
weixin_44264878的博客
07-14 2159
dialog（对话框） 创建并显示对话框，弹出的对话框为非阻塞模式，用户点击对话框上的按钮后关闭( h5模式的对话框也可通过 closepopup关闭 )，并通过callback函数返回用户点击按钮的索引值或输入框中的值。 Dialog 组件包含: alert 警告框 confirm 确认框 prompt 输入对话框 toast 消息提示框 mui会根据ua判断,弹出原生对话框还是h5绘制...
mui 弹框
tiankongxiao的博客
04-22 1347
首先，引入 mui.css或者mui.min.css 引入mui.min.js或者mui.js 第二步：<a href="#弹窗ID"> </a> //控制弹窗的显示隐藏 <div id="弹窗ID" class="box mui-popover mui-popover-action mui-popove...
MUI 弹出框
Bambi12的博客
08-30 3748
mui.alert();
mui弹出框——输入确认消息框
虑而后能得
09-16 5822
弹出框的写法 最近做项目的时候需要有弹出框，并且输入相应信息，所以想写一下自己见到的两个弹出框 第一种： 这种弹出框的代码如下： &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript"&gt; function disp_prompt() { var name=prompt("请输入缺考原因","") ..
html5实现--提示框、--弹出框、--消息框、--对话框源码.zip
06-29
本项目中提到的"html5实现--提示框、--弹出框、--消息框、--对话框源码"是基于MUI框架进行开发的，MUI是一个流行的国产前端开发框架，尤其适合移动端应用的构建。 MUI框架是基于HTML5、CSS3和JavaScript构建的，它...
Web App 开发----对话框
m0_58760840的博客
03-28 996
Web App 开发----对话框
MUI dialog（对话框）
秋城落叶的博客
03-31 1142
dialog（对话框） 创建并显示对话框，弹出的对话框为非阻塞模式，用户点击对话框上的按钮后关闭( h5模式的对话框也可通过closepopup关闭 )，并通过callback函数返回用户点击按钮的索引值或输入框中的值。 Dialog 组件包含: 组件名 作用 快速体验 alert 警告框 警告框 confirm 确认框 确认框 prompt ...
mui 提示弹出_整理 | 用MUI开发的应用中使用H5+ API的信息提示框
weixin_39556811的博客
12-30 431
大多数时候，我们的APP应用程序中需要有好的提示信息，比如用户登录成功，使用消失3秒钟的登录成功；或者当用户登录失败时，提示失败原因；或者网络连接失败时，提示网络错误等等。在MUI中，我们可以使用MUI框架提供的消息框，同时我们也可以使用H5+ API提供的nativeUI(管理系统原生界面，可用于弹出系统原生提示对话框窗口、时间日期选择对话框、等待对话框等)。nativeUI相对于MUI框架提供...
弹出层选项卡
04-10
弹出层选项卡让您轻松实现网页弹出特效
【MUI】弹出框整理汇总
博客
09-15 751
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../../..
mui消息框
Mr丶GUO
06-19 3608
警告框//message:提示对话框上显示的内容(String) //title:提示对话框上显示的标题(String) //btnValue:提示对话框上按钮显示的内容(String) //callback:提示对话框上关闭后的回调函数(Function) //type:是否使用h5绘制的对话框(div,span…); mui.alert();确认框//message:提示对话框上显示的
mui弹出框弹出HTML页面,MUI弹框组件：高阶用法 - 点击即可toggle
weixin_39639174的博客
06-04 1254
MUI弹框组件：高阶用法 - 点击即可toggle一行代码解决问题。效果图截图如下：js代码 (：方法二则使用 · 官方代码 ：//马上开通function handleSelectRightNow(){mui('#pay').popover('toggle');}使用 · 自定义代码 ：上述中间部分的代码，(比如关闭弹出层)效果等价于：$("#pay").removeClass("mui-act...
MUI组件：弹出层组件 - 案例篇
草巾冒小子的博客
05-27 1万+
全部代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-scale=1...
使用 MUI 自制 弹出层
GetcharZp的博客
11-11 708
使用 MUI 自制 弹出层 <div class="zp-mask" style="display: none; width: 100%;height: 100%;background-color: rgba(0,0,0,0.45); position: fixed;top: 0px;left: 0px;bottom: 0px;right: 0px;"> ...
移动端 精简mui.css,实现mui的弹出层（不使用mui.js，只包含弹出层）
东明之羞的博客
03-12 3233
使用mui的样式，实现mui的弹出层（不使用mui.js），精简代码，实现弹出效果，不受其他plus等影响
MUI弹出确认框
qq_43005276的博客
01-29 1290
function Confirm(id) { var btnArray = ['取消', '确认']; mui.confirm('内容', '标题', btnArray, function (e) { if (e.index == 1) { alert("确认"); } else { mui.toast("取消"); ..
mui中的一些弹窗
热门推荐
肖肖肖丽珠的博客
05-26 1万+
1、mui.alert(); 直接使用：    mui.alert("弹出的消息框提示内容！")感觉有点类似alert功能 带有回调函数的使用： var info = document.getElementById("info");                  //专门用来存放弹出消息的一个div  mui.alert('欢迎使用HelloMUI', 'Hello MUI'
mui-tree-select
最新发布
12-21
根据提供的引用内容，mui-tree-select是一个基于mui框架的树形选择组件。它可以让用户通过点击树形结构中的节点来选择相应的选项。当用户切换选中项时，会触发selected事件，并且可以通过事件参数（e.detail.el）...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值