Component API

360° 圖片庫

gwd-360gallery

可顯示旋轉物件的圖片庫物件。

屬性

名稱 說明
images:string 圖片庫中使用的圖片路徑字串 (以半形逗號分隔)。
autoplay:boolean 讓圖片庫載入後自動播放所有圖片。
wrap:boolean 圖片庫可讓使用者在第一幅到最後一幅畫格之間隨意滑動切換,而非停在首尾兩幅畫格上。

事件

名稱 說明
firstinteraction 在使用者首次與圖片庫互動時傳送。
allframesviewed 在圖片庫中所有畫格均已顯示過至少一次後傳送。
allframesloaded 在圖片庫中的所有畫格均已載入後傳送。
frameshown 在顯示新畫格時傳送。
frameactivated 在新畫格開始啟動時 (包括尚未顯示的情況) 傳送。
frametap 在使用者輕觸畫格時傳送。

方法

名稱 說明
goToFrame(frame:number, opt_animate:string, opt_direction:string) 為指定的畫格建立動畫。
rotateOnce(opt_duration:number, opt_direction:string) 讓圖片庫中的物件旋轉一次。
goForwards() 讓圖片庫往前移動一幅畫格。
goBackwards() 讓圖片庫往後移動一幅畫格。
3D 互動區

gwd-3d-hotspot

這個元素用於顯示 3D 模型上的註解。

屬性

名稱 說明
data-position:string 互動區的位置。
data-normal:string 互動區的標準。
hotspot-name:string 互動區名稱。
hotspot-title:string 顯示於資訊卡中的標題文字。
hotspot-description:string 顯示於資訊卡中的說明文字。
hide-infocard:boolean 是否要隱藏資訊卡。
3D 互動區容器

gwd-3d-hotspot-container

這是 3D 模型上註解的容器元素。

屬性

名稱 說明
up-image:file 3D 互動區在未按下狀態時所顯示圖片的網址。
over-image:file 3D 互動區在滑鼠游標懸停或懸停狀態時所顯示圖片的網址。
down-image:file 3D 互動區在按下狀態時所顯示圖片的網址。
3D 模型

gwd-3d-model

這是 3D 檢視器元件。

屬性

名稱 說明
id-url:download 3D 模型的 ID 或網址。
data-gwd-refresh-assets:string Google Web Designer 所用的屬性,可判斷是否必須重新整理 3D 素材資源。
glass:boolean 為 3D 模型啟用玻璃素材。
src:string 要顯示的模型。
transparent:boolean 在 3D 模型上啟用透明背景。
gesture-cue-icon:file 手勢提示圖示。
gesture-cue-text:string 手勢提示圖示下方顯示的文字。
gesture-cue-duration:number 手勢提示顯示的持續時間 (以秒為單位)。如果值為 -1,則表示沒有時間限制。

事件

名稱 說明
scene-rendered 在首次算繪 3D 模型場景後傳送。
camera-changed 在任何 3D 相機屬性變更時傳送。event.detail 物件包含相機目前的所有屬性。
hotspot-clicked 在點選互動區時傳送。event.detail 物件包含點選的互動區名稱。
interaction-start 在使用者開始與 3D 模型互動時傳送。
interaction-end 在使用者停止與 3D 模型互動時傳送。

方法

名稱 說明
setYaw(yaw:number) 設定在不使用任何動畫下的偏轉角度 (以度為單位,將相機限制納入考量)。
setTargetYaw(targetYaw:number) 根據相機限制或在 -360 度和 360 度間旋轉的下限,設定目標偏轉角度 (以度為單位)。
setTargetPitch(targetPitch:number) 設定目標俯仰角度 (以度為單位)。
incrementTargetPitch(pitchDelta:number) 逐漸增加差異角度的目標俯仰角度 (以度為單位)。
setTargetZoom(targetZoom:number) 設定目標縮放等級 (以公尺為單位)。
incrementTargetZoom(zoomDelta:number) 逐漸增加目標縮放等級 (以公尺為單位)。
setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number) 設定目標支點 (以公尺為單位)。
setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number) 設定目標區域平移距離 (以公尺為單位)。
setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number) 設定素材的顏色。
playAnimation(animationName:string) 播放動畫。
pauseAnimation(animationName:string) 暫停播放動畫。
setAnimationTime(animationName:string, animationTime:number) 設定動畫時間 (以秒為單位)。
lookAtHotspot(hotspotName:string) 移動並旋轉相機,聚焦在互動區上。
3D 模型檢視器

gwd-3d-model-viewer

這個元件會納入 3D 模型檢視器元件。

屬性

名稱 說明
src:file 3D 模型的來源檔案。
gesture-cue-icon:file 手勢提示圖示。
gesture-cue-text:string 手勢提示圖示下方顯示的文字。
gesture-cue-duration:number 手勢提示顯示的持續時間 (以秒為單位)。如果值為 -1,則表示沒有時間限制。
skybox-image:file 3D 模型場景的背景圖片。
environment-image:file 控制 3D 模型的環境倒影。

事件

名稱 說明
scene-rendered 在首次算繪 3D 模型場景後傳送。
camera-changed 在任何 3D 相機屬性變更時傳送。event.detail 物件包含相機目前的所有屬性。
hotspot-clicked 在點選互動區時傳送。event.detail 物件包含點選的互動區名稱。
interaction-start 在使用者開始與 3D 模型互動時傳送。
interaction-end 在使用者停止與 3D 模型互動時傳送。

方法

名稱 說明
setYaw(yaw:number) 設定在不使用任何動畫下的偏轉角度 (以度為單位,將相機限制納入考量)。
setTargetYaw(targetYaw:number) 根據相機限制或在 -360 度和 360 度間旋轉的下限,設定目標偏轉角度 (以度為單位)。
setTargetPitch(targetPitch:number) 設定目標俯仰角度 (以度為單位)。
incrementTargetPitch(pitchDelta:number) 逐漸增加差異角度的目標俯仰角度 (以度為單位)。
setTargetZoom(targetZoom:number) 設定目標縮放等級 (以公尺為單位)。
incrementTargetZoom(zoomDelta:number) 逐漸增加目標縮放等級 (以公尺為單位)。
setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number) 設定目標支點 (以公尺為單位)。
setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number) 設定目標區域平移距離 (以公尺為單位)。
setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number) 設定素材的顏色。
playAnimation(animationName:string) 播放動畫。
pauseAnimation(animationName:string) 暫停播放動畫。
setAnimationTime(animationName:string, animationTime:number) 設定動畫時間 (以秒為單位)。
新增至日曆

