给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键盘,支持拖动
我们在调用系统的Alert,prompt的弹出提示时,不同的系统会有不同的提示框,视觉效果不统一,而且不好看,功能单一,现在我们通过Jquery模拟Alert,prompt,现实统一视觉效果,而且内容丰富的弹出提示。
Jquery可以扩展自己的功能,如果对Jquery开发插件不熟悉的人可以到官方网去看看文档,比较简单易懂。
- /*
- * 本插件基于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
- };
- });
- #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}
调用方法:
- $.kw.alert("提示内容")
- $.kw.alert("提示内容","系统提示")//修改弹出框提示标题
- $.kw.comport("提示内容");
给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键盘,支持拖动的更多相关文章
- jquery添加属性的方法
$("#id" ).prop('checked', true); $("#id" ).attr('checked', 'true');
- jQuery自定义alert,confirm方法及样式
学过JavaScript的都知道,alert().confirm()都是window对象特有的方法,而这两个方法我们平时使用的频率也很高,但是比较扎心的就是他自带的样式太... 因此,我整理了一个比较 ...
- 如何为jquery添加方法
以下内容引自一位网友的帖子: jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery ...
- element弹框的的this.$alert、this.$prompt方法用法
调用$alert方法即可打开消息提示,它模拟了系统的 alert,无法通过按下 ESC 或点击框外关闭 调用$prompt方法即可打开消息提示,它模拟了系统的 prompt
- 为jQuery添加Webkit的触摸方法支持
前些日子收到邮件,之前兼职的一个项目被转给了其他人,跟进的人来问我相关代码的版权问题. 我就呵呵了. 这段代码是我在做13年一份兼职的时候无聊加上去的,为jQuery添加触摸事件的支持.因为做得有点无 ...
- jquery 添加节点的几种方法介绍
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 原生JS添加节点方法与jQuery添加节点方法的比较及总结
一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="d ...
- JS添加节点方法与JQuery添加节点方法的比较及总结
原生JS添加节点方法与JQuery添加节点方法的比较及总结 一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div ...
- 通示jQuery实例方法,未DOM对象添加多个方法
<script type="text/javascript"> /* * 通示jQuery实例方法,未DOM对象添加多个方法 * 用按钮做多个事件的调用 */ (fun ...
随机推荐
- 20141128--JavaScript HTML DOM
通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素. HTML DOM 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). 每个 ...
- JS 提示框 alert()、confirm()、prompt()的三者的区别
使用消息框 使用警告.提示和确认 可以使用警告.确认和提示消息框来获得用户的输入.这些消息框是 window 对象的接口方法.由于 window 对象位于对象层次的顶层,因此实际应用中不必使用这些消息 ...
- 素数个数统计——Eratosthenes筛法 [LeetCode 204]
1- 问题描述 Count the number of prime numbers less than a non-negative number, n 2- 算法思想 给出要筛数值的范围 $n$,找 ...
- Spark RDD整理
参考资料: Spark和RDD模型研究:http://itindex.net/detail/51871-spark-rdd-模型 理解Spark的核心RDD:http://www.infoq.com/ ...
- JavaScript创建对象的写法
JavaScript 有Date.Array.String等这样的内置对象,功能强大使用简单,人见人爱,但在处理一些复杂的逻辑的时候,内置对象就很无力了,往往需要开发者自定义对象. 对象是什么 从 ...
- PHP中include和require绝对路径、相对路径问题
在写PHP程序时,经常要用到include或require包含其他文件,但是各文件里包含的文件多了之后,就会产生路径问题. 如下目录: <web>(网站根目录) ├<A>文件夹 ...
- 动态创建MySQL数据库
import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sq ...
- Azure Websites Migration Assistant
这是一个IIS+Database的迁移工具, 可以参考 http://channel9.msdn.com/Shows/Azure-Friday/Azure-Websites-Migration-Ass ...
- 【js】正则表达式豁然开朗
http://www.jikexueyuan.com/course/809_3.html?ss=1 小括号,中括号 中括号:[] ,它表示里面的字符任选一个 比如[abcd]+,就表示abcd这四个字 ...
- SharePoint 2010/SharePoint 2013 Custom Action: 基于Site Collection 滚动文字的通知.
应用场景: 有时候我们的站点需要在每个页面实现滚动文字的通知,怎么在不修改Master Page的情况下实现这个功能?我们可以使用Javascript 和 Custom Action 来实现. 创建一 ...