<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第四章:Ext 消息框</title>
<link rel="stylesheet" href="src/ext/resources/css/ext-all.css"> <!--ext-base 必须在ext-all之前引入-->
<script src="src/ext/ext-base.js"></script>
<script src="src/ext/ext-all.js"></script>
<!--<script src="src/ext/ext-lang-zh_CN.js"></script>-->
<style>
button{
margin-bottom: 20px;
}
</style>
</head>
<body> <button onclick="extJsAlert()">普通弹出框</button> <br> <button onclick="extJsPrompt()">带输入框的弹出框</button> <br>
<button onclick="extJsCustom()">自定义消息框</button> <br>
<button onclick="extJsProgress()">带有进度条的提示框</button> <br>
<button id="fly" onclick="extJsAnimal()">飞出来吧</button> <script>
// 普通弹出框
var extJsAlert = function () {
Ext.MessageBox.alert('提示框', '这是一个提示框', function () {
alert('提示框关闭了');
});
}; // 带输入框的弹出框
var extJsPrompt = function () {
Ext.MessageBox.prompt('输入框', '请输入您的姓名:', function (btn, txt) {
Ext.MessageBox.alert('结果', '您点击' + btn + '按钮, <br>输入的内容为' + txt);
}, this, 300);
}; // 自定义消息框
var extJsCustom = function () {
var config = {
title: '自定义对话框',
msg: '这是一个自定义对话框,想怎么搞就怎么搞',
width: 400,
multiline: true,
closable: true,
buttons: Ext.MessageBox.YESNOCANCEL,
icon: Ext.MessageBox.INFO,
fn: function (btn, txt) {
Ext.MessageBox.alert('结果', '您点击 yes 按钮, <br>输入的内容为' + txt);
},
}; Ext.Msg.show(config);
}; // 带有进度条的提示框
var extJsProgress = function () {
Ext.Msg.show({
title: '请等待',
msg: '正在加载项目...',
progerssText: '正在初始化...',
width: 300,
progress: true, // 此属性证明这是一个进度条
closable: false,
}); var f = function (v) {
return function () {
if (v === 12) {
Ext.Msg.hide();
Ext.Msg.alert('完成', '所有项目加载完成');
} else {
var i = v / 11;
Ext.MessageBox.updateProgress(i, Math.round(100 * i) + '% 已完成');
}
};
}; for (var i = 1; i < 13; i++) {
setTimeout(f(i), i * 500);
}
}; // 炫酷的弹出框
var extJsAnimal = function () {
var config = {
title: '飞出来的消息框',
msg: '这是一个自定义对话框,是飞出来的...',
width: 400,
multiline: true,
closable: false,
buttons : Ext.MessageBox.YESNOCANCEL,
icon: Ext.Msg.QUESTION,
animEl : 'fly'
}
Ext.Msg.show(config)
}
</script> </body>
</html>

  