gwd-addtocalendar

將活動新增至日曆。

屬性

名稱 說明
event-title:string 顯示在使用者日曆中的活動名稱。
start-date:string 活動開始的日期。
start-time:string 活動開始的時間 (24 小時制)。
end-date:string 活動結束的日期。
end-time:string 活動結束的時間 (24 小時制)。
timezone:string 活動所屬的時區。設定時區後,系統會為位在其他時區的使用者調整正確的時間。
location:string 活動的位置。
description:string 活動的說明。
icalendar:boolean 是否使用 iCalendar 檔案。
google:boolean 是否應使用 Google 日曆。
windows-live:boolean 是否應使用 Windows Live 行事曆。
yahoo:boolean 是否應使用 Yahoo! 行事曆。
bg-color:string 下拉式選單背景色彩的十六進位值。
font-color:string 下拉式選單字型色彩的十六進位值。
font-family:string 下拉式選單的字型名稱。
font-size:string 下拉式選單的字型大小。
font-weight:string 下拉式選單的字型粗細。
highlight-color:string 下拉式選單醒目顯示顏色的十六進位值。
音訊

gwd-audio

這是納入 HTMLAudioElement 的元件。

屬性

名稱 說明
autoplay:boolean 是否要在載入音訊後自動播放音訊。
loop:boolean 是否要在音訊播放完畢後循環播放。
muted:boolean 音訊一開始是否設為靜音狀態。
controls:boolean 是否啟用預設的原生播放器控制項。
sources:file 使用各種格式的音訊來源字串 (以半形逗號分隔)。

事件

名稱 說明
play 在前一個暫停事件之後,於繼續播放媒體內容時傳送。
pause 在暫停播放時傳送。
playing 在開始播放媒體 (包括首次播放、在暫停之後播放以及結束後重新開始播放) 時傳送。
ended 在結束播放時傳送。
volumechange 在變更音訊音量 (包括設定音量及變更靜音屬性) 時傳送。
seeked 在完成搜尋作業後傳送。
waiting 在因為其他操作尚未結束 (例如搜尋) 而無法完成所要求的操作 (例如播放) 時傳送。

方法

名稱 說明
mute() 將音訊切換為靜音/取消靜音。
pause() 暫停播放音訊。
play() 播放音訊。
replay() 重播音訊。
seek(time:number) 跳到音訊中的指定時間。
輪轉式圖片庫

gwd-carouselgallery

這是可在輪轉式的版面配置中顯示畫格的圖片庫物件。

屬性

名稱 說明
images:string 圖片庫中使用的圖片路徑字串 (以半形逗號分隔)。
groups:string 群組 ID 字串 (以半形逗號分隔)。
transition-duration:number 圖片庫動畫速度 (單位為毫秒)。
start-frame:number 一開始顯示的圖片數量。
autoplay:boolean 指定讓畫格自動播放一次或不自動播放。
has-navigation:boolean 是否自動加入圖片庫瀏覽控制項。
navigation-thumbnails:boolean 是否使用縮圖代替圓點讓使用者瀏覽操作。
navigation-highlight:color CSS 顏色代碼,用來醒目顯示當前瀏覽的畫格。
scaling:string 指定以何種方式將圖片內容調整為符合畫格大小。
frame-width:number 單一內容面板的寬度。
frame-height:number 單一內容面板的高度。
neighbor-rotation-y:number 讓畫面中央面板的鄰近面板沿著 Y 軸旋轉,可用來使鄰近面板傾斜。
neighbor-translation-x:number 讓畫面中央面板的鄰近面板沿著 X 軸轉譯,可用來調整鄰近面板的顯示位置。
neighbor-translation-y:number 讓畫面中央面板的鄰近面板沿著 Y 軸轉譯。
neighbor-translation-z:number 讓畫面中央面板的鄰近面板沿著 Z 軸平移。
exit-urls:string 與圖片庫中的圖片對應的結束網址字串 (以半形逗號分隔)。
show-reflection:boolean 是否顯示採用 CSS3 技術的倒影。
pause-front-media:boolean 是否在目前的畫格轉換時,暫停播放前一幅畫格中的媒體元素 (例如視訊或音訊)。
resume-next-media:boolean 是否在目前的畫格轉換時,繼續播放下一幅畫格中的媒體元素 (例如視訊或音訊)。

事件

名稱 說明
firstinteraction 在使用者首次與圖片庫互動時傳送。
allframesviewed 在圖片庫中的所有畫格均已顯示過至少一次後傳送。
allframesloaded 在圖片庫中的所有畫格均已載入後傳送。
autoplayended 自動播放結束 (不限原因) 後傳送。如果自動播放在到達預計的時間長度時自然結束,則 event.detail.completed 的值為 true,其他情況則為 false。
frameshown 在顯示新畫格時傳送。
frameactivated 在新畫格開始啟動時 (包括尚未顯示的情況) 傳送。
frameautoplayed 在畫格因自動播放而啟動時傳送。這可能會比 frameshown 更容易觸發,因為在一次顯示的多幅畫格中,此事件會針對每一幅畫格個別啟動。
frametap 在使用者輕觸畫格時傳送。
reachleftend 在圖片庫到達最左端時傳送。
reachrightend 在圖片庫到達最右端時傳送。
trackstart 在滑鼠游標或輕觸拖曳點開始移動時傳送。
track 此元件會記錄滑鼠游標或輕觸拖曳點的 X 和 Y 座標位置資料。
trackend 在滑鼠游標或輕觸拖曳點結束移動時傳送。

方法

名稱 說明
goToFrame(index:number, opt_animate:string) 前往指定的畫格。
goForwards(opt_animate:string) 前往下一幅畫格 (如適用)。
goBackwards(opt_animate:string) 前往上一幅畫格。
rotateOnce(opt_duration:number, opt_direction:string) 將圖片庫中的所有畫格顯示一次。
stopRotation() 暫停目前的自動旋轉動作。
提示點

