easyui源码翻译1.32--Messager(消息窗口)
前言
使用$.messager.defaults重写默认值对象。下载该插件翻译源码
消息窗口提供了不同的消息框风格,包含alert(警告框), confirm(确认框), prompt(提示框), progress(进度框)等。所有的消息框都是异步的。用户可以在交互消息之后使用回调函数去处理结果或做一些自己需要处理的事情。
源码
/**
* jQuery EasyUI 1.3.2
*
*翻译 :qq 1364386878 消息窗口
*/
(function ($) { function show(el, type, speed, timeout) {
var win = $(el).window("window");
if (!win) {
return;
}
switch (type) {
case null:
win.show();
break;
case "slide":
win.slideDown(speed);
break;
case "fade":
win.fadeIn(speed);
break;
case "show":
win.show(speed);
break;
}
var timer = null;
if (timeout > 0) {
timer = setTimeout(function () {
hide(el, type, speed);
}, timeout);
}
win.hover(function () {
if (timer) {
clearTimeout(timer);
}
}, function () {
if (timeout > 0) {
timer = setTimeout(function () {
hide(el, type, speed);
}, timeout);
}
});
}; function hide(el, type, speed) {
if (el.locked == true) {
return;
}
el.locked = true;
var win = $(el).window("window");
if (!win) {
return;
}
switch (type) {
case null:
win.hide();
break;
case "slide":
win.slideUp(speed);
break;
case "fade":
win.fadeOut(speed);
break;
case "show":
win.hide(speed);
break;
}
setTimeout(function () {
$(el).window("destroy");
}, speed);
};
//在屏幕右下角显示一条消息窗口。该选项参数是一个可配置的对象:
//showType:定义将如何显示该消息。可用值有:null,slide,fade,show。默认:slide。
//showSpeed:定义窗口显示的过度时间。默认:600毫秒。
//width:定义消息窗口的宽度。默认:250px。
//height:定义消息窗口的高度。默认:100px。
//title:在头部面板显示的标题文本。
//msg:显示的消息文本。
//style:定义消息窗体的自定义样式。
//timeout:如果定义为0,消息窗体将不会自动关闭,除非用户关闭他。如果定义成非0的树,消息窗体将在超时后自动关闭。默认:4秒 function _showMassager(_c) {
var options = $.extend({}, $.fn.window.defaults, {
collapsible: false,
minimizable: false,
maximizable: false,
shadow: false,
draggable: false,
resizable: false,
closed: true,
style: {
left: "",
top: "",
right: 0,
zIndex: $.fn.window.defaults.zIndex++,
bottom: -document.body.scrollTop - document.documentElement.scrollTop
}, onBeforeOpen: function () {
show(this, options.showType, options.showSpeed, options.timeout);
return false;
}, onBeforeClose: function () {
hide(this, options.showType, options.showSpeed);
return false;
}
},
{
title: "",
width: 250,
height: 100,
showType: "slide",
showSpeed: 600,
msg: "",
timeout: 4000
}, _c);
options.style.zIndex = $.fn.window.defaults.zIndex++;
var body = $("<div class=\"messager-body\"></div>").html(options.msg).appendTo("body");
body.window(options);
body.window("window").css(options.style);
body.window("open");
return body;
};
//创建对话框
function createDialog(title, content, buttons) {
var win = $("<div class=\"messager-body\"></div>").appendTo("body");
win.append(content);
if (buttons) {
var tb = $("<div class=\"messager-button\"></div>").appendTo(win);
for (var button in buttons) {
$("<a></a>").attr("href", "javascript:void(0)").text(button).css("margin-left", 10).bind("click", eval(buttons[button])).appendTo(tb).linkbutton();
}
}
win.window({
title: title,
noheader: (title ? false : true),
width: 300,
height: "auto",
modal: true,
collapsible: false,
minimizable: false,
maximizable: false,
resizable: false,
onClose: function () {
setTimeout(function () {
win.window("destroy");
}, 100);
}
});
win.window("window").addClass("messager-window");
win.children("div.messager-button").children("a:first").focus();
return win;
}; //方法配置
$.messager = {
//在屏幕右下角显示一条消息窗口。该选项参数是一个可配置的对象:
//showType:定义将如何显示该消息。可用值有:null,slide,fade,show。默认:slide。
//showSpeed:定义窗口显示的过度时间。默认:600毫秒。
//width:定义消息窗口的宽度。默认:250px。
//height:定义消息窗口的高度。默认:100px。
//title:在头部面板显示的标题文本。
//msg:显示的消息文本。
//style:定义消息窗体的自定义样式。
//timeout:如果定义为0,消息窗体将不会自动关闭,除非用户关闭他。如果定义成非0的树,消息窗体将在超时后自动关闭。默认:4秒
show: function (options) {
return _showMassager(options);
},
//显示警告窗口。参数:
//title:在头部面板显示的标题文本。
//msg:显示的消息文本。
//icon:显示的图标图像。可用值有:error,question,info,warning。
//fn: 在窗口关闭的时候触发该回调函数
alert: function (title, msg, icon, fn) {
var content = "<div>" + msg + "</div>";
switch (icon) {
case "error":
content = "<div class=\"messager-icon messager-error\"></div>" + content;
break;
case "info":
content = "<div class=\"messager-icon messager-info\"></div>" + content;
break;
case "question":
content = "<div class=\"messager-icon messager-question\"></div>" + content;
break;
case "warning":
content = "<div class=\"messager-icon messager-warning\"></div>" + content;
break;
}
content += "<div style=\"clear:both;\"/>";
var buttons = {};
buttons[$.messager.defaults.ok] = function () {
win.window("close");
if (fn) {
fn();
return false;
}
};
var win = createDialog(title, content, buttons);
return win;
},
//显示一个包含“确定”和“取消”按钮的确认消息窗口。参数:
//title:在头部面板显示的标题文本。
//msg:显示的消息文本。
//fn(b): 当用户点击“确定”按钮的时侯将传递一个true值给回调函数,否则传递一个false值。
confirm: function (title, msg, fn) {
var content = "<div class=\"messager-icon messager-question\"></div>" + "<div>" + msg + "</div>" + "<div style=\"clear:both;\"/>";
var buttons = {};
buttons[$.messager.defaults.ok] = function () {
win.window("close");
if (fn) {
fn(true);
return false;
}
};
buttons[$.messager.defaults.cancel] = function () {
win.window("close");
if (fn) {
fn(false);
return false;
}
};
var win = createDialog(title, content, buttons);
return win;
},
//显示一个用户可以输入文本的并且带“确定”和“取消”按钮的消息窗体。参数:
//title:在头部面板显示的标题文本。
//msg:显示的消息文本。
//fn(val): 在用户输入一个值参数的时候执行的回调函数
prompt: function (title, msg, fn) {
var content = "<div class=\"messager-icon messager-question\"></div>" + "<div>" + msg + "</div>" + "<br/>" + "<div style=\"clear:both;\"/>" + "<div><input class=\"messager-input\" type=\"text\"/></div>";
var buttons = {};
buttons[$.messager.defaults.ok] = function () {
win.window("close");
if (fn) {
fn($(".messager-input", win).val());
return false;
}
};
buttons[$.messager.defaults.cancel] = function () {
win.window("close");
if (fn) {
fn();
return false;
}
};
var win = createDialog(title, content, buttons);
win.children("input.messager-input").focus();
return win;
},
//显示一个进度消息窗体。
//属性定义为:
//title:在头部面板显示的标题文本。默认:空。
//msg:显示的消息文本。默认:空。
//text:在进度条上显示的文本。默认:undefined。
//interval:每次进度更新的间隔时间。默认:300毫秒。 //方法定义为:
//bar:获取进度条对象。
//close:关闭进度窗口
progress: function (options) {
var methods = {
bar: function () {
return $("body>div.messager-window").find("div.messager-p-bar");
},
close: function () {
var win = $("body>div.messager-window>div.messager-body:has(div.messager-progress)");
if (win.length) {
win.window("close");
}
}
};
if (typeof options == "string") {
var method = methods[options];
return method();
}
var opts = $.extend({ title: "", msg: "", text: undefined, interval: 300 }, options || {});
var pbar = "<div class=\"messager-progress\"><div class=\"messager-p-msg\"></div><div class=\"messager-p-bar\"></div></div>";
var win = createDialog(opts.title, pbar, null);
win.find("div.messager-p-msg").html(opts.msg);
var bar = win.find("div.messager-p-bar");
bar.progressbar({ text: opts.text });
win.window({
closable: false, onClose: function () {
if (this.timer) {
clearInterval(this.timer);
}
$(this).window("destroy");
}
});
if (opts.interval) {
win[0].timer = setInterval(function () {
var v = bar.progressbar("getValue");
v += 10;
if (v > 100) {
v = 0;
}
bar.progressbar("setValue", v);
}, opts.interval);
}
return win;
}
};
//默认属性
$.messager.defaults = {
ok: "Ok",//确定按钮文本
cancel: "Cancel"//取消按钮文本
};
})(jQuery);
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Messager - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
<script src="../../plugins/jquery.parser.js"></script>
<script src="../../plugins/jquery.linkbutton.js"></script>
<script src="../../plugins/jquery.draggable.js"></script>
<script src="../../plugins/jquery.resizable.js"></script>
<script src="../../plugins/jquery.panel.js"></script>
<script src="../../plugins/jquery.window.js"></script>
<script src="../../plugins/jquery.progressbar.js"></script>
<script src="../../plugins/jquery.messager.js"></script>
</head>
<body>
<h2>Basic Messager</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click on each button to see a distinct message box.</div>
</div>
<div style="margin:10px 0;">
<a href="#" class="easyui-linkbutton" onclick="show()">Show</a>
<a href="#" class="easyui-linkbutton" onclick="slide()">Slide</a>
<a href="#" class="easyui-linkbutton" onclick="fade()">Fade</a>
<a href="#" class="easyui-linkbutton" onclick="progress()">Progress</a>
</div>
<script type="text/javascript">
function show(){
$.messager.show({
title:'My Title',
msg:'Message will be closed after 4 seconds.',
showType:'show'
});
}
function slide(){
$.messager.show({
title:'My Title',
msg:'Message will be closed after 5 seconds.',
timeout:5000,
showType:'slide'
});
}
function fade(){
$.messager.show({
title:'My Title',
msg:'Message never be closed.',
timeout:0,
showType:'fade'
});
}
function progress(){
var win = $.messager.progress({
title:'Please waiting',
msg:'Loading data...'
});
setTimeout(function(){
$.messager.progress('close');
},5000)
}
</script>
</body>
</html>
插件效果
easyui源码翻译1.32--Messager(消息窗口)的更多相关文章
- easyui源码翻译1.32+API翻译全篇导航 (提供下载源码)
前言 EasyUI每个组件都会有 属性.方法.事件 属性 所有的属性都定义在jQuery.fn.{plugin}.defaults里面.例如,对话框属性定义在jQuery.fn.dialog.defa ...
- easyui源码翻译1.32--Dialog(对话框窗口)
前言 扩展自$.fn.window.defaults.使用$.fn.dialog.defaults重写默认值对象.下载该插件翻译源码 该对话框是一种特殊类型的窗口,它在顶部有一个工具栏,在底部有一个按 ...
- easyui源码翻译1.32--datagrid(数据表格)
前言 此前网上有easyui1.25的源码 应该算是比较老的版本 之后又经历了1.26 . 1.3. 1.31. 1.32 .1.33.1.34 1.33开始支持css3 算是又一个转折 但是 ...
- easyui源码翻译1.32--EasyLoader(简单加载)
前言 扩展自$.fn.datebox.defaults,使用$.fn.datetimebox.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3. ...
- easyui源码翻译1.32--SearchBox(搜索框)
前言 使用$.fn.searchbox.defaults重写默认值对象.下载该插件翻译源码 搜索框提示用户需要输入搜索的值.它可以结合一个菜单,允许用户选择不同的搜索类别.在用户按下回车键或点击组件右 ...
- easyui源码翻译1.32--panel(面板)
前言 昨天发布了表格datagrid的翻译源码 ,easyui的许多插件有依赖关系 比如datagrid 的渲染需要panel.resizable.linkbutton.pagination 今 ...
- easyui源码翻译1.32--ValidateBox(验证框)
前言 使用$.fn.validatebox.defaults重写默认值对象.下载该插件翻译源码 validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效.如果用户输入了无效的值,它将 ...
- easyui源码翻译1.32--ComboGrid(数据表格下拉框)
前言 扩展自$.fn.combo.defaults和$.fn.datagrid.defaults.使用$.fn.combogrid.defaults重写默认值对象.下载该插件翻译源码 数据表格下拉框结 ...
- easyui源码翻译1.32--Draggable(拖动)
前言 使用$.fn.draggable.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3.2 * *翻译:qq 1364386878 --拖动 ...
随机推荐
- JDK Tools - jinfo: Java 配置信息工具
jinfo 是 JDK 自带的配置信息工具,可以查看.设置 Java 进程的参数配置. 命令格式 jinfo [ option ] pidjinfo [ option ] executable cor ...
- 【转载】Spark SQL之External DataSource外部数据源
http://blog.csdn.net/oopsoom/article/details/42061077 一.Spark SQL External DataSource简介 随着Spark1.2的发 ...
- spark1.1.0下使用SparkSQL
spark1.1.0的安装参见http://blog.csdn.net/bluejoe2000/article/details/41391407 安装了spark之后,可以在 shell中执行Spar ...
- 月下载量上千次的APP源码分享
在360上面上线了一个月,下载量上千余次.这里把代码都分享出来,供大家学习哈!还包括教大家如何接入广告,赚点小钱花花,喜欢的帮忙顶一个,大神见了勿喷,小学僧刚学Android没多久. 首先介绍这款应用 ...
- UDP通信 Java
public class UdpServerTest { /** * @param args * @throws SocketException */ public static void main( ...
- (四)JAVA使用POI操作excel
1,字体处理 Demo12.java package com.wishwzp.poi; import java.io.FileOutputStream; import org.apache.poi.h ...
- asp.net 备份和恢复数据库
观看了Insus的视频写下来的,代码可能有点冗长,如有好的想法的,可以多交流. 前台: <form id="form1" runat="server"&g ...
- Jar mismatch! Fix your dependencies的问题(转)
看到网上有说: 在开发Android项目的时候,有时需要引用多个项目作为library.在引用项目的时候,有时会出现“Jar mismatch! Fix your dependencies”错误. 这 ...
- 队列(顺序存储)C++模板实现
队列:一端进行插入,另一端进行删除的线性结构,具有先进先出性.利用数组来实现队列将面临"假溢出"的情况,如下图所示: front:永远指向队首元素,队首在本文中是允许删除元素的一端 ...
- jQuery事件绑定和委托
可以用多种方法实现,on() . bind() . live() . delegate() ,还有one(). 有时我们可能会像下面这样绑定一个事件: $("#div1"). ...