Ext 消息框的更多相关文章

  1. 基于.Net实现前端对话框和消息框

    关于前端对话框.消息框的优秀插件多不胜数.造轮子是为了更好的使用轮子,并不是说自己造的轮子肯定好.所以,这个博客系统基本上都是自己实现的,包括日志记录.响应式布局等等一些本可以使用插件的.好了,废话不 ...

  2. [Phonegap+Sencha Touch] 移动开发19 某些安卓手机上弹出消息框 点击后不消失的解决的方法

    Ext.Msg.alert等弹出框在某些安卓手机上,点击确定后不消失. 原因是: 消息框点击确定后有一段css3 transform动画,动画完毕后才会隐藏(display:none). 有些奇葩手机 ...

  3. 一步步开发自己的博客 .NET版(10、前端对话框和消息框的实现)

    关于前端对话框.消息框的优秀插件多不胜数.造轮子是为了更好的使用轮子,并不是说自己造的轮子肯定好.所以,这个博客系统基本上都是自己实现的,包括日志记录.响应式布局.评论功能等等一些本可以使用插件的.好 ...

  4. WPF弹出带蒙板的消息框

    效果图 思路 拿到父级窗体的内容,放入一个容器里,再在容器里放入一个半透明层.将整个容器赋给父级窗体的内容. 关闭时反向操作. 代码 消息窗弹出时 /// <summary> /// 弹出 ...

  5. JavaScript (If...Else和Switch和循环遍历) 语句以及常用消息框

    If...Else 语句 JavaScript中if...else语句和Java中的语法和使用方法是一样的. 只是在JavaScript中要使用小写字母.使用大写的 IF 会出错! 至于if...el ...

  6. 【C#】分享一个可携带附加消息的增强消息框MessageBoxEx

    --------------201507160917更新--------------- 无意中发现标准消息框在Windows7是有声音的,只是在Windows server 2008(R2)无声,而我 ...

  7. JavaScript 消息框+特殊字符

    JavaScript 中创建三种消息框:警告框.确认框.提示框: 1.警告框: 警告框经常用于确保用户可以得到某些信息. 当警告框出现后,用户需要点击确定按钮才能继续进行操作 语法:alert(&qu ...

  8. WPF自定义控件与样式(13)-自定义窗体Window & 自适应内容大小消息框MessageBox

    一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 自定义 ...

  9. jQuery动态提示消息框效果

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/2.htm 原文:http://keleyi.com/a/bjac/hxv86dyi.htm <!DOC ...

随机推荐

  1. NVMe SSD是什么?

    https://blog.51cto.com/alanwu/1766945 一直对闪存存储关注的朋友对NVMe SSD一定非常熟悉,NVMe SSD是现如今性能最好的存储盘.这种高性能盘在互联网领域已 ...

  2. SysTick功能总结

    一.初始化SysTick 按1ms来设置systick,也可以除以1000000.按1us来设置 SysTick_Config(SystemCoreClock / 1000); //SysTick开启 ...

  3. hdu 2089 不要62 (数位dp)

    Description 杭州人称那些傻乎乎粘嗒嗒的人为62(音:laoer). 杭州交通管理局经常会扩充一些的士车牌照,新近出来一个好消息,以后上牌照,不再含有不吉利的数字了,这样一来,就可以消除个别 ...

  4. SAS 读取数据文件

    每次读取数据时需要告诉SAS3件事:1:数据存在哪里?2:数据的形式3:创建的数据集的类型(永久/临时) 1 读取SAS数据集 DATA temp; /*temp 为创建的数据集名称*/ INFILE ...

  5. vue之slot用法

    slot元素作为组件模板之中的内容分发插槽.这个元素自身将被替换. 有 name 特性的 slot 称为具名 slot. 有 slot 特性的内容将分发到名字相匹配的具名 slot. 一.单个组件 如 ...

  6. ()C#打印机

    System.Drawing.Printing下得用来完成打印功能 1.打印设置 2.页面设置 3.打印预览 4.打印

  7. PHP面试 AJAX基础内容

    AJAX基础内容 Ajax的基本工作原理 Ajax基础概念:通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新 Ajax工作原理:XMLHttpRequest是Ajax的基础     ...

  8. 仅当使用了列列表并且 IDENTITY_INSERT 为 ON 时,才能为表'XXX'中的标识列指定显式值。

    (来自:https://zhidao.baidu.com/question/494717175.html)第一条回复,原因和例子都有了,解释的很好. 插入数据时,自增长列是系统自动处理,不需要你来指定 ...

  9. 如何在原生Android项目里嵌入Cordova

    背景: 这段时间在维护一个Cordova混合项目,以前稍微接触过Cordova,也写过简单的纯纯的Cordova的Demo,但是没有尝试过混合原生的Cordova. 在接到项目后比较了一下项目架构和C ...

  10. 用processing画李萨如曲线

    李萨如曲线 有没有对示波器上变化曲线产生过兴趣,它叫做李萨如曲线: 数学上,利萨茹(Lissajous)曲线(又称利萨茹图形.李萨如图形或鲍迪奇(Bowditch)曲线)是两个沿着互相垂直方向的正弦振 ...