“Lightbox”是一个别致且易用的图片显示效果，它可以使图片直接呈现在当前页面之上而不用转到新的窗口。
类似于WinXP操作系统的注销/关机对话框，除去屏幕中心位置的对话框，其他的区域都以淡出的效果逐渐变为银灰色以增加对比度，此时除了对话框内的表单控件，没有其他区域可以获取焦点。效果演示
Lightbox JS
典型也是最常见的一个，目前2.0 版，不过似乎只能显示图片而已。
ThickBox
这个也是很常见，可以显示图片、网页，并且可指定方框的大小，推荐。
Greased Lightbox
提供装在浏览器的扩充套件，平常看图片时就会有 Lightbox 效果。
GreyBox
这个就厉害了，除了可以用于图片和网页外、连 flash、影片都可以显示在 Lightbox 弹出的方框里面。
Lightbox Gone Wild!
也是可以显示网页、图片，效果还不错。
在ASM系统中经常用到的一些JS，打算在接下来准备开发的一个系统中用到。代码内容如下：
C#代码
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Text;
/// <summary>
/// JavascriptHelper 的摘要说明
/// </summary>
public static class JS
{
public static Page CurrPage
{
get
{
return HttpContext.Current.Handler as Page;
}
}
/// <summary>
/// 向一个控件添加一个确认对话框.(如果取消则不提交服务器端)
/// </summary>
/// <param name="control">需要添加确认的控件</param>
/// <param name="message">对话框中显示的文本</param>
public static void AddConfirmToControl(IAttributeAccessor control, string message)
{
message = message.Replace("\\", "\\\\").Replace("\n", "\\n").Replace("\‘", "\\’");
control.SetAttribute("onclick", "return confirm(‘" + message + "‘);");
}
/// <summary>
/// 直接关闭页面(忽略其他提示)
/// </summary>
public static void ClosePage()
{
HttpContext.Current.Response.Write(@"<script>window.opener=null;window.close();</script>");
HttpContext.Current.Response.End();
}
/// <summary>
/// 给控件增加客户端属性
/// </summary>
/// <param name="control">控件</param>
/// <param name="attributeName">属性名</param>
/// <param name="attributeValue">属性值</param>
/// <example>
/// JS.AddAttributesToControl(TextBox1,"oncopy","return false;"); –生成的客户端html中增加 oncopy="return false;"
/// </example>
public static void AddAttributesToControl(IAttributeAccessor control, string attributeName, string attributeValue)
{
control.SetAttribute(attributeName, attributeValue); [...]
通过JS自动调节iframe的高度，以适应页面高度变化。
刚在ASM中用了这段JS，效果很perfect。
以下是代码：
XML/HTML代码
<iframe src="App_AddApp.aspx?<%=query %>" id="frmFlowAdd" frameborder="0" style="width: 100%;
aho: expression(autoResize())" allowtransparency="true"></iframe>
在父页面加上以下JS代码：
JavaScript代码
<script language="javascript" type="text/javascript">
function autoResize()
{
try
{
document.all["frmFlowAdd"].style.height = frmFlowAdd.document.body.scrollHeight;
}
catch(e){}
}
</script>
PS：
做ASM也有一个来月了，里面有些JS还是蛮不错的，Copy出来，留着以后用。
1.身份证的验证
2.邮政编码验证
3.手机号码验证
4.电话号码验证
5.E-MAIL校验函数
6.判断是否为ASCII码
7.检查是否为数值类型字符串
8.检查是否为整数类型字符串
9.判断是否为标准型式日期(不包含时间)
10.判断是否超过限定的长度，汉字为两位，ASCII为一位
11.判断是否为整型数据
12.判断是否为数值型数据
13. 判断两个时间是否相等
14.纯英文字母字符串校验函数
15.英文数字字符串校验函数
1.身份证的验证
JavaScript代码
/*
身份证的验证
*/
function isIdCardNo(num)
{
if (isNaN(num)) {alert("输入的不是数字！"); return false;}
var len = num.length, re;
if (len == 15)
re = new RegExp(/^(d{6})()?(d{2})(d{2})(d{2})(d{3})$/);
else if (len == 18)
re = new RegExp(/^(d{6})()?(d{4})(d{2})(d{2})(d{3})(d)$/);
else {alert("输入的数字位数不对！"); return false;}
var a = num.match(re);
if (a != null){
if (len==15){
var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]);
var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
}
else{
var D = new Date(a[3]+"/"+a[4]+"/"+a[5]);
var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
}
if (!B) {alert("输入的身份证号 "+ a[0] +" 里出生日期不对！"); return false;}
}
return true;
}
2.邮政编码验证
JavaScript代码
/*
邮政编码验证
*/
function checkPostcode(value){
if (!isChars(value))
return false;
var reg=/^[0-9]{6}$/;
if(reg.test(value))
{
return true;
}
else
{
return false;
}
}
3.手机号码验证
JavaScript代码
function IsMobile(value)
{
//兼容号码段为：134-139和15号码段
return (new RegExp(/^(((d{3}))|(d{3}-))?((13[4-9]{1}d{8})|(15d{9}))$/).test(value));
}
4.电话号码验证
JavaScript代码
//电话号码验证
function isTel(value)
{
//"兼容格式: 国家代码(2到3位)-区号(2到3位)-电话号码(7到8位)-分机号(3位)"
//return (/^(([0+]d{2,3}-)?(0d{2,3})-)?(d{7,8})(-(d{3,}))?$/.test(this.Trim()));
return (new RegExp(/^(([0+]d{2,3}-)?(0d{2,3})-)(d{7,8})(-(d{3,}))?$/).test(value)); [...]
[document对象]
该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档。
属性
alinkColor 活动链接的颜色(ALINK)
anchor 一个HTMI锚点,使用<A NAME=>标记创建(该属性本身也是一个对象)
anchors array 列出文档锚点对象的数组(<A NAME=>)(该属性本身也是一个对象)
bgColor 文档的背景颜色(BGCOLOR)
cookie 存储于cookie.txt文件内的一段信息,它是该文档对象的一个属性
fgColor 文档的文本颜色(<BODY>标记里的TEXT特性)
form 文档中的一个窗体(<FORM>)(该属性本身也是一个对象)
forms anay 按照其出现在文档中的顺序列出窗体对象的一个数组(该属性本身也是一个对象)
lastModified 文档最后的修改日期
linkColor 文档的链接的颜色,即<BODY>标记中的LINK特性(链接到用户没有观察到的文档)
link 文档中的一个<A HREF=>标记(该属性本身也是一个对象)
links array 文档中link对象的一个数组,按照它们出现在文档中的顺序排列(该属性本身也是一个对象)
location 当前显示文档的URL。用户不能改变document.location(因为这是当前显示文档的位置)。但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象
referrer 包含链接的文档的URL,用户单击该链接可到达当前文档
title 文档的标题((TITLE>)
vlinkColor 指向用户已观察过的文档的链接文本颜色,即<BODY>标记的VLINK特性
方法
clear 清除指定文档的内容
close 关闭文档流
open 打开文档流
write 把文本写入文档
writeln 把文本写入文档,并以换行符结尾
[window对象]
它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口。
属性
defaultStatus 缺省的状态条消息
document 当前显示的文档(该属性本身也是一个对象)
frame 窗口里的一个框架((FRAME>)(该属性本身也是一个对象)
frames array 列举窗口的框架对象的数组,按照这些对象在文档中出现的顺序列出(该属性本身也是一个对象)
history 窗口的历史列表(该属性本身也是一个对象)
length 窗口内的框架数
location 窗口所显示文档的完整(绝对)URL(该属性本身也是一个对象)不要把它与如document.location混淆,后者是当前显示文档的URL。用户可以改变window.location(用另一个文档取代当前文档),但却不能改变document.location(因为这是当前显示文档的位置)
name 窗口打开时,赋予该窗口的名字
opener 代表使用window.open打开当前窗口的脚本所在的窗口(这是Netscape Navigator 3.0beta 3所引入的一个新属性)
parent 包含当前框架的窗口的同义词。frame和window对象的一个属性
self 当前窗口或框架的同义词
status 状态条中的消息
top 包含当前框架的最顶层浏览器窗口的同义词
window 当前窗口或框架的同义词,与self相同
方法
alert() 打开一个Alert消息框
clearTimeout() 用来终止setTimeout方法的工作
close() 关闭窗口
confirm() 打开一个Confirm消息框,用户可以选择OK或Cancel,如果用户单击OK,该方法返回true,单击Cancel返回false
blur() 把焦点从指定窗口移开(这是Netscape Navigator 3.0 beta [...]
DOM是文档对象化模型（Document Object Model）的简称。使用过DHTML对象模型的开发者一定能非常熟练地操作HTML页面上的每个标记内容，但如果借助DOM技术，我们就可以通过更加直接而且简易的方式达到同样的目的。
概要
DOM技术被Internet Explorer 5.0及以上版本的浏览器所支持，它采取一种非常直观且一致的方式将HTML文档进行模型化处理，并借此提供访问、导航和操作页面的简易编程接口。通过DOM技术，我们不仅能够访问和更新页面的内容及结构，而且还能操纵文档的风格样式。DOM由W3C组织所倡导，这样，大多数浏览器都将最终支持这项技术。
DOM和DHTML对象模型的比较
可以这么说，DOM是从DHTML对象模型发展而来的。但更准确而言，DOM更象是对DHTML对象模型进行了根本变革的产物。
借助DHTML对象模型技术，我们能够单独地访问并更新HTML页面上的对象，每个HTML标记通过它的ID和NAME属性被操纵，每个对象都具有自己的属性、方法和事件，通过方法操纵对象，通过事件触发因果过程。
DOM则要比DTHML对象模型功能更全面，它提供了一个对整个文档的访问模型，而不仅仅再局限于单一的HTML标记（Tag）范围内。DOM将文档描绘为一个树形（Tree）结构，Tree的每个节点表现为一个HTML标记或者HTML标记内的文本项。树形结构精确地描述了HTML文档中标记间以及文本项间的相互关联性，这种关联性包括child（孩子）类型、parent（双亲）类型和兄弟（sibling）类型。
使用DHTML对象模型访问和更新HTML页面内容时，不可避免地需要查询相关技术手册。因为HTML对象很多，每个HTML对象又有很多的属性、方法和事件。但是采用DOM技术访问和更新HTML页面内容时，任何手册都可以放在一边了。首先查看一下HTML源代码，推算出页面的Tree结构模型；然后，按照层次结构关系操纵需要的属性。比如要更新页面上的文本项内容，如果采用DTHML对象模型，需要使用到innerHTML属性，但必须要注意并不是所有的HTML对象都支持innerHTML属性；如果采用DOM技术，只要修改相关Tree节点都具有的nodeValue属性值即可。
DOM技术使我们可以方便地沿着文档的树型结构在上、下以及一侧方向做节点导航，从页面的任何地方开始，使用child、parent或者sibling三种关联性组成的表达式代表页面的另外地方。而DTHML对象模型不包含Tree结构，所以也就不具备页面对象的相互导航功能。当我们从一个标记对象开始时，不可能用关联表达式来表达相近的标记。虽然对于某些标记，比如 <TABLE> ，DHTML对象模型可以提供特殊的属性和方法存取相关内容，但实现方式和效果远不如DOM技术显得一致化和直观化。采用DTHML对象模型访问<TABLE> 中的单元（cell）内容时，首先要查询手册确定单元的坐标值i、j，然后再通过表达式tableObj.rows[i].cells[j].innerHTML实现访问。但对于DOM来说，访问TABLE每个单元的内容将变得非常简单，只需要建立一个节点导航表达式就可以。
另外，DOM技术允许我们操纵文档的Tree结构，这包括创建新节点（nodes）、删除存在的节点以及在Tree中移动节点。实际上，这就是执行创建新标记（tags）、删除存在的标记以及在文档中移动标记的过程。DTHML对象模型则不允许更改文档结构，我们只能操纵现有的对象。
与DHTML对象模型相比较，DOM只有一个缺憾：DOM不能支持事件处理，而DTHML对象模型对于文档对象则拥有一个广泛的事件处理功能。
DOM提供了一套属性用于导航、访问和更新文档内容，其中包括只读类型的属性和可读写类型的属性。
下表是只读类型的属性：
DOM对象属性
返 回 值
FirstChild
返回一个对象（Object），表示第一个孩子节点（child node）。
LastChild
返回一个对象（Object），表示最后一个孩子节点（child node）。
NextSibling
返回一个对象（Object），表示下一个相邻的兄弟节点。
NodeName
返回节点对应的HTML标记。比如：P，Script。对应文本项节点，返回#text。
nodeType
返回节点的类型，
1表示此节点是标记（tag），
2表示属性（attribute），
3表示文本项。
parentNode
返回一个对象（Object），表示当前节点的双亲节点（parent node）。
previousSibling
返回一个对象（Object），表示前一个相邻的兄弟节点。
specified
返回一个布尔型变量（Boolean），表示是否设置了属性值（attribute）。
下表是可读写类型的属性：
DOM对象属性
返 回 值
data
返回一个字符串，表示文本项节点的值。如果是其他类型节点，返回undefined。
nodeValue
返回一个字符串，表示文本项节点的值。如果是其他类型节点，返回null。
下表是DOM中相关属性集合：
DOM对象属性
返 回 值
attributes
表示节点的属性集合，通过id来访问，比如attributes.id。
childNodes
表示节点的孩子节点集合，通过数组索引方式访问，比如：childNodes[2]。
[小技巧]:这些属性和方法只是一些常用的,如果你想要获得更多的方法或属性你可以在vs.net IDE中用建一个html tag,然后在<script></script>中用vs.net ide的快捷键调出所有的的dom方法和属性.
先来看一张简单的文档树
很明显树的顶层节点是NodeA节点,接下来可以通过指定的合适节点移动到树中的任何点,结合以下的代码你可以更好的了解这棵树节点间的相互关系:
NodeA.firstChild = NodeA1
NodeA.lastChild = NodeA3
NodeA.childNodes.length = 3
NodeA.childNodes［0］ = NodeA1
NodeA.childNodes［1］ = NodeA2
NodeA.childNodes［2］ = NodeA3
NodeA1.parentNode = NodeA
NodeA1.nextSibling = NodeA2
NodeA3.prevSibling = NodeA2
NodeA3.nextSibling = null
NodeA.lastChild.firstChild = NodeA3a
NodeA3b.parentNode.parentNode = NodeA
DOM定义对操作一个文档对象的节点结构提供了实用的方法,它提供了像执行对象插入,更新,删除,克隆等这些常用的方法。
insertBefore()–在参考子节点之前插入一个新的子节点.如果参考的子节点为null,则新的子节点将作为调用节点的最后一个子节点插入。
replaceChild()–在childNodes集合种使用指定的newChild来代替oldChild;如果代替成功,则返回oldChild;如果newChild是null,则只需删除oldChild即可。
removeChild()–从节点的ChildNodes集合中删除removeChild指定的节点,如果删除成功,则返回删除的子节点。
appendChild()–添加一个新节点到childNodes集合的末尾,如果成功,则返回新节点。
cloneNode()–创建一个新的、复制的节点,并且如果传入的参数是true时,还将复制子节点,如果节点是一个元素,那么还将复制相应属性,返回新的节点。
为了在一棵文档树中访问或者建立一个新的节点,可以用下面这些方法:
getElementById()
getElementsByTagName()
createElement()
createAttribute()
createTextNode()
注意:在一个页面中只有一个文档对象,除了getElementsByTagName()外,其它方法均只能通过document.methodName()调用。
再看一下下面这个例子:
XML/HTML代码
<html>
<head>
<title></title>
</head>
<body>
<p>This is a sample paragraph.</p>
<SCRIPT LANGUAGE="JavaScript">
<!–
alert(document.documentElement.lastChild.firstChild.tagName);
//–>
</SCRIPT>
</body>
</html>
结果将会显示"P",下面是一些解释
document.documentElement – gives the page’s HTML tag.
lastChild – gives the BODY tag.
firstChild – gives the first [...]
1.判断select选项中 是否存在value="paravalue"的item
2.向select选项中 加入一个item
3.从select选项中 删除一个item
4.修改select选项中 value="paravalue"的text为"paratext"
5.设置select中text="paratext"的第一个item为选中
6.设置select中value="paravalue"的item为选中
7.得到select的当前选中项的value
8.得到select的当前选中项的text
9.得到select的当前选中项的index
10.清空select的项
============================================
1.判断select选项中 是否存在value="paravalue"的item
function jsselectisexititem(objselect,objitemvalue)
{
var isexit = false;
for(var i=0;i<objselect.options.length;i++)
{
if(objselect.options[i].value == objitemvalue)
{
isexit = true;
break;
}
}
return isexit;
}
2.向select选项中 加入一个item
function jsadditemtoselect(objselect,objitemtext,objitemvalue)
{
//判断是否存在
if(jsselectisexititem(objselect,objitemvalue))
{
alert("该item的value值已经存在");
}
else
{
var varitem = new option(objitemtext,objitemvalue);
// objselect.options[objselect.options.length] = varitem;
objselect.options.add(varitem);
alert("成功加入");
}
}
3.从select选项中 删除一个item
function jsremoveitemfromselect(objselect,objitemvalue)
{
//判断是否存在
if(jsselectisexititem(objselect,objitemvalue))
{
for(var i=0;i<objselect.options.length;i++)
[...]
Recent Comments