HTML5/CSS/JavaScript
Soloman
1998年接触计算机编程,专业领域:嵌入式编程(VxWorks、QNX、Windows XP Embedded)、驱动开发、Windows应用程序开发、手机终端开发(WM、Android、BREW)。目前专注于管理工作。
接受技术书籍翻译、技术培训、项目开发等业务。
展开
-
HTML5中使用拖拽实例(一)
来源于Lynda.com.HTML5.Geolocation.in.Depth教程,我做了一些简单的注释。关于html5中关于drap and drop的部分参见这个地址:http://www.w3.org/TR/html5/dnd.html#the-dragevent-and-datatransfer-interfaces示例的html文件:<!--翻译 2012-08-14 16:59:44 · 1949 阅读 · 0 评论 -
HTML5与JQuery.Mobile(五)
本节主要讲述JQuery Mobile的API。API的官方文档参见http://jquerymobile.com/demos/1.1.1/ 。当jQuery Mobile启动时,将会对document对象自动触发mobileinit事件,所以如果我们需要覆盖某些默认设置,我们就需要绑定mobileinit事件处理:$(document).bind("mobilei翻译 2012-09-18 07:27:02 · 3317 阅读 · 0 评论 -
HTML5与JQuery.Mobile(六)
本小节的内容基本上与jQuery Mobile关系不大,主要是一些HTML5的知识:input输入可以有多种type,并且我们在移动设备上可以有不同表现,例如点击电话号码输入框(type=tel)将弹出拨号输入框;而搜索框将显示搜索按钮和清除按钮: 姓名: 电话号码: ema翻译 2012-09-18 10:55:51 · 3303 阅读 · 0 评论 -
google custom search使用(一)
本系列主要讲述Google Custom Search API,主要内容来自于google官方文档。功能介绍google提供了一个非常cool的功能,允许你添加自定义的google搜索功能到你的网站中,这样网站的访问者就可以很方便的获得他们期望搜索的结果。准备工作得到一个google账号首先,你要有一个google账号,如果没有,需要去https://a原创 2012-10-09 15:58:22 · 14756 阅读 · 3 评论 -
google custom search使用(二)
之前已经对于Google Custom Search Engine做了一番介绍,接下来我们看一下如何使用。我们做一个简单的例子演示如何使用Google Custom Search Engine:首先你需要一个自定义的搜索引擎,可以访问http://www.google.com/cse进行定制和增加,我们可以在建立的搜索引擎的Control Panel中得到唯一标示符,这里我原创 2012-10-09 21:29:43 · 4483 阅读 · 3 评论 -
google custom search使用(三)
下面我们来看一个实际案例:首先我们建立一个servlet,代码如下:搜索结果的图片类定义public class SearchResultImage {// "contextLink": "http://zh.wikipedia.org/wiki/%E8%8A%B1",// "height": 188,// "width": 250,// "b原创 2012-10-11 15:38:25 · 3451 阅读 · 2 评论 -
给你的HTML5应用添加一个漂亮的Tooltip
这篇文章对应的教程来自于《Lynda.Create.a.Tooltip.with.jQuery.and.Dreamweaver》,本文仅做一些简单的描述性说明,用来指导如何一步步添加一个漂亮的Tooltip。原始文件首先我们来看看我们的源文件: jQuery Dropdown Menus翻译 2012-10-11 21:53:10 · 5083 阅读 · 0 评论 -
JavaScript库EASELJS的第一眼映像(一)
本段教程来自于《LYNDA.COM.EASELJS.FIRST.LOOK》EASELJS是一个JavaScript库,用于在HTML5提供的Canvas对象上绘制图形图像并提供了交互接口,easelJS的目标是成为Flash的替代品,由于其可绘制复杂的图形UI并提供交互接口,无需插件即可在浏览器中运行。下载地址:http://code.createjs.com/。一个最简单翻译 2012-11-13 20:42:29 · 3974 阅读 · 0 评论 -
JavaScript库EASELJS的第一眼映像(二)
本节主要讲述对象操作:首先是变形操作:function init() { var canvas = document.getElementById("easel"); // 创建布景对象 var stage = new createjs.Stage(canvas); // 创建图形对象 var graphics = new createj翻译 2012-11-14 23:47:37 · 2332 阅读 · 0 评论 -
JavaScript库EASELJS的第一眼映像(三)
本节主要讲述事件交互:鼠标的坐标可以通过stage取到:function init() { var canvas = document.getElementById("easel"); var centerX = canvas.width / 2; var centerY = canvas.height / 2; // 创建布景对象 var sta翻译 2012-11-15 17:42:58 · 1401 阅读 · 0 评论 -
Node.js先睹为快(2)
首先我们来看看如何读取命令参数:安装optimist模块:npm install optimist;测试代码:var argv = require("optimist").argv;for(var i = 0; i < argv.times; i++) { console.log(argv._[0] + 'on loop number' + (i + 1));}我翻译 2012-12-27 16:53:18 · 1073 阅读 · 0 评论 -
Node.js先睹为快(1)
这篇文章来自于《Lynda.com.Node.js.First.Look》。Node.js主要的作用是一个脱离浏览器的js调试器,是一个开源项目,官网地址:http://nodejs.org/,本来项目的名称是可以叫node的,但由于项目名称太短容易造成重名,所以定义为Node.js,我们也可以在描述中简称Node.js为Node。安装过程没什么好说的,安装完成之后如果需要翻译 2012-12-27 14:27:48 · 1628 阅读 · 0 评论 -
Node.js先睹为快(4)
接下来我们学习express这个module的使用。我们看一个简单的例子:var express = require("express");var app = express.createServer();// recipes handlerapp.get("/recipes", function(req, resp){ resp.send("All Recipe翻译 2012-12-28 14:04:20 · 767 阅读 · 0 评论 -
Node.js先睹为快(3)
接下来我们创建一个简单的http server,我们需要使用到http模块,这是一个内核模块,所以无需npm install:// require core module httpvar http = require("http");// create http server, port 3000http.createServer(function(request, response)翻译 2012-12-28 11:03:37 · 721 阅读 · 0 评论 -
关于HTML5中使用地理信息(二)
之前已经给了一个小例子展现跟踪坐标信息,这里我们将分解动作:显示浏览器是否支持(实际上是显示手机是否支持):<!-- detecting.html by Bill Weinman created 2011-07-20 Copyright (c) 2011 The BearHeart Group, LLC This file翻译 2012-08-13 10:50:32 · 1547 阅读 · 0 评论 -
关于HTML5中使用地理信息(三)
最后这个例子是带上地图显示的:<!-- geoLocMap.html by Bill Weinman created 2011-07-07 updated 2011-07-20 Copyright (c) 2011 The BearHeart Group, LLC This file may be used for pe翻译 2012-08-13 10:54:01 · 1893 阅读 · 0 评论 -
HTML5与JQuery.Mobile(四)
这次我们来看看JQuery Mobile编写的图片特效效果:我们去http://www.photoswipe.com/这个网站(我这里不清楚什么原因没能看到效果,只好去github下载了代码回来自己看https://github.com/codecomputerlove/PhotoSwipe)我们能够通过下载的代码/example/04-jquery-mobile.html翻译 2012-09-17 21:56:21 · 2691 阅读 · 0 评论 -
HTML5与JQuery.Mobile(三)
实现内容的展开与收缩部分代码: aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa翻译 2012-09-12 17:44:41 · 2048 阅读 · 0 评论 -
HTML5中添加多媒体支持(三)
ok,最后我们来一段通过JavaScript创建并且控制播放Video的代码:js代码:$(function(){ // Stop if HTML5 video isn't supported if (!document.createElement('video').canPlayType) { $("#video_controls").hide(); r翻译 2012-08-25 22:12:49 · 2226 阅读 · 0 评论 -
HTML5中使用拖拽实例(二)
下面我们开始分解操作:辅助js库文件:/* bwH5.js by Bill Weinman created 2011-04-16 updated 2011-07-07 Copyright (c) 2011 The BearHeart Group, LLC This file may be used for personal翻译 2012-08-15 11:24:35 · 1742 阅读 · 0 评论 -
HTML5中的Canvas绘图操作(一)
这一章的教程资源来自于Lynda.com.HTML5.Graphics.and.Animation.with.Canvas。本节主要介绍几个HTML5中的Canvas实际使用案例。1)我们去canvasmol可以看到非常炫的动态展示的分子结构图;2)我们去raphaeljs.com能够得到一个js库,能够实现非常多的特效效果,包括文字、图片、波形、渐变。。。;3)去翻译 2012-08-19 10:08:31 · 1074 阅读 · 0 评论 -
HTML5中的Canvas绘图操作(三)
本节主要内容是组合图形的绘制。简单的一个阴影绘制如下: Drawing Shadows #Canvas1 { border: dotted 1px black; } window.onload = function() { var theCanvas = document.getElementById('Canvas1'翻译 2012-08-19 14:39:55 · 1822 阅读 · 0 评论 -
HTML5中的Canvas绘图操作(五)
好吧这个系列终于要完了,继续展示特效效果。幻灯片效果:这个很简单,无非是建立一个定时器去刷新图片。 Canvas Image Rotator Example var imagePaths = [ "images/j0149014.jpg", "images/j0149024.jpg", "images/j0149029.jpg", "imag翻译 2012-08-19 16:46:32 · 1319 阅读 · 0 评论 -
HTML5中的Canvas绘图操作(四)
继续介绍特效效果。移动效果: The Translate Transform canvas { border: dotted 1px black; margin: 25px; } window.onload = function () { var theCanvas =翻译 2012-08-19 16:11:14 · 1495 阅读 · 0 评论 -
HTML5中的Canvas绘图操作(二)
所有编程的绘图操作基本上都差不多,这里分段举例描述。设置颜色: Drawing Lines canvas { border: dotted 1px black; } window.onload = function() { var theCanvas = document.getElementById('Canvas1'翻译 2012-08-19 12:39:20 · 888 阅读 · 0 评论 -
HTML5与JQuery.Mobile(一)
这个系列主要讲解在HTML5中添加JQuery.Mobile支持;本系列内容大部分来自于VTC.COM.JQUERY.MOBILE.FRAMEWORK教程。对于一个简单的HTML5页面我们需要做一些改造:无标题文档 应用程序标题 应用程序内容 应用程序脚注栏 下面把我们需要掌握的知识点罗翻译 2012-08-28 22:55:00 · 2858 阅读 · 0 评论 -
HTML5与JQuery.Mobile(二)
接下来我们开始讨论工具栏:首先我们看一个简单的例子:Contact Page Header Phone Email Fax Forum Help Form Help Page Conten翻译 2012-08-29 22:56:09 · 1882 阅读 · 0 评论 -
HTML5中的消息通信
本文英文教程来源:Lynda.com.HTML5.Messaging.And.Communications.In.DepthHTML5支持跨文档消息通信(Cross-Document Messaging)。既然使用到消息通信,那么必然有事件(event)产生。根据事件的产生和消费,我们能够找到发送者和接收者,也就是Sender和Listener。其中Litener需要做翻译 2012-08-20 22:48:01 · 2803 阅读 · 1 评论 -
HTML 5中的存储及离线应用(二)
本小节主要讲述如何使用Web SQL。Web SQL使用SQLite存储,目前在Safari、Chrome等浏览器中支持(还是支持的少啊FF/IE均不支持。。。);可以使用SQL语句完成增删改查操作,应该是我们程序员处理复杂数据时最喜欢的方式了下面来看例子:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans翻译 2012-08-22 09:24:20 · 1765 阅读 · 0 评论 -
HTML 5中的存储及离线应用(四)
好吧,目前看起来咱们还是老老实实用Local Storage和Session Storage吧,还是这两看起来靠谱一些。那么我们在使用Local Storage的时候经常遇到如下的情况:在一个页面中数据发生了改变,另一个页面不会实时去刷新数据导致两个页面的数据不同步;这种情况下我们就需要用到存储事件。接着我们将讲解事件的使用,看代码:<!DOC翻译 2012-08-22 09:43:18 · 1438 阅读 · 0 评论 -
HTML 5中的存储及离线应用(三)
最后我们来看一下Indexed DB。Indexed DB使用Key-Value的数据库存储;被Firefox4/Chrome 11以上支持;限制较多;好吧,由于不支持“file://”URL我放弃了,目前看起来还是一个toy而已,真的不是很好用,代码简单看一下。。。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran翻译 2012-08-22 09:31:17 · 3599 阅读 · 0 评论 -
HTML 5中的存储及离线应用(一)
本系列来源于Lynda.Com.HTML5.Local.Storage.And.Offline.Applications.In.Depth,我仅做了整理的工作。先来点知识点讲解,HTML 5提供了以下几种存储方式:Local Storage;Session Storage;Web SQL Storage;Indexed database(IndexedDB);前两种翻译 2012-08-21 22:37:45 · 1540 阅读 · 0 评论 -
HTML 5中的存储及离线应用(五)
最后咱们再来看看离线应用:离线应用需要有一个缓存的Manifest文件:文件类型(MIME-type)是:text/cache-manifest,这份工作应该在web server上进行;文件以“CACHE MANIFEST”开头;文件中有如下节:CACHE,表示缓存的文件,这个是默认节,如果未指明节的情况下默认是CACHE;NETWORK,表示不能被缓存的文件;FALLB翻译 2012-08-22 10:31:54 · 1739 阅读 · 0 评论 -
HTML5中添加多媒体支持(二)
接下来我们介绍一下如何嵌入Flash和Video或Audio,并且介绍一些在线生成嵌入代码的工具:生成嵌入Flash代码的工具如下:http://www.osmf.org/configurator/fmp/其中:Video Source输入嵌入的文件地址,可以输入视频文件的地址;其余选项根据需要设置;输入完毕后甚至可以预览代码,设置正确后嵌入对应的页面即翻译 2012-08-25 21:55:23 · 1443 阅读 · 0 评论 -
HTML5中添加多媒体支持(一)
这次的教程来自Lynda.com.HTML5.Video.and.Audio.in.Depth。尽管目前在HTML中嵌入视频还不是主流(貌似最多的是使用Flash吧),但毕竟是今后的趋势,所以还是很重要的。简单的嵌入视频和音频的代码分别是: Your browser does not support HTML5 video. Yo翻译 2012-08-24 23:37:39 · 2203 阅读 · 0 评论 -
关于HTML5中使用地理信息(一)
文章内容全部来自网络,我仅是做了收集和整理。使用的js库文件如下:/* bwH5.js by Bill Weinman created 2011-04-16 updated 2011-07-07 Copyright (c) 2011 The BearHeart Group, LLC This file may be used翻译 2012-08-13 10:38:20 · 1295 阅读 · 0 评论