亚洲欧美香蕉在线日韩精选_www在线观看美女视频_娇妻的呻吟大团结内裤奇缘_免费a漫禁漫h漫在线

Google HTML5 訓練營

2011-11-16    藍藍設計的小編

轉載藍藍設計(   m.axecq.cn  )是一家專注而深入的設計機構 ，為期望卓越的國內外企業提供有效的   BS界面設計  、 cs界面設計  、 ipad界面設計  、 包裝設計  、 圖標定制  、 用戶體驗  、交互設計、   網站建設  、平面設計服務 Google HTML5 訓練營

先簡單介紹一下這個訓練營的活動流程：
　　　1:00 – 1:30 注冊
　　　1:30 – 2:30 HTML5 技術剖析
　　　技術講座1 —— Google 工程師
　　　技術講座2 —— 特邀嘉賓（李靖威、李繼成，就職于人人網）
　　　2:30 – 3:00 宣布競賽規則，開始組隊
　　　3:00 – 6:30 作品創作 / 提交
　　　6:30 – 7:00 作品展示
　　　7:00 – 7:30 評獎、頒獎

　　講座部分，先是Google工程師寒蕊MM跟我們分享了些HTML5的新技術概況，其中大致包括：sessionStorage 、localStorage 、Web SQL DateBase 、Indexed DB ，寒蕊MM還專門寫了篇關于IndexedDB的文章《客戶端數據存儲》 ，文章用實例的方式講了Web Storage(localStorage)、Web SQL Database 和 Indexed Database的用法。

　　其中Web SQL Database雖是HTML5的技術，但由于某些原因，W3C組織(Web Applications Working Group)已不再維護這項技術，也就是說雖然目前Chrome、FireFox新版本瀏覽器支持這項技術，但不一定未來的版本還會支持。以下為w3c官網的聲明：

Beware. This specification is no longer in active maintenance and the Web
Applications Working Group does not intend to maintain it further.

　　Indexed DataBase最初是由Oracle提出的數據庫API，沒記錯的話起初叫做Simple DataBase，之后演變成Indexed DataBase，而且已被Chrome和FireFox(版本4)所支持。

　　這次活動規模比較小，由于人數限制在了30人，所以組隊Coding階段，每隊5人，分成了6組~接下來就是短短3個小時左右的Coding了，我們人人網的四個人和另一位有Canvas經驗的邱亮同學一起開發一個純HTML5的可涂鴉日記本，其中有個插曲:一開始項目名字沒多想就直接叫做《我的日記本》了，到最后提交項目的時候，Google MM說要起一個簡潔且酷一些的名字，好吧，那我們就起一個簡潔酷一些的名字，最后就叫《我日》！哇咔咔~讓大家”賤笑”了~

html5-daily-book

　　言歸正傳，《我日》項目之所以叫純HTML5，其實只是使用了些HTML5技術，在短短的3個小時時間，從功能到分工開發，時間很緊~所以只是做了個小小的Demo版，基本功能實現的差不多了，但愿以后還能有時間把它完善一下~其中使用了這些HTML5技術：

　　1.Web SQL DataBase ：存取日記數據
　　2.HTML5 Drag&Drop 事件 ：監聽網頁內圖片拖拽及本地圖片直接拖拽到日記中的事件
　　3.FileReader ：獲取本地圖片拖拽到日記本里的圖片數據
　　4.Canvas ：實現日記涂鴉功能(畫筆、調色、文字、圖片繪制到畫布等…)
　　5.HTML5新標簽 ：如:<input type=”range”… /> 、 <section> 、<article>等…
　　6.CSS3

　　今天我只詳細講講我的分工部分：HTML5 Drag & Drop 和 FireReader這兩個東西，以后有機會在和大家分享其他技術。

HTML5 Drag & Drop 事件

