js拦截alert对话框另类使用,Extjs学习笔记之一

By admin in 4858美高梅 on 2019年8月3日

复制代码 代码如下:

1、$.messager.alert(title, msg, icon, fn)

4858美高梅 1

<input type=”button” onclick=”opened(‘ALERT’)” value=”提示”/>
<script>
var myAlert=alert;
window.alert=function(msg){
//your code
myAlert (msg+”-TEST”);
}
js拦截alert对话框另类使用,Extjs学习笔记之一。function opened(msg){
alert(msg);
}
</script>

在中间新建四个my目录,未来全部的样例文件都新建在那一个目录中。
1.Hello world!
先看二个Extjs版的Hello World网页的全方位代码:

您大概感兴趣的稿子:

  • 让alert不出现弹窗的二种艺术
  • 修改js confirm alert
    提醒框文字的简便实例
  • js提醒框代替系统alert,自动关闭alert对话框的落到实处情势
  1. <script type=”text/javascript”>  
  2.         $(function () {  
  3.             $.messager.alert(“操作提醒”, “操作成功!”);  
  4.         });  
  5.     </script>

复制代码 代码如下:

3

<html>
<head>
<title>Extjs MessageBox</title>
<link rel=”Stylesheet” type=”text/css”
href=”../resources/css/ext-all.css” />
<script type=”text/javascript”
src=”../adapter/ext/ext-base-debug.js”></script>
<script type=”text/javascript”
src=”../ext-all-debug.js”></script>
</head>
<body>
<script type=”text/javascript”>
Ext.BLANK_IMAGE_URL = ‘../resources/images/default/s.gif’;
Ext.onReady(function() {
Ext.MessageBox.alert(‘Hello’, ‘Hello world’);
});
</script>
</body>
</html>

2>、icon使用

运维下,结果如下:
4858美高梅 2 
瞩目上面引进js文件的各种不能颠倒,否则不可能博取正确的结果。2.Ext.MessageBox
Ext.MessageBox落成了广泛的提示框作用。Ext.Msg是和他完全同样的对象,只是名字不平等而已。Ext.Msg有周围的alert,confirm,promt,show等措施,都比很粗大略。上边通过例子来评释。Extjs的函数参数可以用一般的逗号列表分隔,也得以流传一个具有参数名:参数值的靶子。上面包车型地铁事例也是有反映。

icon各类设置:”error”、”info”、”question”、”warning”
效果:

复制代码 代码如下:

Js代码  4858美高梅 3

<html>
<head>
<title>Extjs MessageBox</title>
<link rel=”Stylesheet” type=”text/css”
href=”../resources/css/ext-all.css” />
<script type=”text/javascript”
src=”../adapter/ext/ext-base-debug.js”></script>
<script type=”text/javascript”
src=”../ext-all-debug.js”></script>
<script type=”text/javascript”>
function alertClick() {
Ext.Msg.alert(“alert”, “Hello”);
}

  1. <script type=”text/javascript”>  
  2.     $(function () {  
  3.         $.messager.alert(“操作提醒”, “操作成功!”,”info”);  
  4.     });  
  5. 4858美高梅,</script>  

function showOutput(s) {
var area = document.getElementById(“Output”);
area.innerHTML = s;
}

 4858美高梅 4

function confirmClick() {
Ext.Msg.confirm(‘Confirm’,’Choose one please’,showOutput);
}

 

function promptClick() {
Ext.Msg.prompt(‘Prompt’, ‘Try enter something’,
function(id, msg) {
showOutput(‘You pressed ‘ + id + ‘ key and entered ‘ + msg);
});
}

Js代码  4858美高梅 5

function showClick() {
var option = {
title:’Box Show’,
msg: ‘This is a most flexible messagebox with an info icon.’,
modal: true,
buttons: Ext.Msg.YESNOCANCEL,
icon: Ext.Msg.INFO,
fn:showOutput
};
Ext.Msg.show(option);
showOutput(“Hi, a box is promting,right?”);
}
</script>
</head>
<body>
<div id=’Output’></div>
<p><button id=’Button1′
onclick=’alertClick()’>AlertButton</button></p>
<p><button id=’Button2′
onclick=’confirmClick()’>ConfirmButton</button></p>
<p><button id=’Button3′
onclick=’promptClick()’>PromptButton</button></p>
<p><button id=’Button4′
onclick=’showClick()’>ShowButton</button></p>
</body>
</html>

  1. <script type=”text/javascript”>  
  2.     $(function () {  
  3.         $.messager.alert(“操作提醒”, “操作战败!”,”error”);  
  4.     });  
  5. </script>  

Msg的逐个艺术的参数是相仿的,首假如安装标题和提示语,以及对按键的装置。要留神Msg的消息框和javascript默许的提醒框区别样,它的弹出并不会阻碍别的的代码的实行。要在弹出框被关门之后实践某个代码必须向它传播四个函数,fn。最后二个例证很显著的显得了那一点,弹出提示框后,上边包车型客车代码仍旧被实施,弹出框关闭后实践showOutput函数:
4858美高梅 6

 

1.Hello world! 先看三个Extjs版的Hello World网页的整个代码: 复制代码
代码…

4858美高梅 7

 

Js代码  4858美高梅 8

  1. <script type=”text/javascript”>  
  2.     $(function () {  
  3.         $.messager.alert(“操作提醒”, “您分明要实行操作吗!”,”question”);  
  4.     });  
  5. </script>  

 

4858美高梅 9

 

Js代码  4858美高梅 10

  1. <script type=”text/javascript”>  
  2.     $(function () {  
  3.         $.messager.alert(“操作提醒”, “您显著要试行操作吗!”,”warning”);  
  4.     });  
  5. </script>  

 