gwd-cuepoint

Google Web Designer 影片元件的附加元件,會在影片播放至特定時間點時觸發事件。

屬性

名稱 說明
time:number 事件觸發時間 (以秒為單位)。

事件

名稱 說明
cuepoint 一旦媒體播放至提示點中定義的時間,系統就會傳送事件。

方法

名稱 說明
seek() 將影片時間設為提示點時間。
setTime(time:number) 設定提示點時間。
日期替換

gwd-dateswap

日期替換元件會根據當前日期與指定日期範圍的比對結果,變更元素的顯示方式。

屬性

名稱 說明
from_date:string RFC2822ISO 8601 格式顯示日期的字串。
to_date:string RFC2822ISO 8601 格式顯示日期的字串。

事件

名稱 說明
before 在當前日期早於 from_date 時傳送 (排除)。
during 在當前日期介於 from_dateto_date 之間時傳送 (包含)。
after 在當前日期晚於 to_date 時傳送 (排除)。

方法

名稱 說明
checkDate() 將當前日期與指定日期範圍進行比對。
圖片庫導覽

gwd-gallerynavigation

這是 Google Web Designer 圖片庫元件的瀏覽控制項。

屬性

名稱 說明
for:string 圖片庫中使用的圖片路徑字串 (以半形逗號分隔)。
highlight:color CSS 顏色代碼,用來醒目顯示當前瀏覽的畫格。
use-thumbnails:boolean 是否使用縮圖代替圓點讓使用者瀏覽操作。
一般廣告

gwd-genericad

實作一般廣告容器。

事件

名稱 說明
adinitialized 在一般元素轉譯廣告內容之前傳送。

方法

名稱 說明
initAd() 在接收到啟用器傳送的適當事件時啟動廣告。
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string) 前往廣告的展開尺寸。如果尚未指定頁面 ID,廣告會導向預設頁面。
exit(url:string, opt_collapseOnExit:boolean, opt_pageId:string) 結束廣告並 (選擇性) 收合廣告。
手勢

gwd-gesture

各種手勢事件的抽象概念。

屬性

名稱 說明
touch-action:string 指定系統如何解讀輕觸動作,有效值為 autononepan-xpan-y。預設行為與設定為 none 的效果相同。

事件

名稱 說明
hover 在滑鼠游標或輕觸點座標進入元件邊界時傳送。
hoverend 在滑鼠游標或輕觸點座標離開元件邊界時傳送。
trackstart 在滑鼠游標或輕觸拖曳點開始移動時傳送。
track 此元件會記錄滑鼠游標或輕觸拖曳點的 X 和 Y 座標位置資料。
trackend 在滑鼠游標或輕觸拖曳點結束移動時傳送。
tap 在記錄到使用者的輕觸或點擊滑鼠動作時傳送。
swipeleft 在使用者往左滑動時傳送。
swiperight 在使用者往右滑動時傳送。
swipeup 在使用者往上滑動時傳送。
swipedown 在使用者往下滑動時傳送。
Google 廣告

gwd-google-ad

實作 Google 廣告容器。

屬性

名稱 說明
polite-load:boolean 廣告是否必須遵循預載語意。
fullscreen:boolean 廣告是否應嘗試展開至全螢幕大小。

事件

名稱 說明
adinitialized 在元素轉譯廣告內容之前傳送。
expandstart 在啟用器觸發開始展開事件時傳送。
expandfinish 在啟用器觸發結束展開事件時傳送。
collapsestart 在啟用器觸發開始收合事件時傳送。
collapsefinish 在啟用器觸發結束收合事件時傳送。
fullscreensupport 在系統可支援全螢幕展開時傳送。
dynamicelementsready 對廣告內容套用動態資料後傳送。
hostpagescroll 在啟用器觸發主機頁面捲動事件時傳送。

方法

名稱 說明
initAd() 在接收到啟用器傳送的適當事件時啟動廣告。
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string) 前往廣告的展開尺寸。如果尚未指定頁面 ID,廣告會導向預設頁面。
exit(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string) 結束廣告並 (選擇性) 收合廣告。
exitOverride(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string) 無論 Studio 中設定的值為何,一律結束廣告並前往指定網址。如果 opt_collapseOnExit 的值為 true,則收合廣告。
incrementCounter(metric:string, opt_isCumulative:boolean) 追蹤計數器事件。
startTimer(timerId:string) 啟動事件計時器。
stopTimer(timerId:string) 停止事件計時器。
reportManualClose() 記錄手動關閉浮動廣告、彈出式廣告、可展開式廣告、網頁內彈出式廣告或網頁內浮動廣告的操作。這種方法可以替代 Enabler.reportManualClose
互動區

gwd-hotspot

這個元件可在影片特定時間顯示和隱藏互動區。

屬性

名稱 說明
show-time:number 互動區開始出現的時間 (以秒為單位)。
hide-time:number 互動區停止顯示的時間 (以秒為單位)。
left:string 互動區的左側在影片畫面上的相對位置,以影片畫面寬度百分比表示 (例如「5%」)。
top:string 互動區的頂端在影片畫面上的相對位置,以影片畫面高度百分比表示 (例如「5%」)。
width:string 互動區在影片畫面上的相對寬度百分比。
height:string 互動區在影片畫面上的相對高度百分比。

事件

名稱 說明
hotspotshown 在互動區顯示時傳送事件。
hotspothidden 在互動區隱藏時傳送事件。

方法

名稱 說明
show(showHide:boolean) 切換互動區的顯示狀態。
seek(showHide:boolean) 設定互動區出現或隱藏的影片時間。
setTimes(showTime:number, hideTime:number) 設定互動區的出現和隱藏時間。
iframe

gwd-iframe

這是納入 HTMLIframeElement 的元件。

屬性

名稱 說明
source:string iframe 的來源;這會取代原生圖片元素中的 src 屬性。
scrolling:string 指定 iframe 是否應顯示捲軸。

事件

名稱 說明
iframeload 在 iframe 載入後傳送。

方法

