DOM操作、遍历以及动态CSS操作能为的网站的最终用户创建更敏捷的体验,而利用这些的最典型的应用就是图库了。目前,浏览器功能越来越强大,动态脚本和功能也日臻完善,而这种提升使得一些高质量的图库相继面世。其中Lightbox和ThickBox是其中的典型代表,它们能够提供的行为包括...
everyinch
11年前 (2013-12-17) 3760℃
0喜欢
本文的目的是验证整个表单或单个字段并动态地显示错误信息。实现表单动态验证的方法有两种。第一种方法是HTML DOM规范的组成部分,即所有的<form>元素都有一个elements的属性,这个属性是一个包含表单所有字段的数组,使用这个数组就可以遍历所有可能的字段,并检查...
everyinch
11年前 (2013-12-16) 3367℃
0喜欢
增加客户端的表单验证可以为用户提供更快的体验,但客户端验证永远不应该取代服务器端的验证,而只是辅助和增强。因此,为页面增加客户端验证是学习JavaScript分离式编程的不错案例。
在开始表单脚本编程之前,需要制作好表单并确保它能按要求工作。下面的表单示例使用了语义化的XHTML...
everyinch
11年前 (2013-12-16) 3302℃
1喜欢
拖放应该是浏览器中最流行的用户方式之一。为探索拖放,选择了由Aaron Boodman常见的DOM-Drag库,这个库提供了很多易用的特性,包括:
□ 拖放处理函数:可以在拖放ige父元素的同时拖放另一个子元素,这对创建类似窗口的界面十分有用
□ 回调函数:可以监听特定的事件,比...
everyinch
11年前 (2013-12-15) 4264℃
0喜欢
浏览器的视口(viewport)可以看作是浏览器滚动条内的一切东西。视口还包括的部分组件包括:视口窗口、页面和滚动条等。获取这些组件正确的位置和尺寸,对于开发很长的内容(比如自动滚动和聊天室等)的交互来说是必须的。
1. 页面尺寸
首先需要了解的属性是当前页面的高度和宽度。下面的...
everyinch
11年前 (2013-12-15) 4118℃
0喜欢
获取鼠标位置是编写拖放操作和上下文菜单的基础,这些功能都需要JavaScript与CSS的配合才能实现。
1. 获取鼠标光标相对于整个页面的x和y位置。因为只能从鼠标事件中才能获得鼠标坐标的信息,所以需要鼠标事件作为参数。
// 鼠标光标的水平位置
function get...
everyinch
11年前 (2013-12-15) 3267℃
0喜欢
有了构建动态页面的基本能力,接下来实现Web应用程序中最流行、最显著的效果:动画。巧妙地使用动画可以为用户提供十分有用的反馈,可以把用户的注意力吸引到指定的元素上来。
滑动
第一个动画是把一个隐藏元素(display:none)显示出来。即将指定的元素在短时间内随着高度的增加而逐...
everyinch
11年前 (2013-12-15) 2976℃
0喜欢
利用元素的可见性,可以创建一些动画效果,提供基本的用户交互能力。CSS哟两种方式来隐藏元素:
□ visibility : 切换可见性的同时保持元素流属性的相关影响。意思是,即时隐藏元素,元素的位置依旧会保留。两个值:visible 和 hidden
□ display : 属性...
everyinch
11年前 (2013-12-14) 3145℃
0喜欢
获取元素的高度和宽度可以很容易,也可以很困难,取决于不同的场合。在大多数情况下,仅需要利用getStyle函数就可以得到元素的当前高度和宽度。
// 获取元素的真实高度
function getHeight( elem ) {
return parseInt( g...
everyinch
11年前 (2013-12-14) 2749℃
0喜欢
使用位置、尺寸和可见性基本就可以在现代浏览器中模拟绝大多数常见的用户效果了。元素的位置是实现交互效果的基础。在CSS中,元素使用偏移量来定位,它是通过元素到它父元素的左上角的偏移量来计算。CSS的坐标系如下图
页面上的所有元素都有left(水平位置)和top(垂直位置)的偏移量...
everyinch
11年前 (2013-12-13) 3619℃
0喜欢
JavaScript与CSS之间的交互是现代JavaScript编程的支柱之一,运用某型形式的动态交互几乎是所有现代Web应用程序的必备条件。这样可以使页面加载时间更短。JavaScript与CSS之间的交互以及事件的动态绑定方法,它们构成了创建无缝且强大用户体验的基础。
访问和...
everyinch
11年前 (2013-12-12) 2853℃
0喜欢
分离地、自然地编写JavaScript程序是一个相当重要的目标。使代码可以在现代浏览器中工作,而对于古老的浏览器可以做到预留退路。如果正确地使用了JavaScript脚本,就可以让访问者在他们的浏览器不支持JavaScript的情况下仍然能顺利地浏览网站,这就是所谓的平稳退化(g...
everyinch
11年前 (2013-12-11) 2691℃
0喜欢
1. 鼠标事件:可以分成两类:追踪鼠标当前定位( mouseover, mouseout ) 的事件和追踪鼠标点击( click, mousedown, mouseup ) 的事件
2. 键盘事件:有3种类型:keydown, keyup 和 keypress
3. UI事件:追...
everyinch
11年前 (2013-12-10) 3052℃
0喜欢
有3中事件注册方式,传统的行内方式,IE方式和W3C方式。
传统绑定
传统绑定为需要绑定的DOM元素绑定一个函数,作为它的属性。例如:
// 查找 <form> 元素并为它绑定 submit 事件处理函数
document.getElementsByTagNam...
everyinch
11年前 (2013-12-10) 11060℃
0喜欢
事件对象
事件处理函数的一个标准特性是,事件对象包含了上下文信息。例如,当处理键盘事件时可以访问该对象的keyCode属性来获得具体的键值。然而,事件对象在IE的实现与W3C的规范还是有差别。IE使用独立的全局事件对象(window.event),而其它浏览器则使用全局参数。下面...
everyinch
11年前 (2013-12-09) 3042℃
0喜欢