首页 > 代码库 > 给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键盘,支持拖动
给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键盘,支持拖动
我们在调用系统的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("提示内容");
<iframe id="google_ads_frame2" vspace="0" height="250" marginHeight="0" src="http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-3447371224873639&output=html&h=250&slotname=8660799060&adk=1970350646&w=300&lmt=1401462769&flash=0&url=http%3A%2F%2Fwww.cnblogs.com%2Franran%2Fp%2F3761497.html&dt=1401462770814&shv=r20140520&cbv=r20140417&saldr=sb&correlator=1401462770658&frm=20&ga_vid=1304086684.1400769066&ga_sid=1401446522&ga_hid=125958871&ga_fc=1&u_tz=480&u_his=710&u_java=1&u_h=768&u_w=1364&u_ah=740&u_aw=1364&u_cd=16&u_nplug=0&u_nmime=0&dff=verdana&dfs=13&adx=0&ady=4017&biw=314&bih=74&eid=317150304&oid=3&rx=0&eae=0&docm=9&vis=0&fu=0&ifi=2&xpc=4WSJJYmmOv&p=http%3A//www.cnblogs.com&dtd=47" frameBorder="0" width="300" allowTransparency="true" name="google_ads_frame2" marginWidth="0" scrolling="no" hspace="0"></iframe><iframe id="google_ads_frame3" vspace="0" height="250" marginHeight="0" src="http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-3447371224873639&output=html&h=250&slotname=8660799060&adk=1970350646&w=300&lmt=1401462769&flash=0&url=http%3A%2F%2Fwww.cnblogs.com%2Franran%2Fp%2F3761497.html&dt=1401462770868&shv=r20140520&cbv=r20140417&saldr=sb&prev_slotnames=8660799060&correlator=1401462770658&frm=20&ga_vid=1304086684.1400769066&ga_sid=1401446522&ga_hid=125958871&ga_fc=1&u_tz=480&u_his=710&u_java=1&u_h=768&u_w=1364&u_ah=740&u_aw=1364&u_cd=16&u_nplug=0&u_nmime=0&dff=verdana&dfs=13&adx=305&ady=4267&biw=314&bih=74&eid=317150304&oid=3&rx=0&eae=0&docm=9&vis=0&fu=0&ifi=3&xpc=NzAuAiF938&p=http%3A//www.cnblogs.com&dtd=47" frameBorder="0" width="300" allowTransparency="true" name="google_ads_frame3" marginWidth="0" scrolling="no" hspace="0"></iframe>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。