WEB|WAP|网站建设|网站设计|网站制作|网站开发 - JS

12种ajax弹出层（背景变灰）

a@b.com (shine) — Thu, 15 Jul 2010 14:37:30 +0800

12种ajax弹出层,他们功能都很强大,能够给编程人员省下宝贵的时间,得到更多的视觉享受.
闲话不多说,直接进入主题吧.

Thickbox - 基于 jQuery，支持 AJAX，轻量级的而且比较高效。支持图片与HTML内容。大小约为 40k，目前还可作为 WordPress 的插件使用。这个js的优点在于与，父级的原页面滚动条随鼠标滚动的时候，弹出的层并不移动，而始终处于浏览器的固定位置。

GreyBox - 创建 iframe 的弹出界面，可使用图片、HTML 及 URL，大小约为 20k。

这个弹出层效果有固定位置与随父级的滚动条滚动两种模式

GreyBox Redux - 基于 jQuery，比 GreyBox 更轻。

这个js的的弹出效果增加了自上而下缓慢滑出的效果。

Lightbox v2.0 - 最初是为了显示图片设计的，使用了 prototype 和 sciptaculous，所以有些沉重，但对于图片来说很好用。

缺点就是弹出层出来后，滚动鼠标滚轮，父级页面与弹出内容同事随着滚动条，只有点击关闭按钮才能关闭弹出层，对于弹出图片较大的时候，用户体验方面相对比较不友好，需要移动页面找到关闭按钮才行。

Lightbox Gone Wild - modal 模式窗口的 lightbox，可使用 html、表单及图片，也是基于 prototype 的。

这个效果的好处在于，弹出内容是图片时，点击图片本身既可以关闭弹出层，非常方便。

Multi-faceted LIghtbox - 又一个基于 prototype 的，不过这个为各种可用于 lightbox 的数据类型提供了选项。

Leightbox - 和 Lightbox Gone Wild 很相似，只是 Leightbox 以 html 方式存放内容，所以可以被搜索引擎索引到。

除了弹出内容符合seo以外，这个效果的一大特点是，弹出后父级页面的滚动被禁用，而以弹出层的滚动为主，这样在弹出的窗口有较多内容时，滚动鼠标滚轮时，就不会同时滚动父级页面，而影响正常浏览。

xilinus - 使用简单，基于 prototype，很容易定制，可使用多种内容选项。

Lightbox Plus - 可以自动根据窗口的大小缩放图片。

Suckerfish Hover Lighbox - 和传统的 lightbox 不一样，它在打开 lightbox 的时候，还可以点击访问页面上的其它元素。

Litebox - 这是 Lightbox 的另一个版本，代码量减少了，使用了 moo.fx 和 prototype-lite，如果页面需要减肥的话，可以选择这个。

LITBox - 使用类写的 lightbox，所以可以创建多个对象实例，并且单独进行控制。基于 Thickbox。

限制复选框的可选数

a@b.com (shine) — Thu, 15 Jul 2010 13:33:19 +0800

html－www.hzzhit.com

解决png在ie6下透明

a@b.com (shine) — Mon, 12 Jul 2010 12:37:15 +0800

JS验证单选框、复选框

a@b.com (shine) — Tue, 15 Jun 2010 16:46:08 +0800