　　過去我們想實現網頁中的拖拽效果，基本上都是使用DOM事件模型中的mousedown、mousemove、mouseup的事件監聽來模擬拖拽效果，為了實現實時的拖拽移動效果，還要不停地獲取鼠標的坐標，還要不停的修改元素的位置，代碼要堆很多，而且性能上也很不好(不停地修改元素位置會導致頁面reflow，除非絕對定位)，現在有了html5原生的Drag & Drop 拖拽事件，真的是方便了許多，用”事半功倍”來形容絕不為過。

Drag & Drop 包括以下事件 ：

  • dragstart ：要被拖拽的元素開始拖拽時觸發，這個事件對象是被拖拽元素
  • dragenter ：拖拽元素進入目標元素時觸發，這個事件對象是目標元素
  • dragover ：拖拽某元素在目標元素上移動時觸發，這個事件對象是目標元素
  • dragleave ：拖拽某元素離開目標元素時觸發，這個事件對象是目標元素
  • dragend ：在drop之后觸發，就是拖拽完畢時觸發，這個事件對象是被拖拽元素
  • drop ：將被拖拽元素放在目標元素內時觸發，這個事件對象是目標元素

完成一次成功頁面內元素拖拽的行為事件過程應該是： dragstart –> dragenter –> dragover –> drop –> dragend

Drag & Drop 網頁內的元素拖拽：

　　HTML5為元素新增了用于拖拽的屬性draggable ，這個屬性決定了元素是否能被拖拽，如果draggable=”true”，則元素可被拖拽，否則只能選擇元素的文本。

　　值得一提的是HTML5支持拖拽數據存儲，使用dataTransfer 接口，作用于元素的拖拽基礎上，dataTransfer對象包含以下屬性和方法：

  • dataTransfer.dropEffect [ = value ] ：返回已選擇的拖放效果，如果該操作效果與起初設置的effectAllowed效果不符，則拖拽操作失敗。可以設置修改，包含這幾個值：“none”, “copy”, “link” 和 “move” 。
  • dataTransfer.effectAllowed [ = value ] ：返回允許執行的拖拽操作效果，可以設置修改，包含這些值：“none”, “copy”, “copyLink”, “copyMove”, “link”, “linkMove”, “move”, “all” 和 “uninitialized”
  • dataTransfer.types ：返回在dragstart事件出發時為元素存儲數據的格式，如果是外部文件的拖拽，則返回”files”
  • dataTransfer.clearData ( [ format ] ) ：刪除指定格式的數據，如果未指定格式，則刪除當前元素的所有攜帶數據
  • dataTransfer.setData(format, data) ：為元素添加指定數據
  • dataTransfer.getData(format) ：返回指定數據，如果數據不存在，則返回空字符串
  • dataTransfer.files ：如果是拖拽文件，則返回正在拖拽的文件列表FileList
  • dataTransfer.setDragImage(element, x, y) ：制定拖拽元素時跟隨鼠標移動的圖片，x、y分別是相對于鼠標的坐標(據測試，Chrome暫不支持)
  • dataTransfer.addElement(element) ：添加一起跟隨拖拽的元素，如果你想讓某個元素跟隨被拖拽元素一同被拖拽，則使用此方法(據測試，Chrome暫不支持)

在dragstart事件觸發時可以為被拖拽元素存儲數據，就是使用上面說到的dataTransfer.setData ，setData的數據格式一般有兩種：”text/plain”(用于文本數據)和”text/uri-list”(用于url)，你可以先為某個可拖拽元素設置微數據，然后為它設置draggable屬性為true，之后在其dragstart事件觸發時存儲數據：
html部分：



1
2
 
<div id = "dragMe" builddate= "2011-1-10" draggable= "true" > 拖拽我！</ div >
<div id = "dropHere" ></ div >

javascript部分：



1
2
3
4
5
 
var oDragMe = document.getElementById ( 'dragMe' ) ;

oDragMe.addEventListener ( 'dragstart' , function ( e) {
　　e.dataTransfer .setData ( 'text/plain' , e.target .getAttribute ( 'builddate' ) ) ;
} , false )

