- 博客(42)
- 收藏
- 关注
RSS订阅原创 HTML5 绘制图形【4】
绘制变形图形坐标变换绘制图形的时候，我们可能会想要旋转图形，或对图形使用变形处理，使用Canvas API的坐标轴变换处理功能，可以实现这种效果。在计算机上绘制图形的时候，是以坐标单位为基准来进行图形绘制的。默认情况下，Canvas画布的最左上角对应于坐标轴原点(0, 0)。如果对这个坐标使用变换处理，就可以实现图形的变形处理了。对坐标的变换处理有三种方式：平移使用图形上下文对...
2011-11-08 08:39:36
166
原创 JSF 技术内幕
当浏览器首先连接到http://localhost:8080/faces/index.xhtml时，JSF实现初始化JSF代码并读取index.xhtml页面。这个页面包含诸如h:inputText等JSF标签。每个标签都有一个相关的标签处理程序类。当读取该页面时，执行相应的标签处理程序。JSF标签处理程序彼此协作来构建一棵组件树。组件树是一种数据结构，其中包含JSF页面上所有用户界面元素的J...
2011-11-08 00:41:46
157
原创 JSF 框架服务
下图高度概括了JSF架构。可以看到，JSF框架负责与客户端设备交互，并提供将可视表示、应用程序逻辑和Web应用程序的业务逻辑相连接的工具。但是，JSF的作用域被限制在表示屋。数据库持久性、Web服务和其他后端连接都超出了JSF的作用域。下面列出了JSF框架提供的一些最重要的服务：MVC——所有软件应用程序都允许用户操作某些数据，例如购物车、旅游线路或在某个特定问题领域中需要的任何数据...
2011-11-07 21:32:56
244
原创 JSF 简介
JSF页面当用户制作Facelets页面时，会将JSF标签添加到一个XHTML页面中。一个XHTML页面仅仅是是HTML页面，该页面同时也是符合标准的XML。我们为Facelets页面使用扩展名.xhtml。<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"&...
2011-11-07 20:58:15
193
原创 CSS3 选择器【2】
UI元素状态伪类选择器UI元素状态伪类选择器的共同特征是：指定的样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用。选择器E:hover、E:active和E:focusE:hover选择器用来指定当鼠标指针移动到元素上时元素所使用的样式；E:active选择器用来指定元素被激活（鼠标在元素上按下还没有松开）时使用的样式；E:focus选择器用来指定元素获得光标焦点...
2011-11-07 14:30:17
127
原创 CSS3 选择器【1】
选择器概述选择器是CSS3中一个重要的内容。使用它可以大幅度提高开发人员书写或修改样式表时的工作效率。在CSS3中，提倡使用选择器来将样式与元素直接绑定真情为，这样，在样式表中什么样式与什么元素相匹配变得一目了然，修改起来也方便。不仅如此，通过选择器，我们还可以实现各种复杂的指定，同时也能大量减少样式表的代码书写量，最终书写出来的样式表也会变得简洁明了。CSS3中的属性选择器...
2011-11-06 12:19:10
284
原创 HTML5 绘制图形【3】
绘制渐变图形渐变是指在填充时从一种颜色慢慢过渡到另外一种颜色。绘制线性渐变绘制线性渐变时，需要使用到LinearGradient对象。使用图形上下文对象的createLinearGradient()方法创建该对象。该方法的定义如下：context.createLinearGradient(xStart, yStart, xEnd, yEnd);该方法有四个参数，前两个参数指定渐...
2011-11-05 19:28:30
131
原创 HTML5 绘制图形【2】
使用路径绘制圆形要想绘制其他图形，需要使用路径。同样的，绘制开始时还是要取得图形上下文，然后需要执行如下步骤：开始创建路径；创建图形的路径；路径创建完成后，关闭路径；设定绘制样式，调用绘制方法，绘制路径。也就是说，首先使用路径来勾勒图形轮廓，然后设置颜色，进行绘制。开始创建路径首先，使用图形上下文对象的beginPath()方法，该方法的定义如下：con...
2011-11-04 11:42:25
175
原创 CSS3 模块化结构
CSS3中的模块模块名称功能描述Basic box model定义各种与盒相关的样式。Line定义各种与直线相关的样式。Lists定义各种与列表相关的样式。Hyperlink Presentation定义各种与超链接相关的样式。譬如锚的显示方式、激活时的视觉效果等。Presentation Levels定义页面中元素的不同的...
2011-11-03 19:12:57
486
原创 HTML5 绘制图形【1】
canvas元素基础canvas元素是HTML5中新增的一个重要元素，专门用来绘制图形。在页面上放置一个canvas元素，就相当于在页面上放置了一块“画布”，可以在其中进行图形的描绘。canvas元素只是一块无色透明的区域。需要利用JavaScript编写在其中进行绘画的脚本。在页面中放置canvas元素<!DOCTYPE html><html> <...
2011-11-03 12:48:48
207
原创 HTML5 获取地理位置信息
Geolocation API的基本知识在HTML5中，为window.navigator对象新增了一个geolocation属性，可以使用Geolocation API来对该属性进行访问。window.navigator对象的geolocation属性存在三个方法。取得当前地理位置可以使用getCurrentPosition()方法来取得用户当前的地理位置信息，该方法的定义如下：...
2011-11-01 18:12:04
201
原创 HTML5 使用Web Worker处理线程
基础知识Web Worker是在HTML5中新增的，用来在Web应用程序中实现后台处理的一项技术。使用这个API，用户可以很容易地创建在后台运行的线程（在HTML5中称为worker），如果将可能耗费较长时间的处理交给后台去执行，对用户在前台页面中执行的操作就完全没有影响了。创建后台线程的步骤很简单。只要在Worker类的构造器中将需要在后台线程中执行的脚本文件的URL作为参数，然后创建W...
2011-11-01 09:16:53
216
原创 HTML5 Web Sockets通信
基础介绍Web Sockets是HTML5提供的在Web应用程序中客户端与服务器端之间进行的非HTTP的通信机制。它实现了用HTTP不容易实现的服务器端的数据推送等智能通信技术。使用Web Sockets API可以在服务器与客户端之间建立一个非HTTP的双向连接。这个连接是实时的，也是永久的，除非被显示关闭。这意味着当服务器想向客户端发送数据时，可以立即将数据推送到客户端的浏览器中，无须...
2011-10-29 20:15:25
177
原创 HTML5 跨文档消息传输
基本介绍HTML5提供了在网页文档之间互相接收与发送信息的功能。使用这个功能，只要获取到网页所在窗口对象的实例，不仅同源（域+端口号）的Web网页之间可以互相通信，甚至可以实现跨域通信。要想授受从其他窗口发送来的信息，必须对窗口对象的message事件进行监听，代码如下：window.addEventListener("message", function(event) { ...
2011-10-29 19:11:19
244
原创 HTML5 离线应用程序【2】
applicationCache对象applicationCache对象代表本地缓存，可以用它来通知用户本地缓存中已经被更新，也允许用户手工更新本地缓存。在浏览器与服务器的交互过程中，当浏览器对本地缓存进行更新，将入新的资源文件时，会触发applicationCache对象的updateready事件，通知本地缓存已经被更新。可以利用该事件告诉用户本地缓存已经被更新，用户需要手工刷新页面来得到...
2011-10-27 20:48:56
121
原创 HTML5 离线应用程序【1】
离线Web应用程序介绍在HTML5中新增了一个API，为离线Web应用程序的开发提供了可能性。为了让Web应用程序在离线状态时也能正常工作，就必须要把所有构成Web应用程序的资源文件，诸如：HTML文件、CSS文件、JavaScript脚本文件等放在本地缓存中，当服务器没有和Internet建立连接的时候，也可以利用本地缓存中的资源文件来正常运行Web应用程序。本地缓存与浏览器网页缓存的区...
2011-10-27 14:02:40
116
原创 HTML5 本地数据库
本地数据库的基本概念在HTML5中，添加了很多功能来将原本必须要保存在服务器上的数据转为保存在客户端本地，从而提高了Web应用程序的性能，减轻了服务器端的负担。在这其中，一项非常重要的功能就是数据库的本地存储功能。在HTML5中内置了一个可以通过SQL语言来访问的数据库。现在，这种不需要存储在服务器上的，被称为“SQLLite”的文件型SQL数据库已经得到了广泛的利用，所以HTML5中也采...
2011-10-24 21:03:31
161
原创 HTML5 Web Storage
Web Storage简单使用在HTML5中重新提供了一种在客户端本地保存数据的功能，它就是Web Storage功能。Web Storage功能，就是在Web上存储数据的功能。具体来说，又分为两种：sessionStorage：将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。se...
2011-10-24 15:51:22
161
原创 HTML5 多媒体播放【3】
video元素和audio元素的方法play()方法：使用该方法来播放媒体，自动将元素的paused属性值设置为false。pause()方法：使用该方法来暂停播放，自动将元素的paused属性值设置为true。load()方法：使用该方法来重新载入媒体进行播放，自动将元素的playbackRate属性值变为defaultPlaybackRate属性的值，自动将元素的error的值变...
2011-10-23 10:45:22
479
原创 HTML5 多媒体播放【2】
音频和视频元素的属性这两种元素所具有的属性大致相同，介绍如下：src属性和autoplay属性src属性用于指定媒体数据的URL地址。autoplay属性用于指定媒体是否在页面加载后是否自动播放，使用方法如下：<video src="sample.mov" autoplay="autoplay"></video>perload属性该属性用于指定视...
2011-10-22 21:14:56
289
原创 HTML5 多媒体播放【1】
video与audio元素基础在HTML5中，video元素专门用来播放网络上的视频或电影，而audio元素专门用来播放网络上的音频数据。以audio元素为例，只要把播放音频的URL给指定元素的src属性就可以了，例如：<audio src="demo/test.mp3"> 您的浏览器不支持audio元素！</audio>通过这种方法，可以把指...
2011-10-21 18:58:50
356
原创 jQuery 事件模型【2】
影响事件传播除了将Event实例最常用的属性标准化以外，jQuery还提供标准方法用于影响事件传播方面，带来同样的好处。stopPropagation()方法将防止事件沿着DOM树向上传播，而preventDefault()方法将取消可能引起任何语义操作的示例是，a元素的href链接加载、表单提交以及click事件引起复选框的状态切换。如果想在停止事件传播的同时，取消事件的默认行为，可...
2011-10-18 14:13:25
134
原创 HTML5 拖放API
在HTML5中，已经支持在浏览器与其他应用程序之间的数据互相拖动，同时也大大简化了有关于拖放方面的代码。实现拖放的步骤在HTML5中要想实现拖放操作，至少要经过两个步骤：将想要拖放的对象元素的draggable属性设为true（draggable="true"）。这样才能将该元素进行拖放。另外，img元素和a元素（必须指定href属性）默认允许拖放。编写与拖放有关的事件处理代码。...
2011-10-17 19:43:21
270
原创 HTML5 文件API
在HTML5中，提供了一个关于文件操作的文件API，通过使用这个接口，对于从Web页面上访问本地文件系统的相关处理将会变得十分简单。FileList对象与file对象FileList对象表示用户选择的文件列表。在HTML5中，通过在file控件中添加multiple属性，可以使用控件内一次放置多个文件。控件内的每一个用户选择的文件都是一个file对象，而FileList对象则为这些file...
2011-10-16 18:49:27
138
原创 DWR的engine.js引擎属性及调用
在DWR中，engine.js是用来转换动态生成接口的JavaScript函数，它是DWR的工作引擎，所以一个引用DWR应用的页面都要使用它。<c:set var="base">${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}...
2011-10-15 14:29:44
593
原创 DWR中的JavaScript
DWR根据dwr.xml配置文件或注解中的信息来生成和Java代码类似的JavaScript代码。DWR调用Java代码是同步的，但是创建与Java代码匹配的Ajax远程调用接口需要实现Ajax的异步调用特性，所以DWR通过引入回调函数来解决此问题，当结果被返回时，DWR会调用这个函数。简单的回调函数首先创建一个Java类，代码如下：@RemoteProxypublic c...
2011-10-15 11:20:52
264
原创 DWR支持的反向Ajax技术
反向Ajax的基本概念是客户端不必从服务器获取信息，服务器会把相关信息直接推送到客户端。这样做的目的是解决Ajax传统Web模型所带来的一个限制，即实时信息很难从技术上解决。原因是，客户端必须联系服务器，主动询问是否存在变更，如果有变更就会更新页面（或者页面的一部分）。虽然可以非常快速地完成这个操作，感觉好像是实时的，但是实际上不是的。我们需要的是，服务器联系查看其页面的所有浏览器，并通告所发生的...
2011-10-14 23:27:15
137
原创 DWR的应用过程
编辑Java类package org.lucifer.dwr;import org.directwebremoting.annotations.Param;import org.directwebremoting.annotations.RemoteMethod;import org.directwebremoting.annotations.RemoteProxy;imp...
2011-10-14 12:39:57
93
原创 HTML5 中增强的页面元素
新增的figure元素与figcaption元素figure元素是一种元素的组合，带有可选标题。figure元素用来表示网页上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生任何影响。figure元素所表示的内容可以是图片、统计图或代码示例。figcaption元素表示figure元素的标题，它从属于figure元素，必须书写在figure元素内部，可以书写在figure元...
2011-10-13 12:34:07
245
原创 jQuery 事件模型【1】
jQuery的事件实现，称为jQuery事件模型，它展示如下功能：提供建立事件处理程序的统一方法；允许在每个元素上为每个事件类型建立多个处理程序；采用标准的事件类型名称，例如：click、mouseover等；使Event实例可用作处理程序的参数；对Event实例的最常用的属性进行规范化；为取消事件和阻塞默认操作提供统一方法。利用jQuery绑定事件处理程序语法...
2011-10-12 10:30:23
84
原创 DWR简介
DWR是一个Web远程调用框架，利用这个框架可以让Ajax开发变得很简单，DWR可以在客户端利用JavaScript直接调用服务器端的Java方法并返回值给JavaScript，就好像直接在本地客户端调用一样（DWR根据Java类来动态生成JavaScript代码）。DWR包含2个主要部分：运行在服务器端的Java Servlet，用于处理请求并且向浏览器发回响应；运行在浏览器端的Jav...
2011-10-11 19:18:06
422
原创 使用jQuery的val()方法处理表单元素值
语法：val()功能：返回匹配集里第一个元素的value属性。如果是多选元素，则返回所有选中项的数组。返回：已获取的值或数组。注意：如果包装集里第一个元素不是表单元素，就会抛出JavaScript错误。该命令也不区分复选框和单选按钮的选中或非选中状态，而是返回所有项的value属性，不管是否选中。语法：val(value)功能：把传入的值设置为...
2011-10-11 11:01:35
389
原创 HTML5 表单验证
HTML5中，在增加了大量的表单元素与属性的同时，也增加了大量在提交时对表单与表单内新增元素进行内容有效性验证的功能。自动验证在HTML5中，通过对元素使用属性的方法，可以实现在表单提交时执行自动验证的功能。下例将在提交时自动验证输入的内容是否为数字，若不能通过验证，将显示错误信息，表单验证示例：<!DOCTYPE html><html> <hea...
2011-10-11 07:19:22
282
原创 HTML5 表单新增元素与属性【2】
增加与改良的input元素url类型该类型的input元素是一种专门用来输入URL地址的文本框。提交时如果该文本框中的内容不能转换为URL格式，则不允许提交，使用方法如下：<input type="url" name="url" value="http://www.iteye.com/"/> email类型该类型的input元素是一种专门用来输入Email地址的...
2011-10-10 21:23:26
129
原创 HTML5 表单新增元素与属性【1】
全局属性所谓全局属性，是指可以对任何元素都使用的属性。contentEditable属性该属性允许用户编辑元素中的内容，所以该元素必须是可以获得焦点的元素，而且在点击鼠标后要向用户提供一个插入符号，提示用户该元素中的内容允许编辑。该属性是boolean类型的，可以被指定为true或false。该属性还有个隐藏的inherit状态，属性为true时，元素被指定为允许编辑；为false...
2011-10-06 20:38:59
188
原创 jQuery 设置元素内容
替换HTML或文本内容语法：html()功能：获取匹配集里第一个元素的HTML内容。返回：第一个已匹配元素的HTML内容。 语法：html(text)功能：把传入的HTML片段设置为所有匹配元素的内容。参数 text：（字符串）将被设置为元素内容的HTML片段。返回：包装集。 语法：text()功能：把包装集里元素的所有文本内容连接起来，并返回字符串作为...
2011-10-06 16:45:49
217
原创 jQuery 修改元素样式
语法：css(name, value)功能：设置指定的值到每个已匹配元素的指定的CSS样式属性。参数 name：（字符串）将要设置的CSS属性名称。参数 value：一个包含属性值的字符串、数字或函数。如果传递函数作为参数，则为包装集各元素分别调用函数，以函数返回值作为CSS样式属性值。每次函数调用的this属性，设置为当前正在计算的元素。返回：包装集。 语法：...
2011-10-06 11:53:29
217
原创 jQuery 操作元素属性
jQuery 没有用于获取或修改元素属性的具体命令。可以利用原生JavaScript表示法来存取元素属性值。诀窍在于首先获取元素引用。 语法：each(iterator)功能：遍历包装集里所有元素，为各元素分别调用传递进来的迭代器函数。参数 iterator：一个函数，为匹配集中的各元素分别调用一次。传递到函数的参数被设置为包装集里当前元素的下标（从0开始），而当前元素可通过函数t...
2011-10-02 10:23:46
111
原创 jQuery 管理包装元素集合
包装集的大小及元素获取语法：size()功能：返回包装集里元素的个数。 语法：get([index])功能：获取包装集里的一个或所有匹配元素。参数 index：如果不指定参数，包装集里的所有元素就以JavaScript数组形式返回；如果指定了下标参数，就返回下标所对应的元素。返回：DOM元素或DOM元素数组。 语法：index(element)功能：在包装集...
2011-09-28 19:11:04
114
原创 HTML5 新增的非主体结构元素
header 元素header 元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页内的一个内容区块的标题，也可包含其他内容。注意：一个网页内并未限制header 元素的个数，可以拥有多个，可以为每个内容区块增加一个。header 元素中可以包含多个“h1~h6”元素、hgroup元素、nav元素、form元素、table元素等。hgroup 元素hgroup 元素...
2011-09-24 16:07:54
122
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人