//验证复选框数组
var flag10=0;
var radio10=document.getElementsByName("leixing[]");
for(var i=0;i {
     if(radio10.item(i).checked==true)
        {
     flag10=1;
           break;
   }
}
if(!flag10){
         alert("请选择复选框！");
         return false;
}
//验证单选框
var flag1=0;
var radio1=document.getElementsByName("siji");
for(var i=0;i {
     if(radio1.item(i).checked==true)
        {
     flag1=1;
           break;
   }
}
if(!flag1){
         alert("请选择单选框！");
         return false;
}

js更改img的src 控制图层显示隐藏

a@b.com (shine) — Tue, 15 Jun 2010 11:05:27 +0800

input 无法粘贴

a@b.com (shine) — Fri, 16 Oct 2009 12:20:29 +0800

onpaste="return false" 禁止粘贴

ondragstart="return false" 禁止鼠标在网页上拖动

ondragenter 当用户拖曳对象到一个合法拖曳目标时在目标元素上触发

输入框输入数值自动计算JS代码

a@b.com (shine) — Tue, 13 Oct 2009 21:20:51 +0800

window.open

a@b.com (shine) — Sun, 09 Aug 2009 20:30:08 +0800

　window.open ("page.html", "newwindow", "height=100, width=400, toolbar= no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,top=100,left=300")

　　height:page.html的高度

　　width:page.html的宽度

　　top:page.html距离屏幕顶部的距离

　　left:page.html距离屏幕左边的距离

　　top和left就是给page.html设定位置的

　　window.open() 方法

　　语法：window.open(pageurl,name,parameters);

　　window对象的open()方法用于创建一个新的窗口实例，新创建的窗口的外观由参数：parameters指定。新窗口中打开的文档由参数： pageurl指定。系统能够根据参数：name确定的名称访问该窗口。

　　下表为parameters参数表：

　　参数衩始值说明

　　alwaysLowered yes/no 指定窗口隐藏在所有窗口之下。

　　alwaysRaised yes/no 指定窗口浮在所有窗口之上。

　　dependent yes/no 指定打开的窗口为父窗口的一个了窗口。并随父窗口的关闭而关闭。

　　directions yes/no 指定Navigator 2和3的目录栏是否在新窗口中可见。

　　height pixel value 设定新窗口的像素高度。

　　hotkeys yes/no 在没有菜单栏的新窗口设置安全退出热键。

　　innerHeight pixel value 设置新窗口中文档的像素高度。

　　innerWidth pixel value 设置新窗口中文档的像素宽度。

　　location yes/ no 指明位置栏在新窗口中是否可见。

　　menubar yes /no 指明菜单栏在新窗口中是否可见。

　　outerHeight pixel value 设定窗口（包括装饰边框）的像素高度。

　　outerWidth pixel value 设定窗口（包括装饰边框）的像素宽度。

　　resizable yes /no 指明新窗口是否可以调整。

　　screenX pixel value 设定新窗口离屏幕边界的像素长度。

　　screenY pixel value 设定新窗口离屏幕上边界的像素长度。

　　scrollbars yes /no 指明滚动栏在新窗口中是否可见。

　　titlebar yes /no 指明菜单题目栏在新窗口是否可见。

　　toolbar yes /no 指明工具栏在新窗口中是否可见。

　　Width pixel value 设定窗口的像素宽度。

　　z-look yes /no 在文档中包含各个标签的数组。

　　fullscreen yes / no 打开的窗体是否进行全屏显示

　　left pixel value 设定新窗口距屏幕左方的距离

　　top pixel value 设定新窗口距屏幕上方的距离

　　例子:

　　window.open函数

二级省市联动JS代码

a@b.com (shine) — Fri, 31 Jul 2009 22:57:56 +0800

调用：

JavaScript中正则表达式的使用

a@b.com (shine) — Sun, 14 Jun 2009 22:45:14 +0800

在JavaScript 1.2版以后，JavaScript也支持正则表达式。
　　1、replace
　　replace在一个字符串中通过正则表达式查找替换相应的内容。replace并不改变原来的字符串，只是重新生成了一个新的字符串。如果需要执行全局查找或忽略大小写，那么在正则表达式的最后添加g和i。
例：

结果是："oranges are round, and oranges are juicy."
例：

结果是："Twas the night before Christmas..."
例：

结果是："Smith, John".
　　2、search
search通过正则表达式查找相应的字符串，只是判断有无匹配的字符串。如果查找成功，search返回匹配串的位置，否则返回-1。
search(regexp)

　　3、match
　　match方法执行全局查找，查找结果存放在一个数组里。
例一：

显示结果：Chapter 3.4.5.1,Chapter 3.4.5.1,.1
例二：

显示结果D, d.

　　四、示例
1 、判断数字的正确性
<%@ Language=VBScript %>

判断数字的正确性
<%
Dim strTemp
strTemp = CStr(Request.Form("inputstring"))
If strTemp = "" Then strTemp = "0"
%>

原始字符串	<%= strTemp %>
数字	<%=isNumeric(strTemp)%>
非负数字	<%=isUnsignedNumeric(strTemp)%>
整数	<%=isInteger(strTemp)%>
非负整数()	<%=isUnsignedInteger(strTemp)%>

2、判断Email地址的正确性
<%
Function isemail(strng)
isemail = false
Dim regEx, Match
Set regEx = New RegExp
regEx.Pattern = "^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$"
regEx.IgnoreCase = True
Set Match = regEx.Execute(strng)
if match.count then isemail= true
End Function
%>