ext--消息框

最新推荐文章于 2024-06-25 09:30:22 发布

luckystar2008

最新推荐文章于 2024-06-25 09:30:22 发布

阅读量557

点赞数

文章标签： function button stylesheet input string object

本文链接：https://blog.csdn.net/qincidong/article/details/7588962

版权

Front End 专栏收录该内容

119 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>messbox.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <link rel="stylesheet" type="text/css" href="/web/ext/resources/css/ext-all.css" />
    <!-- GC -->
 	<!-- LIBS -->
 	<script type="text/javascript" src="/web/ext/adapter/ext/ext-base.js"></script>
 	<script type="text/javascript" src="/web/ext/adapter/ext/ext-all.js"></script>
 	<!-- ENDLIBS -->

    <script type="text/javascript" src="/web/ext/ext-all-debug.js"></script>
    <script type="text/javascript">
    	alert1 = function(){
    		Ext.MessageBox.alert("你好","现在时间是："+new Date());
    	}
    	alert2 = function(){
    		Ext.MessageBox.alert("你好","现在时间是："+new Date(),function(){
    			Ext.MessageBox.alert("","带回调函数的，哈哈！");
    		});
    	}
    	prompt1 = function(){
    		Ext.MessageBox.prompt("输入内容","",function(btn,txt){
    			Ext.MessageBox.alert("","你输入的内容是："+txt);
    		});
    	}
    	
    	prompt2 = function(){
    		Ext.MessageBox.prompt("输入内容","",function(btn,txt){
    			Ext.MessageBox.alert("","你点击了"+btn+"<br>你输入的内容是："+txt);
    		},this,true);
    	}
    	
    	confirm1 = function(){
    		Ext.MessageBox.confirm("确认","请选择！",function(btn){
    			Ext.MessageBox.alert("","你选择了"+btn);
    		});
    	}
    	
    	customMsg = function(){
    		var config = {
    			title:"自定义对话框",
    			msg:"这个是自定义的对话框",
    			width:300,
    			multiline:true,
    			closable:false,
    			buttons:Ext.MessageBox.YESNOCANCEL,
    			icon:Ext.MessageBox.QUESTION,
    			fn:function(btn,txt){
    				Ext.MessageBox.alert("","你点击了"+btn+"<br>输入了："+txt);
    			}
    		};
    		Ext.MessageBox.show(config);
    	}
    	// 自定义进度条。
    	progressMsg = function(){
    		var config = {
    			title:"请稍候",
    			msg:"程序读取中...",
    			progressText:"正在初始化...",
    			width:300,
    			progress:true,
    			closable:false
    		};
    		
    		Ext.MessageBox.show(config);
    		var total = 0;
    		var f = function(v) {
    			return function(){
	    			if (v >= 100) {
	    				Ext.MessageBox.hide();
	    				Ext.MessageBox.alert("完成","程序加载完毕！");
	    				return;
	    			}
	    			else {
	    				Ext.MessageBox.updateProgress(v,(v/100)*100+"%已完成");
	    			}
    			};
    		};
    		
    		for (var i=0;i<=10;i++){
    			total = 10*i;
    			setTimeout(f(total),i*500);    			
    		}
    	}
    	
    	fly = function(){
    		var config = {
    			title:"飞出的消息框",
    			msg:"飞出去，飞回来...",
    			width:300,
    			closable:false,
    			multiline:true,
    			buttons:Ext.MessageBox.YESNO,
    			icon:Ext.MessageBox.OK,
    			animEl:"fly"
    		};
    		Ext.MessageBox.show(config);
    	};
    </script>
  </head>
  
  <body>
    <b>消息框组件</b><br>
    <p>
    	提示框用法<br>
    	<code>Ext.MessageBox.alert(String title,String msg,Function fn,Object scope);</code><br>
    	参数说明：<br>
    	title:标题。<br>
    	msg:提示内容。<br>
    	fn:关闭后调用的方法。<br>
    	scope:作用域。用于指定this指向哪里，一般不用管它。
    </p>
    
    <input type="button" value="button1" οnclick="alert1();">
    <input type="button" value="button2" οnclick="alert2();">
    <br>
    <b>输入框用法</b><br>
    <code>Ext.MessageBox.prompt(String title,String msg,Function fn,Object scope,Boolean/Number multiline)</code>
    参数说明：<br>
    前4个参数和alert一样，最后一个参数表示true(多行)或数字（默认高度）。<br>
     <input type="button" value="button3" οnclick="prompt1();">
     <br>
     多行<br>
     <input type="button" value="button4" οnclick="prompt2();">
     <br>
     <div>
     	<span>q确认框</span><br>
     	语法：<br>
     	<code>Ext.MessageBox.confirm(String title,String msg,Function fn,Object scope)</code>
     	<br>
     	参数桶alert。<br>
     	<input type="button" value="confirm" οnclick="confirm1();">
     </div>
     
     <div>
     	<span>自定义消息框</span><br>
     	使用<code>show()</code>方法自定义。<br>
     	<code>show()</code>方法的语法：
     	<br>
     	<code>Ext.MessageBox.show(Object config)</code><br>
     	config常见属性：<br>
     	title:标题栏<br>
     	msg:消息内容<br>
     	width:消息框宽度<br>
     	multiline:是否显示多行文本<br>
     	closable:是否显示关闭按钮<br>
     	buttons:按钮<br>
     	icon:图标<br>
     	fn:回调函数<br>
     	<div>
     		<span>buttons取值：</span><br>
     		YES:确定<br>
     		CANCEL:	取消<br>
     		OKCANCEL:确定、取消<br>
     		YESNO:是、否<br>
     		YESNOCANCEL:是、否、取消<br>
     		<span>icons取值：</span><br>
     		INFO:信息图标<br>
     		WARNING:警告图标<br>
     		QUESTION:询问图标<br>
     		ERROR:错误图标<br>
     	</div>
     	<input type="button" value="custom" οnclick="customMsg();">
     	
     </div>
     
     <div>
     	<span>进度条对话框</span><br>
     	进度条对话框是一个自定义的对话框，配置config时加上progress=true即可。<br>
     	同时还要设置其他信息，如进度提示等。<br>
     	<input type="button" value="进度条" οnclick="progressMsg();">
     </div>
     
     <div>
     	<span>消息框飞出去</span>
     	<br>
     	config中加上animEl属性即可。<br>
     	<input type="button" value="飞起来" οnclick="fly();" id="fly">
     </div>
  </body>
</html>

luckystar2008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ext--消息框

messbox.html --> alert1 = function(){ Ext.MessageBox.alert("你好","现在时间是："+new Date()); } alert2 = function(){ Ext.M
复制链接

扫一扫