给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键盘,支持拖动
2014-05-30 17:16
706 查看
我们在调用系统的Alert,prompt的弹出提示时,不同的系统会有不同的提示框,视觉效果不统一,而且不好看,功能单一,现在我们通过Jquery模拟Alert,prompt,现实统一视觉效果,而且内容丰富的弹出提示。
Jquery可以扩展自己的功能,如果对Jquery开发插件不熟悉的人可以到官方网去看看文档,比较简单易懂。
Js代码
/*
* 本插件基于JQUERY
* Jquery版本: 1.7.2
* Date:2012-06-28
* Author:Kingwell
* E-mail:jinhua.leng##gmail.com
*
* ---------- 接口说明: ----------
*
* --本插件采用kw命名空间,给Jquery添加静态方法,故调用方法为 $.kw.方法名 参数如下:
* --调用方法:
* --alert $.kw.alert(content,title,callBack)
* --prompt $.kw.prompt(title,content,callBack)
*
*
* -- title 标题名称 如果缺省,则为默认标题,如:"系统提示"
* -- content 内容显示的内容
* --callback 回调函数,单击确定后要执行的内容
*
*
* --功能:类似系统功能,支持拖动,响应键盘事件,ESC退出,Enter确定,以及回调函数功能。
*
*
*/
$(function () {
$.kw = {
title : "System information", //默认标题 可修改
speed : 400, //默认速度 可修改
buttonName : "OK", //确定按钮默认名称 可修改
cancel : "Cancel", //取消按钮默认名称 可修改
content : "Content",
//移除遮盖层
del : function () {
$("#alert-layer").remove();
},
//响应ESC键盘退出
esc : function () {
$(document).keyup(function (event) {
if (event.which == 27) {
$.kw.del();
}
});
},
//内容显示功能
alert : function (sContent, sTitle, callBack) {
var title = sTitle || this.title;
var layer = "<div id='alert-layer'><div id='alert-container'><div class='alert-top'></div><div class='alert-box'><div id='alert-title'>" + title + "<div id='alert-close' title='Close'></div></div><div id='alert-content'>" + sContent + "</div><div class='alert-button'><button id='alert-button'>" + this.buttonName + "</button></div></div><div class='alert-bottom'></div></div></div>";
$(layer).fadeIn(this.speed).appendTo("body");
this.setting();
this.move();
$("#alert-button").focus();
$("#alert-close").bind("click", this.del); //移除层
$("#alert-button").bind("click", function () {
if (callBack) {
callBack();
}
$.kw.del();
}); //移除层
this.esc();
},
//提示
confirm : function (sContent, callBack, sTitle) {
var title = sTitle || this.title;
var content = sContent || this.content;
var layer = "<div id='alert-layer'><div id='alert-container'><div class='alert-top'></div><div class='alert-box'><div id='alert-title'>" + title + "<div id='alert-close' title='Close'></div></div><div id='alert-content'>" + sContent + "</div><div class='alert-button'><button id='alert-button'>" + this.buttonName + "</button><button id='alert-cancel'>" + this.cancel + "</button></div></div><div class='alert-bottom'></div></div></div>";
$(layer).fadeIn(this.speed).appendTo("body");
this.setting();
$("#alert-button").focus(); //获得焦点
this.move(); //拖动
$("#alert-close").bind("click", this.del); //移除层
$("#alert-cancel").bind("click", this.del); //移除层
$("#alert-button").bind("click", function () {
$.kw.del();
if (callBack) {
callBack();
};
}); //移除层
this.esc();
},
//框拖动功能
move : function () {
$("#alert-title").mousedown(function (event) {
var l = parseInt($("#alert-container").css("left")),
t = parseInt($("#alert-container").css("top"));
x = event.pageX - l;
y = event.pageY - t;
$("body").bind("mousemove", function (event) {
$("#alert-container").css({
"left" : (event.pageX - x)
});
$("#alert-container").css({
"top" : (event.pageY - y)
});
//$("#alert-container").fadeTo(0,0.9)
});
});
$("body").mouseup(function () {
$("body").unbind("mousemove");
//$("#alert-container").fadeTo(0,1)
});
},
//设置背景层与内位置
setting : function () {
var bcw = document.documentElement.clientWidth,
bch = document.documentElement.clientHeight,
bsh = document.documentElement.scrollHeight,
aw = $("#alert-container").width() / 2,
ah = $("#alert-container").height() / 2;
$("#alert-layer").css("height", bsh);
$("#alert-container").css({
"top" : bch / 2 - ah,
"left" : bcw / 2 - aw
});
}
//$.kw End
};
});
Css代码
#alert-layer button:focus{border:1px solid #AAA!important; background:#789!important; color:white; outline:none}
#alert-layer{position:absolute;left:0;top:0;width:100%;height:100%;color:#333;line-height:1;z-index:10000; background:rgba(0,0,0,0.1)}
#alert-layer #alert-container{border-radius:3px; padding:10px; width:390px; position:fixed; _position:absolute;}
#alert-layer .alert-top{background:url(images/conner2.png) no-repeat left top; height:10px;}
#alert-layer .alert-bottom{background:url(images/conner2.png) no-repeat left bottom; height:10px;}
#alert-layer #alert-title{font-size:15px; height:30px;line-height:25px;padding:0 10px;position:relative;font-weight:bold;cursor:move;}
#alert-layer #alert-close{background: url(images/close.gif) no-repeat center center; width:25px; height:25px; position:absolute; cursor:pointer; right:2px; top:0px;}
#alert-layer .alert-button{ padding:5px 10px; text-align:right}
#alert-layer #alert-content{background:#F1F1F1; border-top:1px solid #B9B9B9; border-bottom:1px solid #B9B9B9; padding:10px 15px;}
.alert-box{background:url(images/tc_bg.png) repeat-y left top; padding:0 6px}
#alert-layer button{padding:5px; border:1px solid #CCC; margin:auto 5px; border-radius:2px; min-width:60px;}
#alert-layer h1,#alert-layer h2,#alert-layer h3,#alert-layer h4{margin:10px auto; font-size:16px}
调用方法:
Js代码
$.kw.alert("提示内容")
$.kw.alert("提示内容","系统提示")//修改弹出框提示标题
$.kw.comport("提示内容");
Jquery可以扩展自己的功能,如果对Jquery开发插件不熟悉的人可以到官方网去看看文档,比较简单易懂。
Js代码
/*
* 本插件基于JQUERY
* Jquery版本: 1.7.2
* Date:2012-06-28
* Author:Kingwell
* E-mail:jinhua.leng##gmail.com
*
* ---------- 接口说明: ----------
*
* --本插件采用kw命名空间,给Jquery添加静态方法,故调用方法为 $.kw.方法名 参数如下:
* --调用方法:
* --alert $.kw.alert(content,title,callBack)
* --prompt $.kw.prompt(title,content,callBack)
*
*
* -- title 标题名称 如果缺省,则为默认标题,如:"系统提示"
* -- content 内容显示的内容
* --callback 回调函数,单击确定后要执行的内容
*
*
* --功能:类似系统功能,支持拖动,响应键盘事件,ESC退出,Enter确定,以及回调函数功能。
*
*
*/
$(function () {
$.kw = {
title : "System information", //默认标题 可修改
speed : 400, //默认速度 可修改
buttonName : "OK", //确定按钮默认名称 可修改
cancel : "Cancel", //取消按钮默认名称 可修改
content : "Content",
//移除遮盖层
del : function () {
$("#alert-layer").remove();
},
//响应ESC键盘退出
esc : function () {
$(document).keyup(function (event) {
if (event.which == 27) {
$.kw.del();
}
});
},
//内容显示功能
alert : function (sContent, sTitle, callBack) {
var title = sTitle || this.title;
var layer = "<div id='alert-layer'><div id='alert-container'><div class='alert-top'></div><div class='alert-box'><div id='alert-title'>" + title + "<div id='alert-close' title='Close'></div></div><div id='alert-content'>" + sContent + "</div><div class='alert-button'><button id='alert-button'>" + this.buttonName + "</button></div></div><div class='alert-bottom'></div></div></div>";
$(layer).fadeIn(this.speed).appendTo("body");
this.setting();
this.move();
$("#alert-button").focus();
$("#alert-close").bind("click", this.del); //移除层
$("#alert-button").bind("click", function () {
if (callBack) {
callBack();
}
$.kw.del();
}); //移除层
this.esc();
},
//提示
confirm : function (sContent, callBack, sTitle) {
var title = sTitle || this.title;
var content = sContent || this.content;
var layer = "<div id='alert-layer'><div id='alert-container'><div class='alert-top'></div><div class='alert-box'><div id='alert-title'>" + title + "<div id='alert-close' title='Close'></div></div><div id='alert-content'>" + sContent + "</div><div class='alert-button'><button id='alert-button'>" + this.buttonName + "</button><button id='alert-cancel'>" + this.cancel + "</button></div></div><div class='alert-bottom'></div></div></div>";
$(layer).fadeIn(this.speed).appendTo("body");
this.setting();
$("#alert-button").focus(); //获得焦点
this.move(); //拖动
$("#alert-close").bind("click", this.del); //移除层
$("#alert-cancel").bind("click", this.del); //移除层
$("#alert-button").bind("click", function () {
$.kw.del();
if (callBack) {
callBack();
};
}); //移除层
this.esc();
},
//框拖动功能
move : function () {
$("#alert-title").mousedown(function (event) {
var l = parseInt($("#alert-container").css("left")),
t = parseInt($("#alert-container").css("top"));
x = event.pageX - l;
y = event.pageY - t;
$("body").bind("mousemove", function (event) {
$("#alert-container").css({
"left" : (event.pageX - x)
});
$("#alert-container").css({
"top" : (event.pageY - y)
});
//$("#alert-container").fadeTo(0,0.9)
});
});
$("body").mouseup(function () {
$("body").unbind("mousemove");
//$("#alert-container").fadeTo(0,1)
});
},
//设置背景层与内位置
setting : function () {
var bcw = document.documentElement.clientWidth,
bch = document.documentElement.clientHeight,
bsh = document.documentElement.scrollHeight,
aw = $("#alert-container").width() / 2,
ah = $("#alert-container").height() / 2;
$("#alert-layer").css("height", bsh);
$("#alert-container").css({
"top" : bch / 2 - ah,
"left" : bcw / 2 - aw
});
}
//$.kw End
};
});
Css代码
#alert-layer button:focus{border:1px solid #AAA!important; background:#789!important; color:white; outline:none}
#alert-layer{position:absolute;left:0;top:0;width:100%;height:100%;color:#333;line-height:1;z-index:10000; background:rgba(0,0,0,0.1)}
#alert-layer #alert-container{border-radius:3px; padding:10px; width:390px; position:fixed; _position:absolute;}
#alert-layer .alert-top{background:url(images/conner2.png) no-repeat left top; height:10px;}
#alert-layer .alert-bottom{background:url(images/conner2.png) no-repeat left bottom; height:10px;}
#alert-layer #alert-title{font-size:15px; height:30px;line-height:25px;padding:0 10px;position:relative;font-weight:bold;cursor:move;}
#alert-layer #alert-close{background: url(images/close.gif) no-repeat center center; width:25px; height:25px; position:absolute; cursor:pointer; right:2px; top:0px;}
#alert-layer .alert-button{ padding:5px 10px; text-align:right}
#alert-layer #alert-content{background:#F1F1F1; border-top:1px solid #B9B9B9; border-bottom:1px solid #B9B9B9; padding:10px 15px;}
.alert-box{background:url(images/tc_bg.png) repeat-y left top; padding:0 6px}
#alert-layer button{padding:5px; border:1px solid #CCC; margin:auto 5px; border-radius:2px; min-width:60px;}
#alert-layer h1,#alert-layer h2,#alert-layer h3,#alert-layer h4{margin:10px auto; font-size:16px}
调用方法:
Js代码
$.kw.alert("提示内容")
$.kw.alert("提示内容","系统提示")//修改弹出框提示标题
$.kw.comport("提示内容");
相关文章推荐
- 给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键盘,支持拖动
- 给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键...
- 又一个jquery轮播效果,焦点图,带数字显示序号,这个可以添加对应标题在图片上,支持主流浏览器
- jQueryAlert:jQuery JS的Alert、Comfirm、Prompt的提示对话框效果,效果非常棒,可以用来模拟代替默认的对话框
- jQuery向动态生成的内容添加事件响应(jquery live方法简介)
- 浏览器调用windows系统exe文件方法可以用于启动屏幕键盘等功能哦
- 又一个jquery轮播效果,焦点图,带数字显示序号,这个可以添加对应标题在图片上,支持主流浏览器
- 自己添加环境变量以后,系统环境变量不可以用。解决方法
- vista忘记用户名密码的修改方法(使用PE进入系统,用cmd.exe冒充虚拟键盘,然后就可以mmc组策略,或者命令行添加用户并提升权限)
- 详解jQuery向动态生成的内容添加事件响应jQuery live()方法
- golang函数——可以为类型(包括内置数据类型)定义函数,类似类方法,同时支持多返回值
- jQueryAlert:jQuery JS的Alert、Comfirm、Prompt的提示对话框效果,效果非常棒,可以用来模拟代替默认的对话框
- jQuery绑定事件不执行,添加alert后可以正常执行
- 使用jquery模拟键盘事件,但window系统并不会真的响应事件,只是浏览器当前页面会响应而已
- 写了一个jquery.imagesview插件,支持图片拖动、缩放类似ACDSEE效果
- linux 乱码 及解决方法 locale 可以利用iconv -l 来查看linux系统都支持哪种编码格式
- 为jQuery添加Webkit的触摸方法支持
- ZoomMarker 一款用于图片滚动放大拖动,且可以添加标记的jQuery插件
- android 系统中frameworks/base添加的string可以被其他应用使用方法
- 别再为了iOS新系统设备而重新安装一个新版Xcode了.其实我们可以添加版本支持