4858美高梅 11

3>、function使用

Js代码  4858美高梅 12

  1. <script type=”text/javascript”>  
  2.     $(function () {  
  3.         $.messager.alert(“操作提醒”, “操作成功!”, “info”, function () {  
  4.             var i = 1;  
  5.             alert(i);  
  6.         });  
  7.     });  
  8. </script>  

 

2、$.messager.confirm(title, msg, fn)
代码:

Js代码  4858美高梅 13

  1. <script type=”text/javascript”>  
  2.     $(function () {  
  3.         $.messager.confirm(“操作提示”, “您明确要实行操作吗?”, function (data) {  
  4.             if (data) {  
  5.                 alert(“确定”);  
  6.             }  
  7.             else {  
  8.                 alert(“取消”);  
  9.             }  
  10.         });  
  11.     });  
  12. </script>  

 

效果图:

4858美高梅 14

 

 

、$.messager.prompt(title, msg, fn)

代码:

Js代码  4858美高梅 15

  1. <script type=”text/javascript”>  
  2.     $(function () {  
  3.         $.messager.confirm(“操作提示”, “您明显要实行操作吗?”, function (data) {  
  4.             if (data) {  
  5.                 alert(“确定”);  
  6.             }  
  7.             else {  
  8.                 alert(“取消”);  
  9.             }  
  10.         });  
  11.     });  
  12. </script>  

 

效果图:

4858美高梅 16

4、$.messager.show(options)
代码:

Html代码  4858美高梅 17

  1. <html xmlns=”;  
  2. <head runat=”server”>  
  3.     <title>音信提醒框</title>  
  4.     <link href=”/jquery-easyui-1.2.4/themes/default/easyui.css” rel=”stylesheet” type=”text/css” />  
  5.     <link href=”/jquery-easyui-1.2.4/themes/icon.css” rel=”stylesheet” type=”text/css” />  
  6.     <script src=”/jquery-easyui-1.2.4/jquery-1.6.4.min.js” type=”text/javascript”></script>  
  7.     <script src=”/jquery-easyui-1.2.4/jquery.easyui.min.js” type=”text/javascript”></script>  
  8.     <script src=”/jquery-easyui-1.2.4/locale/easyui-lang-zh_CN.js” type=”text/javascript”></script>  
  9.     <script type=”text/javascript”>  
  10.         $(function () {  
  11.             $.messager.show({  
  12.                 title: “操作提示”,  
  13.                 msg: “请选用你要删减的记录!”,  
  14.                 showType: ‘slide’,  
  15.                 timeout: 5000  
  16.             });  
  17.         });  
  18.     </script>  
  19. </head>  
  20. <body>  
  21. </body>  
  22. </html>  

 

Js代码  4858美高梅 18

  1. <script type=”text/javascript”>  
  2.     $(function () {  
  3.         var options = {  
  4.             title: “操作提醒”,  
  5.             msg: “请选用你要删减的记录!”,  
  6.             showType: ‘slide’,  
  7.             timeout: 5000  
  8.         };  
  9.         $.messager.show(options);  
  10.     });  
  11. </script>  

 

效果图:

4858美高梅 19
showType3种设置值:”show”、”slide”、”fade”

5、修改Button显示文字

代码:

Js代码  4858美高梅 20

  1. <script type=”text/javascript”>  
  2.     $(function () {  
  3.         $.messager.defaults = { ok: “是”, cancel: “否” };  
  4.    
  5.         $.messager.confirm(“操作提醒”, “您明确要施行操作吗?”, function (data) {  
  6.             if (data) {  
  7.                 alert(“是”);  
  8.             }  
  9.             else {  
  10.                 alert(“否”);  
  11.             }  
  12.         });  
  13.     });  
  14. </script>  

 

效果图:

4858美高梅 21

6、方法

方法名

参数

描述

$.messager.show

options

在屏幕的右下角显示一个消息窗口。这些选项的参数可以是一下的一个配置对象:
showType:定义如何将显示消息窗口。可用的值是:null,slide,fade,show。默认值是slide。
showSpeed:定义消息窗口完成的时间(以毫秒为单位), 默认值600。
width:定义消息窗口的宽度。 默认值250。
height:定义消息窗口的高度。 默认值100。
msg:定义显示的消息文本。
title:定义显示在标题面板显示的标题文本。
timeout:如果定义为0,消息窗口将不会关闭,除非用户关闭它。如果定义为非0值,当超时后消息窗口将自动关闭。

$.messager.alert

title, msg, icon, fn

显示一个警告窗口。参数如下:
title:显示在标题面板的标题文本。
msg:提示框显示的消息文本。
icon:提示框显示的图标。可用的值是:error,question,info,warning.
fn:当窗口关闭时触发的回调函数。

$.messager.confirm

title, msg, fn

显示一个含有确定和取消按钮的确认消息窗口。参数如下:
title:显示在标题面板的标题文本。
msg:确认消息窗口显示的消息文本。
fn(b):当用户点击按钮后触发的回调函数,如果点击OK则给回调函数传true,如果点击cancel则传false。

$.messager.prompt

title, msg, fn

显示一个确定和取消按钮的信息提示窗口,提示用户输入一些文本。参数如下:
title:显示在标题面板的标题文本。
msg:提示窗口显示的消息文本。
fn(val):用户点击按钮后的回调函,参数是用户输入的内容。

7、扩展

能够透过$.messager.defaults方法自定义alert框的ok开关和cancel开关上出示的文字。

名字

类型

描述

默认值

 

ok

字符串

Ok

按钮上的文本

Ok

cancel

字符串

Cancel

按钮上的文本

Cancel

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有