首页 > Web开发 > 详细

给Jquery添加alert,prompt方法，类似系统的Alert，Prompt，可以响应键盘，支持拖动

时间：2014-05-31 06:08:11      阅读：535      评论：0      收藏：0      [点我收藏+]

我们在调用系统的Alert，prompt的弹出提示时，不同的系统会有不同的提示框，视觉效果不统一，而且不好看，功能单一，现在我们通过Jquery模拟Alert，prompt，现实统一视觉效果，而且内容丰富的弹出提示。

 

Jquery可以扩展自己的功能，如果对Jquery开发插件不熟悉的人可以到官方网去看看文档，比较简单易懂。

 

 

 

Js代码  bubuko.com,布布扣
  1. /* 
  2.  *  本插件基于JQUERY 
  3.  *  Jquery版本: 1.7.2 
  4.  *        Date:2012-06-28 
  5.  *      Author:Kingwell 
  6.  *      E-mail:jinhua.leng##gmail.com 
  7.  * 
  8.  *  ---------- 接口说明： ---------- 
  9.  * 
  10.  *  --本插件采用kw命名空间，给Jquery添加静态方法，故调用方法为  $.kw.方法名 参数如下： 
  11.  *  --调用方法： 
  12.  *  --alert  $.kw.alert(content,title,callBack) 
  13.  *  --prompt $.kw.prompt(title,content,callBack) 
  14.  * 
  15.  * 
  16.  *  --   title 标题名称 如果缺省，则为默认标题，如："系统提示" 
  17.  *  -- content 内容显示的内容 
  18.  *  --callback 回调函数，单击确定后要执行的内容 
  19.  * 
  20.  * 
  21.  *  --功能：类似系统功能，支持拖动，响应键盘事件，ESC退出，Enter确定，以及回调函数功能。 
  22.  * 
  23.  * 
  24.  */  
  25. $(function () {  
  26.   
  27.     $.kw = {  
  28.         title      : "System information", //默认标题 可修改  
  29.         speed      : 400, //默认速度 可修改  
  30.         buttonName : "OK", //确定按钮默认名称 可修改  
  31.         cancel     : "Cancel", //取消按钮默认名称 可修改  
  32.         content    : "Content",  
  33.       
  34.           
  35.          //移除遮盖层  
  36.         del : function () {  
  37.             $("#alert-layer").remove();  
  38.         },  
  39.         //响应ESC键盘退出  
  40.         esc : function () {   
  41.             $(document).keyup(function (event) {  
  42.                 if (event.which == 27) {  
  43.                     $.kw.del();  
  44.                 }  
  45.             });  
  46.         },  
  47.   
  48.   
  49.         //内容显示功能  
  50.         alert : function (sContent, sTitle, callBack) {  
  51.             var title = sTitle || this.title;  
  52.             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>";  
  53.               
  54.             $(layer).fadeIn(this.speed).appendTo("body");  
  55.             this.setting();  
  56.             this.move();  
  57.             $("#alert-button").focus();  
  58.             $("#alert-close").bind("click", this.del); //移除层  
  59.             $("#alert-button").bind("click", function () {  
  60.                 if (callBack) {  
  61.                     callBack();  
  62.                 }  
  63.                 $.kw.del();  
  64.                   
  65.             }); //移除层  
  66.             this.esc();  
  67.         },  
  68.           
  69.           
  70.           
  71.         //提示  
  72.         confirm : function (sContent, callBack, sTitle) {  
  73.             var title = sTitle || this.title;  
  74.             var content = sContent || this.content;  
  75.             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>";  
  76.               
  77.             $(layer).fadeIn(this.speed).appendTo("body");  
  78.             this.setting();  
  79.             $("#alert-button").focus(); //获得焦点  
  80.             this.move(); //拖动  
  81.             $("#alert-close").bind("click", this.del); //移除层  
  82.             $("#alert-cancel").bind("click", this.del); //移除层  
  83.             $("#alert-button").bind("click", function () {  
  84.                 $.kw.del();  
  85.                 if (callBack) {  
  86.                     callBack();  
  87.                 };  
  88.                   
  89.             }); //移除层  
  90.             this.esc();  
  91.         },        
  92.           
  93.           
  94.         //框拖动功能  
  95.         move : function () {  
  96.             $("#alert-title").mousedown(function (event) {  
  97.                 var l = parseInt($("#alert-container").css("left")),  
  98.                 t = parseInt($("#alert-container").css("top"));  
  99.                 x = event.pageX - l;  
  100.                 y = event.pageY - t;  
  101.                 $("body").bind("mousemove", function (event) {  
  102.                     $("#alert-container").css({  
  103.                         "left" : (event.pageX - x)  
  104.                     });  
  105.                     $("#alert-container").css({  
  106.                         "top" : (event.pageY - y)  
  107.                     });  
  108.                     //$("#alert-container").fadeTo(0,0.9)  
  109.                 });  
  110.             });  
  111.             $("body").mouseup(function () {  
  112.                 $("body").unbind("mousemove");  
  113.                 //$("#alert-container").fadeTo(0,1)  
  114.             });  
  115.               
  116.         },  
  117.           
  118.       
  119.         //设置背景层与内位置  
  120.         setting : function () {  
  121.             var bcw = document.documentElement.clientWidth,  
  122.                 bch = document.documentElement.clientHeight,  
  123.                 bsh = document.documentElement.scrollHeight,  
  124.                 aw  = $("#alert-container").width() / 2,  
  125.                 ah  = $("#alert-container").height() / 2;  
  126.             $("#alert-layer").css("height", bsh);  
  127.             $("#alert-container").css({  
  128.                 "top"  : bch / 2 - ah,  
  129.                 "left" : bcw / 2 - aw  
  130.             });  
  131.         }  
  132.           
  133.           
  134.     //$.kw  End   
  135.     };  
  136.   
  137.   
  138. });  

 

Css代码  bubuko.com,布布扣
  1. #alert-layer button:focus{border:1px solid #AAA!important; background:#789!important; color:white; outline:none}  
  2. #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)}  
  3. #alert-layer #alert-container{border-radius:3px; padding:10px; width:390px; position:fixed; _position:absolute;}  
  4. #alert-layer .alert-top{background:url(images/conner2.png) no-repeat left top; height:10px;}  
  5. #alert-layer .alert-bottom{background:url(images/conner2.png) no-repeat left bottom; height:10px;}  
  6. #alert-layer #alert-title{font-size:15px; height:30px;line-height:25px;padding:0 10px;position:relative;font-weight:bold;cursor:move;}  
  7. #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;}  
  8. #alert-layer .alert-button{ padding:5px 10px; text-align:right}  
  9. #alert-layer #alert-content{background:#F1F1F1; border-top:1px solid #B9B9B9; border-bottom:1px solid #B9B9B9; padding:10px 15px;}  
  10. .alert-box{background:url(images/tc_bg.png) repeat-y left top; padding:0 6px}  
  11.   
  12. #alert-layer button{padding:5px; border:1px solid #CCC; margin:auto 5px; border-radius:2px; min-width:60px;}  
  13. #alert-layer h1,#alert-layer h2,#alert-layer h3,#alert-layer h4{margin:10px auto; font-size:16px}  

 

 

调用方法：

 

Js代码  bubuko.com,布布扣
  1. $.kw.alert("提示内容")  
  2. $.kw.alert("提示内容","系统提示")//修改弹出框提示标题  
  3.   
  4. $.kw.comport("提示内容");  

 

 

 

 

踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！