名稱 說明
setUrl(url:string) 變更 iframe 的網址並立即載入 iframe。
圖片

gwd-image

納入 HTMLImageElement 的元件,可延遲載入圖片來源。

屬性

名稱 說明
source:file 圖片來源;這會取代原生圖片元素中的 src 屬性。
alt:string 圖片的替代文字。
scaling:string 定義以何種方式將圖片調整為符合畫格大小。
alignment:string 圖片在檢視區域中的對齊方式。
focalpoint:string 將圖片焦點編碼為 X/Y 像素座標。
disablefocalpoint:boolean 停用 focalpoint 屬性所設定的焦點 (由 Google Web Designer 內部使用)。
圖片按鈕

gwd-imagebutton

呈現游標點選前後與懸停時三種狀態的圖片按鈕。

屬性

名稱 說明
up-image:file 按鈕在未按下狀態時所顯示圖片的網址。
over-image:file 按鈕在滑鼠游標懸停或懸停狀態時所顯示圖片的網址。
down-image:file 按鈕在已按下狀態時所顯示圖片的網址。
bgcolor:string 按鈕的背景色彩。
alignment:string 圖片在檢視區域中的對齊方式
scaling:string 圖片配合父項容器大小調整的方式
disabled:boolean 是否停用按鈕

事件

名稱 說明
imagebuttonloaded 在載入所有圖片後傳送。

方法

名稱 說明
toggleEnable() 切換停用/啟用狀態。
setImages(upSrc:string, opt_overSrc:string, opt_downSrc:string) 設定所有按鈕狀態的圖片來源。
圖片效果

gwd-image-effect

這是圖片效果元件。

屬性

名稱 說明
scaling:string 定義以何種方式將圖片調整為符合畫格大小。
time-limit:number 動畫時間限制。如果值為 -1,則表示沒有時間限制。
settings:string 啟動元件設定對話方塊。
images:string 圖片效果中使用的圖片路徑字串 (以半形逗號分隔)。

事件

名稱 說明
autoplayended 在自動播放因達到時間限制而結束時傳送。

方法

名稱 說明
play() 播放動畫。
pause() 暫停播放動畫。
「前後對照」圖片效果

gwd-before-and-after

這個圖片效果會將兩張類似的圖片合併成「前後對照」圖片。

「呼吸」圖片效果

gwd-breathe

這個圖片效果可將圖片變成伸縮自如的動畫。

「揭露」圖片效果

gwd-reveal

這個圖片效果會以橢圓的焦點區域掃描圖片,進而顯示第二張圖片。

「波浪」圖片效果

gwd-wave

這個圖片效果會為圖片套用動畫波浪轉換特效,使圖片按照波浪圖案擺動。

地圖

gwd-map

擴充 HTMLElement,以便納入 Google Maps API 呼叫。

屬性

名稱 說明
api-key:string Google API 金鑰。請參閱:https://developers.google.com/maps/documentation/javascript/get-api-key
query:string 用以從 Google Places API 傳回位置資訊的搜尋查詢名稱。
start-latitude:decimal 起始中心緯度座標。值應介於 -90 到 90 之間 (以度為單位)。
start-longitude:decimal 起始中心經度座標。值應介於 -180 到 180 之間 (單位為度)。
request-user-location:boolean 是否必須要求取得使用者的位置資訊。如果設為 true,系統會提示使用者分享位置資訊。
client-id:string Google Maps Premier 使用者的用戶端 ID。
search-radius:number 進行位置搜尋的最小半徑 (單位為公尺)。
result-limit:number 單一查詢傳回的結果數量上限。
start-zoom:number 起始縮放等級 (依 Google Maps API 所用單位計算)。預設值為 16,也就是附近地區等級。
marker-src:string 地標圖片檔案名稱,必須是包含開啟、關閉和陰影元件的精靈。
gps-src:string GPS 位置藍點圖片檔案名稱。
msg-start-position-prompt:string 在選取起始位置的對話方塊中,做為提示文字的本地化字串。
msg-gps-button-label:string 按鈕標籤所用的本地化字串 (該按鈕可讓地理位置 API 擷取使用者位置)。
msg-manual-position-button-label:string 顯示地點搜尋欄位的按鈕標籤所用的本地化字串。
msg-manual-position-prompt:string 在搜尋起始地圖位置的對話方塊中,做為提示文字的本地化字串。
msg-manual-position-placeholder:string 在搜尋起始地圖位置的搜尋框中,做為預留位置文字的本地化字串。
msg-geocode-failure:string 嘗試使用地理位置 API 失敗時,做為對話方塊中提示文字的本地化字串。
msg-no-results-found:string 所選位置找不到任何地圖搜尋結果時,做為對話方塊中提示文字的本地化字串。

事件

名稱 說明
pinclick 當使用者選取地圖上的圖釘時。

方法

名稱 說明
setCenter(latitude:number, longitude:number, opt_accuracy:number) 將地圖中心設定在指定的經緯度座標位置。
頁面

gwd-page

頁面是指頁面堆疊中的單一卡片。

屬性

名稱 說明
expanded:boolean 是否應將這個頁面視為展開式頁面 (廣告專用)。
centered:boolean 是否應將這個頁面的內容置中。
alt-orientation-page:string 適合以不同螢幕方向來呈現內容的頁面所用的頁面 ID。

事件

名稱 說明
attached 在頁面連結到 DOM 後立即傳送。
detached 在頁面從 DOM 移除後立即傳送。
pageactivated 在頁面開始顯示後傳送。
pagedeactivated 在頁面不再顯示後傳送。
pageload 在頁面內容成功載入後傳送。
pagepresenting 在頁面開始播放介紹動畫之前傳送。
shake 在偵測到裝置搖動手勢時傳送。
tilt 在偵測到裝置傾斜時傳送。
rotatetoportrait 在裝置的螢幕方向轉為直向時傳送。
rotatetolandscape 在裝置的螢幕方向轉為橫向時傳送。
頁面堆疊

gwd-pagedeck

PageDeck 是一種頁面容器,會依指定順序循環顯示不同頁面 (一次一個),並使用任何支援的頁面轉換方式。

屬性

