给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键盘,支持拖动
2014-04-12 07:25
537 查看
我们在调用系统的Alert,prompt的弹出提示时,不同的系统会有不同的提示框,视觉效果不统一,而且不好看,功能单一,现在我们通过Jquery模拟Alert,prompt,现实统一视觉效果,而且内容丰富的弹出提示。
Jquery可以扩展自己的功能,如果对Jquery开发插件不熟悉的人可以到官方网去看看文档,比较简单易懂。
JS代码:
CSS代码
JS代码
Jquery可以扩展自己的功能,如果对Jquery开发插件不熟悉的人可以到官方网去看看文档,比较简单易懂。
JS代码:
/* * 本插件基于JQUERY * Jquery版本: 1.7.2 * Date:2012-06-28 * * ---------- 接口说明: ---------- * * --本插件采用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轮播效果,焦点图,带数字显示序号,这个可以添加对应标题在图片上,支持主流浏览器
- 详解jQuery向动态生成的内容添加事件响应jQuery live()方法
- 写了一个jquery.imagesview插件,支持图片拖动、缩放类似ACDSEE效果
- golang函数——可以为类型(包括内置数据类型)定义函数,类似类方法,同时支持多返回值
- linux 乱码 及解决方法 locale 可以利用iconv -l 来查看linux系统都支持哪种编码格式
- Win8系统不支持添加POP协议有什么方法可以让其支持POP协议呢
- 详解jQuery向动态生成的内容添加事件响应jQuery live()方法
- jQuery向动态生成的内容添加事件响应(jquery live方法简介)
- vista忘记用户名密码的修改方法(使用PE进入系统,用cmd.exe冒充虚拟键盘,然后就可以mmc组策略,或者命令行添加用户并提升权限)
- jQuery绑定事件不执行,添加alert后可以正常执行
- 别再为了iOS新系统设备而重新安装一个新版Xcode了.其实我们可以添加版本支持
- android 系统中frameworks/base添加的string可以被其他应用使用方法
- 自己添加环境变量以后,系统环境变量不可以用。解决方法
- GvidView中添加HyperLink控件打開新頁,但HyperLink不支援JS,可以通過以下的方法讓其支持.
- 为jQuery添加Webkit的触摸方法支持
- 浏览器调用windows系统exe文件方法可以用于启动屏幕键盘等功能哦
- ZoomMarker 一款用于图片滚动放大拖动,且可以添加标记的jQuery插件
- jQuery向动态生成的内容添加事件响应(jquery live方法简介)