“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> [...]
通过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]; } [...]
[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对象] 它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口。 [...]
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> [...]
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) { [...]
Recent Comments