名稱 說明
default-page:string 預設頁面的 ID。

事件

名稱 說明
pagetransitionstart 在頁面開始轉換之前傳送。
pagetransitionend 在頁面轉換完成之後傳送。

方法

名稱 說明
goToNextPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) 前往頁面堆疊中的下一頁。
goToPreviousPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) 前往頁面堆疊中的上一頁。
goToPage(pageId:string, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) 前往頁面堆疊中的指定頁面。
getCurrentPage() 傳回目前頁面,如未顯示頁面則傳回 null。
getDefaultPage() 傳回指定的預設頁面,如未指定則傳回第一頁。
getPage(pageId:string) 傳回含有指定 ID 的頁面。
findPageIndexByAttributeValue(attributeName:string, value:string|number|boolean) 傳回屬性值與指定的值相等的頁面元素,如找不到頁面則傳回 -1。
getOrientationSpecificPage(orientation:string, pageId:string) 傳回螢幕方向與指定方向相符的頁面。
getElementById(id:string) 在這個頁面堆疊的所有頁面中找出含有指定 ID 的元素。由於 gwd-pagedeck 只會將正在使用的頁面保存在 DOM 中,因此標準 document.getElementById(id) 不會傳回停用頁面中的元素。不過,將停用頁面中的元素設為參照項目是很常見的用途,尤其是動態廣告。在這種情況下,可以使用這種方法根據元素 ID 將元素解除參照。
視差

gwd-parallax

視差元件。

屬性

名稱 說明
settings:string 啟動元件設定對話方塊。
yscroll:decimal 在中心區域算繪視差動畫時可使用的捲動係數。

事件

名稱 說明
ready 在載入視差元件中的所有素材資源後傳送。
粒子效果

gwd-particleeffects

這是構成多種粒子效果和圖片的元件。

屬性

名稱 說明
autoplay:boolean 是否在載入元件後讓動畫自動播放。
time-limit:number 動畫時間限制。如果值為 -1,則表示沒有時間限制。
settings:string 啟動元件設定對話方塊。

事件

名稱 說明
timelimitreached 在動畫播放至指定時間上限時傳送。

方法

名稱 說明
play() 播放動畫。
pause() 暫停播放動畫。
stop() 停止播放動畫。
粒子

gwd-particles

粒子系統元件。

屬性

名稱 說明
acceleration-x:number 加速的 X 元件 (以每幅畫格顯示的像素為單位)。
acceleration-y:number 加速的 Y 元件 (以每幅畫格顯示的像素為單位)。
angle-max:number 粒子速度方向的最大角度。
angle-min:number 粒子速度方向的最小角度。
autoplay:boolean 是否在父項 gwd-particleeffects 開始播放後,讓動畫自動播放。
color1:color 第一個顏色。
color2:color 第二個顏色。
color-rate:number 這是每幅畫格顏色變化 (從顏色 1 變成顏色 2) 的速率,粒子目前的顏色會據此增加,範圍為 [0, 1]。
emit-interval:number 到放射下一個粒子之前的畫格數。
emit-x-max:string 粒子放射範圍的最大 X 坐標。
emit-x-min:string 粒子放射範圍的最小 X 坐標。
emit-y-max:string 粒子放射範圍的最大 Y 坐標。
emit-y-min:string 粒子放射範圍的最小 Y 坐標。
loop:boolean 是否循環播放動畫。
number:number 粒子數量。
opacity-min:number 粒子的不透明度下限。
opacity-max:number 粒子的不透明度上限。
opacity-rate:number 這是每幅畫格不透明度變化的速率,粒子目前的不透明度會據此增加。
random-colors:boolean 粒子是否使用介於顏色 1 和顏色 2 間的隨機顏色。設為 false 時,所有粒子的起始顏色都會為顏色 1。
shape:string Sprite 的形狀。
size-max:number 粒子的大小上限 (以像素為單位)。
size-min:number 粒子的大小下限 (以像素為單位)。
size-rate:number 這是每幅畫格大小變化的速率,粒子目前的大小會據此增加。
skip-forward:number 在特定百分比的粒子放射到粒子系統後,跳到指定的時間。
speed-max:number 粒子的最大速度 (以每幅畫格顯示的像素為單位)。
speed-min:number 粒子的最小速度 (以每幅畫格顯示的像素為單位)。
sprite-image-src:file 用做 Sprite 的圖片來源。
turbulence-frequency:number 擾亂出現的頻率。設定值較大時,出現不規則動作的頻率就會增加。值必須為正數。
turbulence-rate:number 強度隨時間變化的速率。
turbulence-strength:number 施加在粒子上的擾亂強度。值必須為正數。
turbulence-trail:number 要顯示的粒子的先前狀態和目前狀態數量。

方法

名稱 說明
play() 播放動畫。
pause() 暫停播放動畫。
stop() 停止播放動畫。
Sprite 工作表

gwd-spritesheet

顯示 Sprite 工作表的單一主要畫面格或動畫。

屬性

名稱 說明
imagesource:file Sprite 工作表圖片的網址。
offsetx:number

從 Sprite 工作表左側到下列其中一個項目的偏移 (以像素為單位):

  • 您想要從 Sprite 工作表中使用的特定圖片的左側邊緣
  • 您用來建立動畫的第一個 Sprite 圖片的左側邊緣
offsety:number

從 Sprite 工作表頂端到下列其中一個項目的偏移 (以像素為單位):

  • 您想要從 Sprite 工作表中使用的特定圖片的上方邊緣
  • 您用來建立動畫的第一個 Sprite 圖片的上方邊緣
clipwidth:number

下列其中一個項目的寬度 (以像素為單位):

  • 您想要從 Sprite 工作表中使用的特定圖片
  • 您用來建立動畫的第一個 Sprite 圖片
clipheight:number

下列其中一個項目的高度 (以像素為單位):

  • 您想要從 Sprite 工作表中使用的特定圖片
  • 您用來建立動畫的第一個 Sprite 圖片
