1. 消息提示框

    消息提示框(messagebox)组件是一个纯javascript组件,它提供模拟的windows对话框实现。

  2. 主要特性

    1. 提供了动画特效和美化效果。
    2. 提供了多于三个按钮的选择实现。
    3. 自己定义脚本动作,更加灵活
  3. 代码片段

    1. HTML写法(参考quickstart/web/examples/component/Messagebox.html)

      <p>
      	<b>自定义三选项对话框</b><br />
      	自定义三选项对话框.
      	<input id="mb1" type="button" class="e_button" value="显示对话框" />
      </p>
      
    2. Javascript写法(参考quickstart/web/examples/component/Messagebox.html)

      1. 标准的是/否对话框

        Wade.get('mb1').on('click',function(){
        	 MessageBox.confirm('确认信息', '你确定执行该操作吗?', showResult);
        });
        
      2. 标准提示信息对话框

        Wade.get('mb1').on('click', function(e){
        	MessageBox.prompt('姓名', '请输入你的姓名:', showResultText);
        });
        
      3. 多行文本提示信息对话框

        Wade.get('mb1').on('click', function(e){
        	MessageBox.show({
        		title: '地址',
        		msg: '请输入你的地址:',
        		width:300,
        		buttons: MessageBox.OKCANCEL,
        		multiline: true,
        		fn: showResultText,
        		animEl: 'mb3'
        	});
        });
        
      4. 标准是/否/取消对话框

        Wade.get('mb1').on('click', function(e){
        	MessageBox.show({
        		title:'保存更改么?',
        		msg: '你关闭了一个标签并且没有保存. 现在就保存吗?',
        		buttons: MessageBox.YESNOCANCEL,
        		fn: showResult,
        		animEl: 'mb4'
        	});
        });
        
      5. 自定义三选项对话框

        Wade.get('mb1').on('click', function(e){
        	MessageBox.show({
        		title:'保存更改么?',
        		msg: '你关闭了一个标签并且没有保存. 现在就保存吗?',
        		buttons: {ok:"是",yes:"否",cancel:"立即取消"},
        		fn: showResult,
        		animEl: 'mb5'
        	});
        });
        
      6. 进度条显示对话框

        Wade.get('mb1').on('click', function(){
        	MessageBox.show({
        		title: '请稍候...',
        		msg: '初始化中...',
        		width:240,
        		progress:true,
        		closable:false,
        		animEl: 'mb6'
        	});
        	// this hideous block creates the bogus progress
        	var f = function(v){
        		return function(){
        			if(v == 11){
        				MessageBox.hide();
        			}else{
        				MessageBox.updateProgress(v/10, '正在载入10项中的第' + v + '项...');
        			}
        		};
        	};
        	for(var i = 1; i < 12; i++){
        		setTimeout(f(i), i*1000);
        	}
        });
        
      7. 标准提示信息对话框

        Wade.get('mb1').on('click', function(){
        	MessageBox.alert('状态', '更改保存成功.', showResult);
        });
        /* 响应事件方法 */
        function showResult(btn){
        	Wade.example.msg('按钮点击', '你点击了 {0} 按钮', btn);
        };
        
        function showResultText(btn, text){
        	Wade.example.msg('按钮点击', '你点击了 {0} 按钮,并且输入了文本 "{1}".', btn, text);
        };