- 浏览: 152004 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
陈颜宇:
prompt在哪啊,只看到了confirm 和 alert
给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键盘,支持拖动 -
陈小妞:
alert(el.getAttribute("cla ...
Javascript兼容性之——getAttribute(),setAttribute()(获取设置属性) -
I白I:
厉害。。。
HTML5实现全屏API【进入和退出全屏】 -
joyven:
...
Javascript兼容性之——getAttribute(),setAttribute()(获取设置属性) -
小林夕:
看看一个用canvas到极致的案例 ProcessOn
HTML5 Canvas实战——HTML5 Canvas时间效果
基本我自己封装的一些常用函数:KW.js
/* Kingwell Javascript library Author:Jinhua.leng#gmail.com Date:2012-05-20 */ (function () { if (!window.KW) { window.KW = {} } //命名空间 window.KW = { version:"V1.02", $ : function () { //$()函数 var elements = new Array(); for (var i = 0; i <= arguments.length; i++) { var element = arguments[i]; //如果是一个字符串那假设它是一个ID if (typeof element == 'string') { element = document.getElementById(element); } //如果只提供了一个参数,则立即返回这个参数 if (arguments.length == 1) { return element; } //否则,将它添加到数组中 elements.push(element); } return elements; }, /*-------------------- 事件处理 --------------------*/ addEvent : function (oTarget, oType, fnHandler) { //-----添加事件; var oT = this.$(oTarget); if (!oT) { alert('Not found \" ' + oTarget + ' \"'); return false }; if (oT.addEventListener) { //for DOM oT.addEventListener(oType, fnHandler, false); } else if (oT.attachEvent) { //for IE oT.attachEvent('on' + oType, fnHandler); } else { //for Others oT['on' + oType] = fnHandler; } }, removeEvent : function (oTarget, oType, fnHandler) { //-----移除事件; var oT = this.$(oTarget); if (!oT) { alert('Not found \" ' + oTarget + ' \"'); return false }; if (oT.removeEventListener) { //for DOM oT.removeEventListener(oType, fnHandler, false); } else if (oT.detachEvent) { //for IE oT.detachEvent('on' + oType, fnHandler); } else { //for Others oT['on' + oType] = null; } }, getEvent : function () { //-----获得事件----- return window.event || arguments.callee.caller.arguments[0]; }, getTarget : function () { //-----获取目标---- var ev = window.event || arguments.callee.caller.arguments[0]; return ev.srcElement || ev.target; }, stopPropagation : function () { //-----阻止冒泡----- if (window.event) { return this.getEvent().cancelBubble = true; } else { return arguments.callee.caller.arguments[0].stopPropagation(); } }, stopDefault : function () { //-----阻止默认行为 if (window.event) { return this.getEvent().returnValue = false; } else { return arguments.callee.caller.arguments[0].preventDefault(); } }, /*-------------------- 常用函数 --------------------*/ toggleDisplay : function (id) { //-----显示,隐藏----- var oTarget = this.$(id); if (!oTarget) { return false; } oTarget.style.display == 'none' ? oTarget.style.display = 'block' : oTarget.style.display = 'none'; }, stripHTML : function (agr) { //-----移除HTML----- var reTag = /<(?:.|\s)*?>/g; return agr.replace(reTag, '') }, stripSpace : function (oTarget) { //-----移除空格----- var re = /^\s*(.*?)\s*$/; return oTarget.replace(re, '$1'); }, isEmail : function (e) { //-----Is E-mail var re = /^[a-zA-z_][a-zA-Z_0-9]*?@\w{1,}.\[a-zA-Z]{1,}/; return re.test(e); }, /*-------------------- DOM --------------------*/ createContent : function (node, value, parendNode) { var n = document.createElement(node), c = document.createTextNode(value); n.appendChild(c); document.body.appendChild(n) }, text : function (node, value) { this.$(node).innerHTML = value; }, val : function (node, value) { this.$(node).value = value }, size : function () { return this.size(); }, addElement : function (tag, id, value) { if (arguments.length <= 1) { return document.createElement(tag); } else { var tag = document.createElement(tag); tag.setAttribute(id, value); return tag; } }, att : function (id, value) { if (arguments.length == 1) { return this.getAttibute.value; } else if (arguments.length == 2) { return setAtttube.value; } else { return false } }, /*-------------------- Cookie操作 --------------------*/ setCookie : function (sName, sValue, oExpires, sPath, sDomain, bSecure) { //-----设置Cookie----- var sCookie = sName + '=' + encodeURIComponent(sValue); if (oExpires) { sCookie += '; expires=' + oExpires.toGMTString(); } if (sPath) { sCookie += '; path=' + sPath; } if (sDomain) { sCookie += '; domain=' + sDomain; } if (bSecure) { sCookie += '; secure'; } document.cookie = sCookie; }, getCookie : function (sName) { //-----获得Cookie值----- var sRE = '(?:; )?' + sName + '=([^;]*)'; var oRE = new RegExp(sRE); if (oRE.test(document.cookie)) { return decodeURIComponent(RegExp['$1']); } else { return null; } }, deleteCookie : function (sName, sPath, sDomain) { //-----删除Cookie值----- this.setCookie(sName, '', new Date(0), sPath, sDomain); } }; //WS End })(); //Library End
基本代码:
/*-----KW.js调用说明----- KW.$() ----->ID选择器; addEvent ----->绑定事件; removeEvent ----->移除事件; getEvent ----->获得事件; getTarget ----->获得事件目标; stopPropagation()----->阻止冒泡 stopDefault() ----->取消默认事件 */ /* 弹出框 函数说明 alertBox(sTitle, sContent, sType); 参数: sTitle:弹出框标题 sContent:弹出框内容,可以是文本,HTML sType: */ function alertBox(sTitle, sContent, sType) { var cl = document.createElement("div"), ac = document.createElement("div"), at = document.createElement("div"), act = document.createElement("div"), clo = document.createElement("span"), bh = document.body.offsetHeight; cl.setAttribute("id", "cover-layer"); cl.setAttribute("style", "height:" + bh + "px"); ac.setAttribute("id", "alert-container"); at.setAttribute("id", "alert-title"); act.setAttribute("class", "alert-content"); clo.setAttribute("id", "alert-close"); clo.setAttribute("class", "in-bl"); clo.setAttribute("title", "close") cl.appendChild(ac); ac.appendChild(at); at.innerHTML = sTitle; at.appendChild(clo); ac.appendChild(act); act.innerHTML = sContent; if (sType == "prompt") { var ab = document.createElement("div"), as = document.createElement("button"), ar = document.createElement("button"); ab.setAttribute("class", "alert-button"); as.setAttribute("id", "alertSubmit"); ar.setAttribute("id", "cancel"); as.innerHTML = "Yes"; ar.innerHTML = "No"; ab.appendChild(as); ab.appendChild(ar); ac.appendChild(ab); } document.body.appendChild(cl); //垂直居中实现 var ch = Math.ceil(document.documentElement.clientHeight / 2), lh = Math.ceil(ac.offsetHeight / 4); ac.setAttribute("style", "top:" + ch + "px;margin-top:" + -lh + "px"); //响应ESC键 KW.addEvent(document.body, "keyup", function () { if (KW.$("cover-layer") && KW.getEvent().keyCode == 27) { delAlert(); } }) if (sType == "prompt") { WS.addEvent("cancel", "click", function () { delAlert(); }) } if (sType == "prompt") { KW.addEvent("alertSubmit", "click", function () { delAlert(); return true; }) } //Drag and Drop var x; var y; var box = KW.$("alert-container"); box.style.left = box.offsetLeft+"px"; box.style.top = box.offsetTop+"px"; WS.addEvent("alert-title", "mousedown", function () { x = KW.getEvent().clientX - parseInt(box.style.left); y = KW.getEvent().clientY - parseInt(box.style.top) WS.addEvent(document.body, "mousemove", mousemove); }); document.onmouseup = function () { WS.removeEvent(document.body, "mousemove", mousemove); } function mousemove() { box.style.left= (KW.getEvent().clientX-x) + "px" box.style.top = (KW.getEvent().clientY - y) + "px" } } //alertBox End /* 删除遮盖层; delAlert(); 当需要删除遮盖层时,调整此函数即可; */ function delAlert() { KW.$("cover-layer").parentNode.removeChild(KW.$("cover-layer")); }
CSS 代码:
/*-- Alert --*/ #cover-layer{position:absolute; top:0; left:0; margin:auto; width:100%; height:100%; background:rgba(0,0,0,0.2); _background:#000; z-index:10000;} #cover-layer #alert-container{width:400px; position:absolute; left:50%; margin-left:-100px; top:50%; background:#FFF; box-shadow:0 0 30px rgba(0,0,0,0.6); border-radius:5px;} #cover-layer #alert-title{line-height:30px; padding:0 10px; font-weight:bold; border-top-left-radius:5px; border-top-right-radius:5px; background:#EEE; background:-moz-linear-gradient(#FFF,#EEE); background:-webkit-gradient(linear,0% 0%,0% 100%,from(#FFF),to(#EEE)); cursor:move} #cover-layer .alert-content{padding:30px 20px;} #cover-layer .alert-button{margin:auto auto 10px auto; text-align:center;} #cover-layer button{min-width:50px; margin:auto 5px} #cover-layer #alert-close{width:20px; height:20px; background:url(images/alert-delete.png) no-repeat center center; vertical-align:middle; float:right; cursor:pointer; margin:5px auto auto auto;}
HTLM代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>kingwell</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div style=" padding:50px"> <div id="alertA">弹出框A测试 Click Me</div><br><br> <div id="alertB">弹出框B测试 Click Me</div> </div> <script type="text/javascript" src="../js/lib/KW.js"></script> <script type="text/javascript"> /*----- Test AlertBox -----*/ WS.addEvent("alertA", "click", function () { alertBox("System Prompt", "<div class='strong'>Alert Test !按ESC键试试</div><br><br><input type='text'><br><br><br><br><button>Save</button><button>Cancel</button>"); WS.addEvent("alert-close", "click", delAlert) }); WS.addEvent("alertB", "click", function () { alertBox("Prompt", "<div class='strong a-c'>Are you sure you want to delete?</div>","prompt"); WS.addEvent("alert-close", "click", delAlert) }); </script> </body> <html>
发表评论
-
一款小巧精美的浏览器必备工具(支持Chrome,Edge)
2024-04-28 11:28 314一键清洁大师:专业的浏览器数据清理工具;超美动画,炫酷特效, ... -
Backbone1.0.0数据验证的变化
2014-07-10 09:48 8120.5.3版本对Model数据验证时,绑定Error就可以了 ... -
使用Sass预定义一些常用的样式,非常方便
2014-06-04 11:04 1376各种新技术的出现,推动着Web前端技术飞速发展,在提升用户体 ... -
使用Sass预定义一些常用的样式,非常方便
2014-06-04 11:03 1345CSS预处理技术现在已经非常成熟,比较流行的有Less,Sa ... -
去掉IE10+input 文本后面“删除图标”与密码文本框后面“查看密码图标”
2014-05-04 15:38 1360在最新的IE浏览器(IE10+)上使用表单时,文本框内 ... -
HTML5实现全屏API【进入和退出全屏】
2014-05-04 11:21 4288现在主流浏览器基本上实现了全屏效果,但是不同浏览器实现不一样 ... -
CSS实现箭头效果
2013-09-23 15:26 1911有时候网页中使用箭头以增强效果,一般的做法是使用图片,今天我 ... -
IE6透明PNG解决方案
2013-09-17 19:31 2005IE6不支持PNG-24图片一直困扰很多人,但是可以通过I ... -
清除HTML之间的空白节点
2013-09-01 16:57 5706HTML之间的空白节点,会影响HTML排版,清除空白节点除了 ... -
attachEvent 中this指向
2013-09-01 16:45 1517IE中使用的事件绑定函数与Web标准的不同,而且this指向 ... -
十六制作颜色转RGB格式
2013-09-01 16:15 1344十六制作颜色转RGB格式: function toR ... -
kingwell Calendar V1.0 日历时间组件
2013-08-07 09:10 1360项目中经常要使用日历时间插件,网上也有很多很优秀的插件,但是 ... -
HTML5获取地理位置信息并在Google Maps上显示
2013-08-07 09:08 1127使用HTML5 navigator geol ... -
HTML5 Canvas实战——HTML5 Canvas时间效果
2013-08-07 09:04 1568HTML5 Canvas实战 function cl ... -
JS window.name跨域封装
2013-08-07 09:02 1926function CrossDomainName(targe ... -
前端开发工程师如何在2013年里提升自己【转】
2013-07-10 10:33 856大部分人非常在意个人在技术上的提升。但是保持对新技术的了解是 ... -
动态加载javascript增强版
2013-04-21 10:25 1615我们经常使用动态加 ... -
jQuery性能优化的28个建议 (转)
2013-04-20 12:08 879我一直在寻找有关jQuery ... -
封装JSONP
2013-04-01 13:06 5006我们经常遇到JS 跨域的问题,跨域的解决方案有很多,JSO ... -
HTML5 Web Storage
2013-03-21 11:56 2000体验了一下HTML5 在HTML5中,除了Canvas元素 ...
相关推荐
-- 弹出框 --> <link rel="stylesheet" href="__PUBLIC__/css/sweetalert.css"> <!-- 弹出框 --> <script type="text/javascript" src="__PUBLIC__/wxparent/js/sweetalert-dev.js"> swal({ title: "", text: res...
首先,最基本的alert弹出框是JavaScript原生的`window.alert()`函数,它会显示一个包含指定文本的不可定制的对话框。然而,为了提供更丰富的用户体验和设计灵活性,开发者通常会选择使用更高级的方法。例如,使用...
标题“alert和confirm弹出框样式美化.zip”提示我们这个压缩包包含的是关于如何自定义和美化`alert`和`confirm`弹出框的内容,使它们更加符合网页的整体设计风格。 描述中提到,这个资源可以让我们自定义弹出框的...
本教程将介绍如何通过自定义CSS和JavaScript来美化`alert`和`confirm`弹出框,实现更个性化的界面效果,而无需依赖浏览器的默认样式。 首先,我们不再直接使用`window.alert()`和`window.confirm()`方法,而是创建...
`alert` 函数的基本语法是 `alert(message)`,它会弹出一个只有一个按钮的对话框,用户点击后,对话框关闭,程序继续执行。`message` 参数是向用户显示的文本字符串。 `confirm` 函数的语法是 `var result = ...
jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理以及动画效果,因此使用jQuery封装弹出框可以大大提高开发效率。 在描述中提到,你已经用jQuery实现了一个自定义的弹出框,并且只需引入相关的CSS和JS...
-- 弹出框 --> <link rel="stylesheet" href="__PUBLIC__/css/sweetalert.css"> <!-- 弹出框 --> <script type="text/javascript" src="__PUBLIC__/wxparent/js/sweetalert-dev.js"> swal({ title: "", text: res...
1.代替window.open、window.alert、window.confirm;提供良好的用户体验; 2.水晶质感,设计细腻,外观漂亮; 3.兼容ie6/7/8、firefox2/3、Opera;弹出框在ie6下不会被select控件穿透; 4.无外部css文件,引用Dialog...
“窗口”(window)在这里指的是模拟操作系统窗口的行为,比如弹出框可以被最大化,以占据整个浏览器视口,或者可以被最小化或恢复到原始大小。实现这些功能需要对CSS和JavaScript有深入理解,特别是涉及到窗口状态...
在现代网络环境中,弹出广告、提示信息、警告框等可能会干扰用户的浏览体验,尤其是JavaScript弹出的Alert警告框,它们可以打断用户操作流程,有时还可能被用于网络钓鱼或恶意软件活动。因此,开发社区中逐渐出现了...
5. **测试**:在自动化测试中,可能需要避免`alert`的弹出干扰测试流程,重写后可以控制是否显示。 需要注意的是,重写系统方法可能会对第三方库或未知代码产生影响,因此在实际项目中要谨慎使用。如果只是为了在...
在IT行业中,自定义Alert提示框是一个常见的需求,特别是在开发用户界面时,为了提供更加个性化和符合品牌风格的用户体验。通常,系统自带的alert对话框样式单一,难以满足设计和功能上的扩展要求。本篇文章将深入...
本篇文章将深入探讨`popup`弹出框的实现方式、设计原则以及JavaScript在创建弹出框中的作用。 一、JavaScript与Popup弹出框 JavaScript(JS)是网页开发中的重要脚本语言,它可以动态地改变网页内容和行为,包括...
本篇文章将详细讲解如何创建和使用JavaScript中的不同类型的弹出框,包括按钮事件触发的弹出框和链接事件触发的弹出框。 一、基本弹出框:alert(), confirm(), prompt() 1. alert():警告对话框 `alert()` 函数...
在JavaScript中,我们可以使用`window.alert()`、`window.confirm()`或`window.prompt()`方法来创建弹出框。`alert()`用于显示警告对话框,一般只包含一个“确定”按钮;`confirm()`则会显示一个确认对话框,带有...
本文将深入探讨三种主要的弹出框类型:AlertDialog、PopupWindow以及基于Activity的自定义弹出框。 首先,我们来谈谈**第一种类型的弹出框:AlertDialog**。AlertDialog是安卓系统内置的一种对话框,提供了标准的...
然而,方案一存在一个问题:在某些设备(如小米手机)上,系统默认可能禁止了此类弹出框。为了解决这个问题,可以采用方案二,即通过启动一个主题设置为`Theme.Dialog`的Activity来模拟对话框效果,如下: ```java ...
1. **JavaScript** 和 **jQuery**:通过调用浏览器的JavaScript API,例如`window.alert()`,`window.confirm()`和`window.prompt()`,可以实现基本的弹出框功能。更复杂的对话框可以通过jQuery UI的Dialog插件或...
而“经典弹出对话框”则暗示了这个自定义对话框可能沿用了传统对话框的基本结构,如一个中心显示的提示信息,以及一个或多个操作选项。 在提供的压缩包文件中,有两个主要文件: 1. `main.html`:这是HTML文件,它...
在JavaScript(JS)中,实现自动消息弹出框是一项常见的任务,这通常涉及到网页的交互性和用户体验。消息弹出框可以用于提示用户信息、警告、确认操作或接收用户输入。以下是一个详细的步骤来阐述如何使用JavaScript...