alignment:string 決定圖片在容器中的位置。
scaling:string 指定元件中各種不同尺寸圖片的顯示方式。
totalframecount:number 組成動畫的畫格數量。
duration:number 每幅畫格的時間長度 (以毫秒為單位)。
loopcount:number 動畫重複播放的次數。設為 0 可使動畫無限次重播。
autoplay:boolean 是否讓動畫自動播放。
endonstartframe:boolean 是否讓動畫結束於起始畫格。
reverseplay:boolean 是否讓動畫反向播放。

事件

名稱 說明
animationend 動畫結束時傳送。
animationpause 動畫暫停時傳送。
animationplay 動畫開始播放時傳送。
animationrestart 在動畫暫停後又重新開始播放時傳送。

方法

名稱 說明
newAnimation(offsetx:number, offsety:number, clipwidth:number, clipheight:number, totalframecount:number, duration:number, loopcount:number, autoplay:boolean, reverseplay:boolean) 定義新動畫。
play() 播放動畫。
pause() 暫停播放動畫。
togglePlay() 在播放與暫停播放動畫之間進行切換。
restart() 重新播放動畫。
previousFrame() 顯示前一幅畫格。
nextFrame() 顯示下一幅畫格。
goToFrame(id:number) 顯示畫格編號所指定的畫格。
星級評等

gwd-starratings

轉譯表示評等星號的元件。

屬性

名稱 說明
ratingvalue:decimal 評等值。
iconsize:number 星號圖示大小。
isemptyshown:boolean 是否顯示沒有星級的星號圖示。
isemptycolored:boolean 是否將沒有星級的星號圖示上色。
colorprimary:color 主要填滿色彩。
colorsecondary:color 次要漸層色彩。
gradienttype:string 漸層類型。
ratingmax:number 最高星級評等。
ratingmin:decimal 最低星級評等。

事件

名稱 說明
complete 建立星級評等圖示時。
validationerror 星級評等的評分值小於最低評分。
街景服務

gwd-streetview

Google 街景服務元件。

屬性

名稱 說明
key:string 如需取得應用程式個別金鑰的相關資訊,請造訪:https://developers.google.com/maps/documentation/javascript/get-api-key
latitude:decimal 位置緯度值。
longitude:decimal 位置經度值。
interaction:boolean 決定視圖是否可以平移/旋轉。
heading:decimal 指出相機的指南針方向。可接受的值為 0 到 360 (這兩個值均指向北方,而 90 指向東方,180 則指向南方)。如果沒有指定方向,則系統會計算出一個值,將相機指向某個指定位置,而該位置會從最接近的一張相片拍攝地點開始指定
pitch:decimal 指定相機相對於街景車輛的向上或向下角度。這個角度通常是扁平的水平畫面。正值角度使相機向上 (90 度表示直線向上);負值角度使相機向下(-90 度表示直線向下)
zoom:number 指定相機相對於街景服務車輛的縮放程度。
滑動式圖片庫

gwd-swipegallery

可在滑動式內容區域中顯示畫格的圖片庫物件

屬性

名稱 說明
images:string 圖片庫中使用的圖片路徑字串 (以半形逗號分隔)。
groups:string 群組 ID 字串 (以半形逗號分隔)。
transition-duration:number 圖片庫動畫速度 (以毫秒為單位)。
start-frame:number 啟動時的畫格 (從 1 開始)。
num-frames-to-display:number 同時顯示的畫格數。
frame-snap-interval:number 每次滑動時前進的畫格數。
autoplay:boolean 是否讓圖片庫自動旋轉一次。
has-navigation:boolean 是否加入圖片庫瀏覽控制項。
navigation-thumbnails:boolean 是否使用縮圖代替圓點讓使用者瀏覽操作。
navigation-highlight:color CSS 顏色代碼,用來醒目顯示當前瀏覽的畫格。
scaling:string 指定以何種方式將圖片內容調整為符合畫格大小。
swipe-axis:string 偵測到滑動操作的軸線。
offset:number 相鄰內容畫格之間的空白空間大小。
frame-width:number 單一內容畫格的寬度;這會覆寫 num-frames-to-display
frame-height:number 單一內容畫格的高度。
autoplay-duration:number 自動播放畫格的時間總長度。
autoplay-step-interval:number 自動播放過程中每一幅畫格步驟之間的間隔。
exit-urls:string 與圖片庫中的圖片對應的結束網址字串 (以半形逗號分隔)。
disable-gesture:boolean 隱藏/停用可為圖片庫開啟觸控瀏覽功能的手勢元件。
pause-front-media:boolean 是否在目前的畫格轉換時,暫停播放前一幅畫格中的媒體元素 (例如視訊或音訊)。
resume-next-media:boolean 是否在目前的畫格轉換時,繼續播放下一幅畫格中的媒體元素 (例如視訊或音訊)。

事件

名稱 說明
firstinteraction 在使用者首次與圖片庫互動時傳送。
allframesviewed 在圖片庫中的所有畫格均已至少顯示一次時傳送。
allframesloaded 在圖片庫中的所有畫格均已載入後傳送。
autoplayended 自動播放結束 (不限原因) 後傳送。如果自動播放在到達預計的時間長度時自然結束,則 event.detail.completed 的值為 true,其他情況則為 false。
frameshown 在任何必要動畫播放完畢之後,於顯示新畫格時傳送。
frameactivated 在新畫格開始啟動時 (包括尚未顯示的情況) 傳送。
frameautoplayed 在畫格因自動播放而啟動時傳送。這可能會比 frameshown 更容易觸發,因為在一次顯示的多幅畫格中,此事件會針對每一幅畫格個別啟動。
frametap 在使用者輕觸畫格時傳送。
reachleftend 在圖片庫到達最左端時傳送。
reachrightend 在圖片庫到達最右端時傳送。
framemouseover 在使用者將滑鼠游標移至畫格上時傳送。
framemouseout 在使用者將滑鼠游標從畫格上移走時傳送。
trackstart 在滑鼠游標或輕觸拖曳點開始移動時傳送。
track 此元件會記錄滑鼠游標或輕觸拖曳點的 X 和 Y 座標位置資料。
trackend 在滑鼠游標或輕觸拖曳點結束移動時傳送。

方法