在拖拽結束的時候便可以獲取相應元素的數據:



1
2
3
4
5
6
 
var oDropBox = document.getElementById ( 'dropHere' ) ,
　　tmpData;

oDropBox .addEventListener ( 'drop' , function ( e) {
　　tmpData = e.dataTransfer .getData ( 'text/plain' ) ;
} , false )

創建拖拽事件監聽的時候記得要把默認的行為事件去掉，畢竟瀏覽器是有默認拖拽行為的,尤其是dragover事件一定要使用e.preventDefault()，不然drop事件可能不會被觸發：



1
2
3
4
 
oDropBox .addEventListener ( 'dragover' , function ( e) {
　　e.stopPropagation ( ) ;
     e.preventDefault ( ) ;
} , false )

上面講的這些基本上就能完成頁面內元素的拖拽操作了，下面我們來說說從本地拖拽圖片到頁面元素中用到的技術：

FileReader獲取本地拖拽文件

點擊查看實例Demo

　　作為 File API 的一部分，FileReader 專門用于讀取文件，根據 W3C 的定義，FileReader 接口 “提供一些讀取文件的方法與一個包含讀取結果的事件模型”。

來看看FileReader支持的方法、屬性和事件：



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
[ Constructor]
interface FileReader {

  // 異步讀取方法
  void readAsArrayBuffer( in Blob blob) ;
  void readAsBinaryString( in Blob blob) ;
  void readAsText( in Blob blob, [ Optional] in DOMString encoding) ;
  void readAsDataURL( in Blob blob) ;

  void abort( ) ;

  // 狀態
  const unsigned short EMPTY = 0 ;
  const unsigned short LOADING = 1 ;
  const unsigned short DONE = 2 ;
 
 
  readonly attribute unsigned short readyState;

  // 文件或二進制數據
  readonly attribute any result;
 
  readonly attribute FileError error;

  // 事件處理
  attribute Function onloadstart;
  attribute Function onprogress;
  attribute Function onload ;
  attribute Function onabort;
  attribute Function onerror ;
  attribute Function onloadend;

} ;
FileReader implements EventTarget;

今天只說說關于拖拽本地文件到頁面的幾個相關FileReader屬性和事件：

  • readAsDataURL方法 ：參數為要讀取的文件對象，將文件讀取為DataUrl
  • onload事件 ：當讀取文件成功完成的時候觸發此事件

在FileReader onload事件觸發后，你可以通過this.result 來獲取讀取的文件數據，如果是圖片，將返回base64格式的圖片數據。



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
//一定要在dragover事件中取消默認拖拽行為，不然drop事件會失效
oDropBox.addEventListener ( 'dragover' , function ( e) {
      e.stopPropagation ( ) ;
      e.preventDefault ( ) ;
} , false ) ;
oDropBox.addEventListener ( 'drop' , handleDrop, false ) ;

function handleDrop( e) {
　　e.stopPropagation ( ) ;
　　e.preventDefault ( ) ;

　　var fileList  = e.dataTransfer .files , 　　//獲取拖拽文件
　　　　oImg = document.createElement ( 'img' ) ,
　　　　reader = new FileReader( ) ;

　　reader.onload = function ( e) {
　　　　oImg.src = this .result ;
　　　　oDropBox.appendChild ( oImg) ;
　　}
　　reader.readAsDataURL ( fileList[ 0 ] ) ; 　　//這里只取拖拽的第一個，實際中你可以遍歷處理file列表
｝

OK，通過以上代碼你就可以完成基本的本地圖片拖拽到頁面指定元素內的功能了。
點擊查看實例Demo

《我日》Demo 預覽

注意，以上demo僅可使用新版Chrome和FireFox查看，IE不支持。

好了，今天先講這些，今后會更新更多HTML5 相關的技術的，希望大家多多關注~

日歷

鏈接

個人資料

藍藍設計的小編 http://m.axecq.cn

存檔