名稱 說明
goToFrame(frame:number, opt_animate:string) 前往指定畫格。
rotateOnce(opt_duration:number, opt_direction:string) 將圖片庫中的所有畫格顯示一次。
stopRotation() 暫停目前的自動旋轉動作。
goForwards() 讓圖片庫往前移動一幅畫格。
goBackwards() 讓圖片庫往後移動一幅畫格。
漩渦

gwd-swirl

漩渦元件。

屬性

名稱 說明
yscroll:decimal 在中心區域算繪漩渦動畫時可使用的捲動係數。
settings:string 啟動元件設定對話方塊。

事件

名稱 說明
ready 在載入所有子項素材資源後傳送。
輕按區域

gwd-taparea

點擊/輕觸事件的抽象概念。

屬性

名稱 說明
exit-override-url:string 使用者輕觸「輕按區域」時結束並前往的網址。

事件

名稱 說明
action 在使用者輕觸 (行動裝置) 或點選 (電腦) 按鈕時傳送。
輕觸通話/傳簡訊

gwd-taptocall

這種元件可在點擊或輕觸後呼叫或傳送簡訊給已設定的電話號碼。

屬性

名稱 說明
number:string 要撥打或傳送簡訊的電話號碼。
action:string 選擇要傳送簡訊或撥打電話。

事件

名稱 說明
action 在使用者輕觸 (行動裝置) 或點選 (電腦) 按鈕時傳送。
taptocall 在準備撥打電話或發簡訊時傳送。

方法

名稱 說明
dial() 撥打或傳送簡訊給已設定的電話號碼。
轉換式圖片庫

gwd-transitiongallery

轉換式圖片庫元件。

屬性

名稱 說明
settings:string 啟動元件設定對話方塊。
images:string 圖片庫中使用的圖片路徑字串 (以半形逗號分隔)。
scaling:string 定義以何種方式將圖片調整為符合畫格大小。
exit-urls:string 與圖片庫中的圖片對應的結束網址字串 (以半形逗號分隔)。

事件

名稱 說明
autoplayended 自動播放結束 (不限原因) 後傳送。如果自動播放在到達預計的循環次數時自然結束,則 event.detail.completed 的值為 true,其他情況則為 false。
frameactivated 在新畫格開始啟動時 (包括尚未顯示的情況) 傳送。
frameshown 在顯示新畫格時傳送。
frametap 在使用者輕觸畫格時傳送。
rotateonceended 輪播結束 (不限原因) 後傳送。如果是自然結束,則 event.detail.completed 的值為 true,其他情況則為 False。
reachleftend 在圖片庫到達最左端時傳送。
reachrightend 在圖片庫到達最右端時傳送。

方法

名稱 說明
goToFrame(frame:number, with_animation:boolean) 前往指定畫格。
rotateOnce(startFromCurrentFrame:boolean) 顯示圖片庫中的畫格。如果 startFromCurrentFrame 為 false 或尚未指定,就會從起始畫格開始顯示;其他情況則從當前畫格開始。輪播會在播至起始畫格前停止。
startAutoplay(startFromCurrentFrame:boolean) 開始在圖片庫中自動播放。如果 startFromCurrentFrame 為 false 或尚未指定,就會從起始畫格開始自動播放;其他情況則從當前畫格開始。自動播放達特定循環次數後就會停止播放。
stop() 取消正在播放的動畫。
goForwards() 讓圖片庫往前移動一幅畫格。
goBackwards() 讓圖片庫往後移動一幅畫格。
百葉窗轉場效果

gwd-blinds

百葉窗效果元件會從某一側開始朝另一側逐一展開百頁板,以彷彿隔著百葉窗的形式顯示新圖片。

屬性

名稱 說明
direction:dropdown 轉場效果的方向。
blinds:number 百葉窗的數量。
transparentbackground:boolean 是否要先顯示透明背景,之後再以百葉窗效果顯示新圖片。設為 false 時,百葉窗效果就會重疊在原本的圖片上。
門式轉場效果

gwd-door-wipe

門式效果元件是抹除效果的變化形式,根據抹除效果的方向可分為兩種類型:開門式抹除效果會從原本圖片的中央開始顯示新圖片,就像開啟兩扇門一樣;關門式抹除效果顯示新圖片的方向,則是從原本圖片的兩側到中央,彷彿關上兩扇門。

屬性

名稱 說明
orientation:dropdown 動畫的方向。
direction:dropdown 門式抹除效果的方向。
淡出轉場效果

gwd-fade

這是轉場效果的淡出元件。

圓形放大轉場效果

gwd-iris-wipe

根據預設,圓形放大轉場效果元件會從畫格中央開始,在不斷放大的圓形內顯示新圖片。

屬性

名稱 說明
originpercentx:number 放大的圓形在 X 軸上的起點 (相對於畫格寬度)。
originpercenty:number 放大的圓形在 Y 軸上的起點 (相對於畫格高度)。
推入轉場效果

gwd-push

使用推入轉換效果元件時,新圖片會滑入檢視畫面中,並將原本的圖片推出畫面。

屬性

名稱 說明
direction:dropdown 推入效果的方向。
時鐘效果轉場

gwd-radial-wipe

時鐘效果轉場元件是抹除效果的變化形式,會以類似時鐘指針旋轉的方式 (以某個定點為中心,旋轉顯示半徑範圍) 顯示新圖片。

屬性

名稱 說明
direction:dropdown 轉場效果的方向。
originpercentx:number 旋轉半徑在 X 軸的起點 (相對於畫格寬度),系統會從這裡開始顯示新圖片。
originpercenty:number 旋轉半徑在 Y 軸的起點 (相對於畫格高度),系統會從這裡開始顯示新圖片。
旋轉轉場效果

gwd-rotate

使用旋轉效果元件時,原本的圖片會開始旋轉並放大,然後在旋轉結束後縮小成新圖片。

屬性

名稱 說明
direction:dropdown 轉場效果的方向。
片段轉場效果

gwd-slice

新圖片以片段效果元件顯示時會分成數個片段或長條,並依序滑入檢視畫面中。

屬性

名稱 說明
direction:dropdown 片段效果的方向。
slices:number 分割檢視畫面的片段或長條數量。
transparentbackground:boolean 是否要先顯示透明背景,之後再以片段滑入的效果顯示新圖片。設為 false 時,片段效果就會重疊在原本的圖片上。
分割推入轉場效果

gwd-split-push

分割推入效果元件是推入效果的變化形式,會先將原本的圖片直向/橫向分為兩部分,而新圖片也會以相應的方式分割,進而將舊圖片分別沿相反的方向推出檢視畫面。

屬性

名稱 說明
orientation:dropdown 動畫的方向。
條紋轉場效果

gwd-stripe-wipe

條紋轉場效果元件是抹除效果的變化形式,會讓兩種單色條紋同時交錯在畫面上,條紋覆蓋原本的圖片後就會縮小,最後顯示新圖片。

屬性

名稱 說明
direction:dropdown 轉場效果的方向。
stripes:number 各種顏色的條紋數量。
color1:color 交錯條紋的其中一種顏色,以十六進位值表示。
color2:color 交錯條紋的另一種顏色,以十六進位值表示。
威尼斯百葉窗轉場效果

gwd-venetian-blinds

威尼斯百葉窗效果元件會同時或逐一展開百頁板,以彷彿隔著威尼斯百葉窗的形式顯示新圖片。

屬性

名稱 說明
orientation:dropdown 動畫的方向。
blinds:number 百葉窗的數量。
staggered:boolean 是否讓百葉板延遲轉換。設為 false 時,所有百葉板都會同時轉換。
抹除轉場效果

gwd-wipe

這是轉場效果的抹除元件。在一般的抹除效果中,新圖片會沿著從特定邊緣抹除到另一邊的線,逐漸取代原本的圖片。

屬性

名稱 說明
direction:dropdown 轉場效果的方向。
angle:number 以新圖片取代原本圖片的抹除線角度。
鋸齒形轉場效果

gwd-zigzag

鋸齒形效果元件會沿著方格蜿蜒行進的軌跡逐漸顯示新圖片。橫向的鋸齒形效果會在接續的列上以交錯的方向 (由左到右和由左到右) 顯示新圖片圖塊;直向的鋸齒形效果則會在接續的欄上以交錯的方向 (由上到下和由下到上) 顯示新圖片圖塊。

屬性

名稱 說明
orientation:dropdown 動畫的方向。
rows:number 鋸齒形效果的列數。
columns:number 鋸齒形效果的欄數。
影片

gwd-video

這是納入 HTMLVideoElement 的元件。

屬性

名稱 說明
autoplay:boolean 是否要在載入影片時自動播放影片。
loop:boolean 是否要在影片播放完畢後循環播放。
muted:boolean 影片一開始是否設為靜音狀態。
controls:boolean 是否啟用預設的原生播放器控制項。
sources:file 使用各種格式的影片字串 (以半形逗號分隔)。
poster:string 在使用者播放或跳轉之前持續顯示的網址 (用來指明海報畫格)。

事件

名稱 說明
play 在已暫停播放的媒體開始繼續播放時傳送;也就是在前一個暫停事件之後,於繼續播放內容時傳送。
pause 在暫停播放時傳送。
playing 在開始播放媒體 (包括首次播放、在暫停之後播放以及結束後重新開始播放) 時傳送。
ended 在結束播放時傳送。
volumechange 在變更音訊音量 (包括設定音量及變更靜音屬性) 時傳送。
seeked 在完成搜尋作業後傳送。
waiting 在因為其他操作尚未結束 (例如搜尋) 而無法完成所要求的操作 (例如播放) 時傳送。

方法

名稱 說明
mute() 將影片切換為靜音/取消靜音。
pause() 暫停播放影片。
play() 播放影片。
replay() 重播影片。
seek(time:number) 跳到影片中的指定時間。
setVolume(volume:number) 設定影片的音量。
setSources(sources:string) 設定影片的來源。
YouTube

gwd-youtube

擴充 HTMLElement,以便納入 YouTube API 呼叫。

屬性

名稱 說明
video-url:string 影片的 YouTube 網址。
autoplay:string 在支援的環境中,系統會在載入過程自動播放 YouTube 影片。
preview-duration:number 設定預覽時間長度;僅適用於自動播放屬性設定為 preview 時。
controls:string 顯示影片控制項 (noneautohide)。
color:string 影片進度條的顏色主題 (紅色或白色)。
muted:boolean 影片一開始是否設為靜音狀態。
loop:boolean 是否要在影片播放完畢後循環播放。
pause-on-end:boolean 在影片剩下 1 秒時暫停播放影片。
start-position:number 從指定時間 (秒數) 開始播放影片。
allowfullscreen:boolean 允許在電腦上進入全螢幕模式。
extra-player-args:string 其他 YouTube 播放器參數,相關說明請參閱 https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters

事件

名稱 說明
buffering YouTube 播放器正在緩衝處理中。
ended YouTube 影片已播放到結尾。
paused YouTube 影片已暫停。
playing YouTube 影片開始播放。
replayed YouTube 影片已重播。
viewed0percent 在使用者尚未觀看任何影片內容時傳送。
viewed25percent 在使用者觀看到影片內容的 25% 時傳送。
viewed50percent 在使用者觀看到影片內容的 50% 時傳送。
viewed75percent 在使用者觀看到影片內容的 75% 時傳送。
viewed100percent 在使用者完全看完影片時傳送。
previewed0percent 在使用者尚未觀看任何預覽內容時傳送。
previewed25percent 在使用者觀看到預覽內容的 25% 時傳送。
previewed50percent 在使用者觀看到預覽內容的 50% 時傳送。
previewed75percent 在使用者觀看到預覽內容的 75% 時傳送。
previewed100percent 在使用者完全看完預覽內容時傳送。

方法

名稱 說明
toggleMute() 將影片切換為靜音/取消靜音。
pause() 暫停播放影片。
play() 播放影片。
replay() 重播影片。
seek(time:number) 跳到影片中的指定時間。
setYouTubeId(id:string, cueOnly:boolean) 將 YouTube 影片的來源變更為指定 ID。

這對您有幫助嗎?

我們應如何改進呢?
true
搜尋
清除搜尋內容
關閉搜尋
Google 應用程式
主選單
14686303587735334072
true
搜尋說明中心
true
true
true
true
true
5050422
false
false