API คอมโพเนนต์

แกลเลอรี 360°

gwd-360gallery

วัตถุแกลเลอรีที่แสดงการหมุนวัตถุ

คุณสมบัติ

ชื่อ	คำอธิบาย
images:string	สตริงเส้นทางรูปภาพที่ใช้ในแกลเลอรี ซึ่งคั่นด้วยคอมมา
autoplay:boolean	แกลเลอรีควรจะเล่นรูปภาพในแกลเลอรีโดยอัตโนมัติหลังจากที่แกลเลอรีโหลด
wrap:boolean	แกลเลอรีควรให้ผู้ใช้ปัดไปเรื่อยๆ ตั้งแต่เฟรมแรกถึงเฟรมสุดท้ายแทนที่จะหยุดในตอนท้าย

เหตุการณ์

ชื่อ	คำอธิบาย
firstinteraction	ส่งเมื่อผู้ใช้โต้ตอบกับแกลเลอรีเป็นครั้งแรก
allframesviewed	ส่งเมื่อเฟรมทั้งหมดของแกลเลอรีแสดงอย่างน้อย 1 ครั้ง
allframesloaded	ส่งเมื่อโหลดเฟรมทั้งหมดของแกลเลอรีแล้ว
frameshown	ส่งเมื่อเฟรมใหม่แสดง
frameactivated	ส่งเมื่อเฟรมใหม่ได้เริ่มเปิดใช้งาน แม้ว่าจะยังมองไม่เห็น
frametap	ส่งเมื่อผู้ใช้แตะเฟรม

เมธอด

ชื่อ	คำอธิบาย
goToFrame(frame:number, opt_animate:string, opt_direction:string)	เคลื่อนไหวไปยังเฟรมที่ระบุ
rotateOnce(opt_duration:number, opt_direction:string)	หมุนวัตถุในแกลเลอรี 1 ครั้ง
goForwards()	เลื่อนแกลเลอรีไปข้างหน้าทีละ 1 เฟรม
goBackwards()	เลื่อนแกลเลอรีไปข้างหลังทีละ 1 เฟรม

ฮอตสปอต 3 มิติ

gwd-3d-hotspot

องค์ประกอบสําหรับการแสดงคําอธิบายประกอบในโมเดล 3 มิติ

คุณสมบัติ

ชื่อ	คำอธิบาย
data-position:string	ตําแหน่งของฮอตสปอต
data-normal:string	ด้านหน้าฮอตสปอต
hotspot-name:string	ชื่อฮอตสปอต
hotspot-title:string	ข้อความชื่อเรื่องที่จะแสดงในการ์ดข้อมูล
hotspot-description:string	ข้อความคําอธิบายที่จะแสดงในการ์ดข้อมูล
hide-infocard:boolean	ตัวกำหนดว่าควรจะซ่อนการ์ดข้อมูลไหม

คอนเทนเนอร์ฮอตสปอต 3 มิติ

gwd-3d-hotspot-container

องค์ประกอบคอนเทนเนอร์สําหรับคําอธิบายประกอบในโมเดล 3 มิติ

คุณสมบัติ

ชื่อ	คำอธิบาย
up-image:file	URL สําหรับรูปภาพของฮอตสปอต 3 มิติในสถานะที่ไม่ได้มีการกด
over-image:file	URL สําหรับรูปภาพของฮอตสปอต 3 มิติในสถานะเมาส์โอเวอร์หรือวางเคอร์เซอร์เหนือรูปภาพ
down-image:file	URL สําหรับรูปภาพของฮอตสปอต 3 มิติในสถานะที่มีการกด

โมเดล 3 มิติ

gwd-3d-model

คอมโพเนนต์มุมมอง 3 มิติ

คุณสมบัติ

ชื่อ	คำอธิบาย
id-url:download	รหัสหรือ URL ของโมเดล 3 มิติ
data-gwd-refresh-assets:string	แอตทริบิวต์ที่ Google Web Designer ใช้เพื่อระบุว่าต้องรีเฟรชเนื้อหา 3 มิติไหม
glass:boolean	เปิดใช้ Glass Material สําหรับโมเดล 3 มิติ
src:string	โมเดลที่จะแสดง
transparent:boolean	เปิดใช้พื้นหลังโปร่งใสในโมเดล 3 มิติ
gesture-cue-icon:file	ไอคอนสัญลักษณ์ท่าทางสัมผัส
gesture-cue-text:string	ข้อความที่แสดงใต้ไอคอนสัญลักษณ์ท่าทางสัมผัส
gesture-cue-duration:number	ระยะเวลา (เป็นวินาที) เพื่อแสดงสัญลักษณ์ท่าทางสัมผัส ค่า -1 หมายถึงไม่จำกัดเวลา

เหตุการณ์

ชื่อ	คำอธิบาย
scene-rendered	ส่งหลังจากที่แสดงภาพฉากของโมเดล 3 มิติเป็นครั้งแรก
camera-changed	ส่งเมื่อคุณสมบัติของกล้อง 3 มิติเปลี่ยนแปลง วัตถุ event.detail มีคุณสมบัติปัจจุบันทั้งหมดของกล้อง
hotspot-clicked	ส่งเมื่อมีการคลิกฮอตสปอต วัตถุ event.detail มีชื่อฮอตสปอตที่คลิก
interaction-start	ส่งเมื่อผู้ใช้เริ่มโต้ตอบกับโมเดล 3 มิติ
interaction-end	ส่งเมื่อผู้ใช้หยุดโต้ตอบกับโมเดล 3 มิติ

เมธอด

ชื่อ	คำอธิบาย
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)	เลื่อนและหมุนกล้องเพื่อโฟกัสที่ฮอตสปอต

โปรแกรมดูโมเดล 3 มิติ

gwd-3d-model-viewer

คอมโพเนนต์ที่รวมคอมโพเนนต์โปรแกรมดูโมเดล 3 มิติ

คุณสมบัติ

ชื่อ	คำอธิบาย
src:file	ไฟล์ต้นฉบับของโมเดล 3 มิติ
gesture-cue-icon:file	ไอคอนสัญลักษณ์ท่าทางสัมผัส
gesture-cue-text:string	ข้อความที่แสดงใต้ไอคอนสัญลักษณ์ท่าทางสัมผัส
gesture-cue-duration:number	ระยะเวลา (เป็นวินาที) เพื่อแสดงสัญลักษณ์ท่าทางสัมผัส ค่า -1 หมายถึงไม่จำกัดเวลา
skybox-image:file	ภาพพื้นหลังของฉากโมเดล 3 มิติ
environment-image:file	ควบคุมการสะท้อนสภาพแวดล้อมของโมเดล 3 มิติ

เหตุการณ์

ชื่อ	คำอธิบาย
scene-rendered	ส่งหลังจากที่แสดงภาพฉากของโมเดล 3 มิติเป็นครั้งแรก
camera-changed	ส่งเมื่อคุณสมบัติของกล้อง 3 มิติเปลี่ยนแปลง วัตถุ event.detail มีคุณสมบัติปัจจุบันทั้งหมดของกล้อง
hotspot-clicked	ส่งเมื่อมีการคลิกฮอตสปอต วัตถุ event.detail มีชื่อฮอตสปอตที่คลิก
interaction-start	ส่งเมื่อผู้ใช้เริ่มโต้ตอบกับโมเดล 3 มิติ
interaction-end	ส่งเมื่อผู้ใช้หยุดโต้ตอบกับโมเดล 3 มิติ

เมธอด

ชื่อ	คำอธิบาย
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 Calendar ไหม
yahoo:boolean	ควรใช้ Yahoo Calendar ไหม
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	ส่งเมื่อระดับเสียงเปลี่ยนแปลง (ทั้งเมื่อตั้งค่าระดับเสียงและเมื่อแอตทริบิวต์ muted มีการเปลี่ยนแปลง)
seeked	ส่งเมื่อโอเปอเรเตอร์การค้นหาทำงานเสร็จสิ้น
waiting	ส่งเมื่อโอเปอเรเตอร์ที่ขอ (เช่น การเล่น) ล่าช้าเพราะต้องรอให้โอเปอเรเตอร์อื่น (เช่น การค้นหา) ทำงานเสร็จสิ้น

เมธอด

ชื่อ	คำอธิบาย
mute()	สลับเพื่อปิด/เปิดเสียง
pause()	หยุดเสียงชั่วคราว
play()	เล่นเสียง
replay()	เล่นเสียงซ้ำ
seek(time:number)	ข้ามไปยังเวลาที่ระบุไว้ในเสียง

แกลเลอรีภาพหมุน

gwd-carouselgallery

วัตถุในแกลเลอรีที่แสดงเฟรมของตนในเค้าโครงรูปแบบภาพหมุน

คุณสมบัติ

ชื่อ	คำอธิบาย
images:string	สตริงเส้นทางรูปภาพที่ใช้ในแกลเลอรี ซึ่งคั่นด้วยคอมมา
groups:string	สตริงรหัสกลุ่มซึ่งคั่นด้วยคอมมา
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	สตริง URL การออกซึ่งคั่นด้วยคอมมา และสอดคล้องกับรูปภาพในแกลเลอรี
show-reflection:boolean	แสดงการสะท้อนที่ใช้ CSS3 ไหม
pause-front-media:boolean	เมื่อเฟรมปัจจุบันเปลี่ยนไป ให้หยุดองค์ประกอบของสื่อ (เช่น วิดีโอหรือเสียง) ในเฟรมก่อนหน้าไว้ชั่วคราวไหม
resume-next-media:boolean	เมื่อเฟรมปัจจุบันเปลี่ยนไป ให้องค์ประกอบของสื่อ (เช่น วิดีโอหรือเสียง) ในเฟรมใหม่ในปัจจุบันกลับมาทำงานอีกครั้งไหม

เหตุการณ์

ชื่อ	คำอธิบาย
firstinteraction	ส่งเมื่อผู้ใช้โต้ตอบกับแกลเลอรีเป็นครั้งแรก
allframesviewed	ส่งเมื่อแสดงเฟรมทั้งหมดของแกลเลอรีแล้วอย่างน้อย 1 ครั้ง
allframesloaded	ส่งเมื่อโหลดเฟรมทั้งหมดของแกลเลอรีแล้ว
autoplayended	ส่งเมื่อการเล่นอัตโนมัติสิ้นสุดลงไม่ว่าด้วยเหตุผลใดก็ตาม event.detail.completed จะเป็นจริงหากสิ้นสุดเองตามปกติเมื่อถึงกำหนดการผ่านพ้นระยะเวลาที่ตั้งใจไว้ มิเช่นนั้นจะเป็นเท็จ
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	สตริงแสดงวันที่ในรูปแบบ RFC2822 หรือ ISO 8601
to_date:string	สตริงแสดงวันที่ในรูปแบบ RFC2822 หรือ ISO 8601

เหตุการณ์

ชื่อ	คำอธิบาย
before	ส่งเมื่อวันที่ปัจจุบันอยู่ก่อน from_date (ไม่รวมวันที่ระบุ)
during	ส่งเมื่อวันที่ปัจจุบันอยู่ระหว่าง from_date ถึง to_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)	นำทางไปยังขนาดที่ขยายของโฆษณา หากไม่ได้ระบุรหัสของหน้าไว้ โฆษณาจะนำทางไปยังหน้าเริ่มต้น
exit(url:string, opt_collapseOnExit:boolean, opt_pageId:string)	ออกจากโฆษณาและยุบโฆษณา (หากต้องการ)

ท่าทางสัมผัส

gwd-gesture

วิธีง่ายๆ ในการใช้จำนวนเหตุการณ์ท่าทางสัมผัส

คุณสมบัติ

ชื่อ	คำอธิบาย
touch-action:string	วิธีการตีความการทำงานด้วยการแตะ ค่าที่ถูกต้องคือ auto, none, pan-x และ pan-y ลักษณะการทำงานเริ่มต้นจะเหมือนกับเมื่อตั้งค่าเป็น none

เหตุการณ์

ชื่อ	คำอธิบาย
hover	ส่งเมื่อตำแหน่งเมาส์หรือการแตะเข้ามาในขอบเขตของคอมโพเนนต์
hoverend	ส่งเมื่อตำแหน่งเมาส์หรือการแตะออกจากขอบเขตของคอมโพเนนต์
trackstart	ส่งเมื่อเริ่มลากเมาส์หรือแตะแล้วลาก
track	คอมโพเนนต์จะบันทึกข้อมูลตำแหน่ง X และ Y ที่เชื่อมโยงกับการลากเมาส์หรือการแตะแล้วลาก
trackend	ส่งเมื่อการลากเมาส์หรือการแตะแล้วลากสิ้นสุดลง
tap	ส่งเมื่อลงทะเบียนการแตะหรือการคลิกโดยใช้เมาส์ของผู้ใช้
swipeleft	ส่งเมื่อผู้ใช้ปัดไปทางซ้าย
swiperight	ส่งเมื่อผู้ใช้ปัดไปทางขวา
swipeup	ส่งเมื่อผู้ใช้ปัดขึ้น
swipedown	ส่งเมื่อผู้ใช้ปัดลง

โฆษณา Google

gwd-google-ad

ใช้งานคอนเทนเนอร์โฆษณา Google

คุณสมบัติ

ชื่อ	คำอธิบาย
polite-load:boolean	โฆษณานี้ต้องเป็นไปตามความหมายของการโหลดแบบ Polite ไหม
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)	นำทางไปยังขนาดที่ขยายของโฆษณา หากไม่ได้ระบุรหัสของหน้าไว้ โฆษณาจะนำทางไปยังหน้าเริ่มต้น
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)	ออกจากโฆษณาไปยัง URL ที่ระบุไว้โดยไม่คำนึงถึงค่าที่กำหนดไว้ใน Studio ยุบโฆษณาหาก opt_collapseOnExit เป็นจริง
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)	เปลี่ยน URL ของ 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	URL สำหรับรูปภาพของปุ่มในสถานะที่ไม่ได้มีการกด
over-image:file	URL สำหรับรูปภาพของปุ่มในสถานะเมาส์โอเวอร์หรือวางเหนือ
down-image:file	URL สำหรับรูปภาพของปุ่มในสถานะที่มีการกด
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

เอฟเฟ็กต์รูปภาพที่มีรูปภาพคล้ายกัน 2 รูปจะนํามารวมในการเปรียบเทียบ "ก่อนและหลัง"

เอฟเฟกต์ขยายและย่อรูปภาพ

gwd-breathe

เอฟเฟกต์ที่เคลื่อนไหวรูปภาพให้ขยายและย่ออย่างยืดหยุ่น

เอฟเฟกต์เผยรูปภาพ

gwd-reveal

เอฟเฟกต์รูปภาพที่จะสแกนรูปภาพแรกด้วยพื้นที่โฟกัสรูปวงรี ในขณะเดียวกันก็เผยให้เห็นรูปภาพที่ 2

เอฟเฟกต์คลื่นเปลี่ยนเป็นรูปภาพ

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	ตำแหน่งของผู้ใช้ต้องมีการร้องขอไหม หากตั้งค่าเป็นจริง ผู้ใช้จะได้รับแจ้งให้แชร์ตำแหน่ง
client-id:string	รหัสไคลเอ็นต์ของ Google Maps Premier
search-radius:number	รัศมีขั้นต่ำที่ใช้ในการค้นหาตำแหน่ง หน่วยเป็นเมตร
result-limit:number	จำนวนสูงสุดของผลลัพธ์ที่แสดงในคำค้นหาเดียว
start-zoom:number	การเริ่มต้นระดับการซูม ในหน่วยที่ใช้โดย Google Maps API ค่าเริ่มต้นคือ 16 ซึ่งอยู่ในระดับใกล้เคียง
marker-src:string	ชื่อไฟล์ภาพของ Placemarker ซึ่งเหมือนเป็น Sprite ที่มีคอมโพเนนต์ปิด เปิด และเงา
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	รหัสหน้าของหน้าที่แสดงเนื้อหานี้ได้ดีกว่าในการวางแนวแบบอื่น

เหตุการณ์

ชื่อ	คำอธิบาย
attached	ส่งหลังจากแนบหน้ากับ DOM
detached	ส่งหลังจากนำหน้าออกจาก DOM
pageactivated	ส่งเมื่อพร้อมแสดงหน้า
pagedeactivated	ส่งเมื่อไม่มีการแสดงหน้าอีก
pageload	ส่งหลังจากเนื้อหาของหน้าโหลดเสร็จแล้ว
pagepresenting	ส่งก่อนที่หน้าจะเริ่มต้นภาพเคลื่อนไหวของบทแนะนำ
shake	ส่งเมื่อตรวจพบท่าทางเขย่าของอุปกรณ์
tilt	ส่งเมื่อตรวจพบการเอียงอุปกรณ์
rotatetoportrait	ส่งเมื่ออุปกรณ์หมุนไปเป็นแนวตั้ง
rotatetolandscape	ส่งเมื่ออุปกรณ์หมุนไปเป็นแนวนอน

สำรับหน้า

gwd-pagedeck

PageDeck เป็นคอนเทนเนอร์ของหน้าต่างๆ ซึ่งจะแสดงหน้า 1 หน้าในแต่ละครั้ง และหน้าต่างๆ อาจหมุนเวียนไปอยู่ข้างหน้าในลำดับที่กำหนดไว้ และโดยใช้การเปลี่ยนหน้าที่รองรับ

คุณสมบัติ

ชื่อ	คำอธิบาย
default-page:string	รหัสของหน้าเริ่มต้น

เหตุการณ์

ชื่อ	คำอธิบาย
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()	แสดงหน้าปัจจุบันหรือค่าว่างหากหน้าไม่แสดง
getDefaultPage()	แสดงหน้าเริ่มต้นหากระบุไว้หรือแสดงหน้าแรก
getPage(pageId:string)	แสดงหน้าที่มีรหัสตามที่ระบุ
findPageIndexByAttributeValue(attributeName:string, value:string|number|boolean)	แสดงองค์ประกอบของหน้าที่มีค่าของแอตทริบิวต์เท่ากับค่าที่ระบุหรือ -1 หากไม่พบหน้า
getOrientationSpecificPage(orientation:string, pageId:string)	แสดงหน้าที่สอดคล้องกับการวางแนวที่ระบุไว้
getElementById(id:string)	ค้นหาองค์ประกอบในทุกหน้าในสำรับหน้านี้ที่มีรหัสตามที่ระบุ เนื่องจาก gwd-pagedeck จะเก็บเฉพาะหน้าที่ใช้งานอยู่ใน DOM เท่านั้น document.getElementById(id) มาตรฐานจึงจะไม่แสดงองค์ประกอบในหน้าที่ไม่ได้ใช้งาน ซึ่งเป็น Use Case ทั่วไป โดยเฉพาะอย่างยิ่งในโฆษณาแบบไดนามิกเพื่ออ้างถึงองค์ประกอบในหน้าที่ไม่ได้ใช้งาน ในกรณีเช่นนี้ คุณใช้เมธอดนี้เพื่อหยุดการอ้างถึงองค์ประกอบตามรหัสขององค์ประกอบนั้นได้

พารัลแลกซ์

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	สีที่ 1
color2:color	สีที่ 2
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 ไหม หากตั้งค่าเป็นเท็จ อนุภาคทั้งหมดจะใช้สีที่ 1 เป็นสีเริ่มต้น
shape:string	รูปร่างของสไปรท์
size-max:number	ขนาดสูงสุดของอนุภาคในหน่วยพิกเซล
size-min:number	ขนาดต่ำสุดของอนุภาคในหน่วยพิกเซล
size-rate:number	อัตราการเปลี่ยนแปลงขนาดต่อเฟรม ซึ่งเพิ่มไปยังขนาดปัจจุบันของอนุภาค
skip-forward:number	ข้ามไปยังเวลาที่การปล่อยอนุภาคในระบบถึงตามเปอร์เซ็นต์ที่กำหนด
speed-max:number	ความเร็วสูงสุดของอนุภาคในหน่วยพิกเซล/เฟรม
speed-min:number	ความเร็วต่ำสุดของอนุภาคในหน่วยพิกเซล/เฟรม
sprite-image-src:file	แหล่งที่มาของรูปภาพที่ใช้เป็นสไปรท์
turbulence-frequency:number	ความถี่ของความปั่นป่วน ยิ่งค่าสูงเท่าไร ก็จะเกิดความเคลื่อนไหวผิดปกติบ่อยมากขึ้น ค่านี้ควรเป็นจำนวนบวก
turbulence-rate:number	อัตราการเปลี่ยนแปลงความแรงเมื่อเวลาผ่านไป
turbulence-strength:number	ความแรงของความปั่นป่วนที่ใช้กับอนุภาค ค่านี้ควรเป็นจำนวนบวก
turbulence-trail:number	จำนวนสถานะก่อนหน้าและสถานะปัจจุบันของอนุภาคที่จะแสดงผล

เมธอด

ชื่อ	คำอธิบาย
play()	เล่นภาพเคลื่อนไหว
pause()	หยุดภาพเคลื่อนไหวชั่วคราว
stop()	หยุดภาพเคลื่อนไหว

สไปรท์ชีต

gwd-spritesheet

แสดงคีย์เฟรมหรือภาพเคลื่อนไหวเดียวจากสไปรท์ชีต

คุณสมบัติ

ชื่อ	คำอธิบาย
imagesource:file	URL ของรูปภาพสไปรท์ชีต
offsetx:number	ระยะห่างเป็นพิกเซลจากด้านซ้ายของภาพต่อเรียงไปที่อย่างใดอย่างหนึ่งต่อไปนี้ ขอบด้านซ้ายของภาพใดภาพหนึ่งที่คุณต้องการใช้จากภาพต่อเรียง ขอบด้านซ้ายของชุดรูปภาพแรกที่คุณใช้ในการสร้างภาพเคลื่อนไหว
offsety:number	ระยะห่างเป็นพิกเซลจากด้านบนของภาพต่อเรียงไปที่อย่างใดอย่างหนึ่งต่อไปนี้ ขอบด้านบนของภาพใดภาพหนึ่งที่คุณต้องการใช้จากภาพต่อเรียง ขอบด้านบนของชุดรูปภาพแรกที่คุณใช้ในการสร้างภาพเคลื่อนไหว
clipwidth:number	ความกว้างเป็นพิกเซลของอย่างใดอย่างหนึ่งต่อไปนี้ ภาพที่คุณต้องการใช้จากภาพต่อเรียง รูปภาพต่อเรียงรูปแรกที่คุณใช้ในการสร้างภาพเคลื่อนไหว
clipheight:number	ความสูงเป็นพิกเซลของอย่างใดอย่างหนึ่งต่อไปนี้ ภาพที่คุณต้องการใช้จากภาพต่อเรียง รูปภาพต่อเรียงรูปแรกที่คุณใช้ในการสร้างภาพเคลื่อนไหว
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	ค่าคะแนนการให้ดาวน้อยกว่าคะแนนขั้นต่ำ

Street View

gwd-streetview

คอมโพเนนต์ Google Street View

คุณสมบัติ

ชื่อ	คำอธิบาย
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	กำหนดมุมสูงหรือมุมต่ำของกล้องซึ่งสัมพันธ์กับยานพาหนะของ Street View บ่อยครั้งที่มักจะเป็นมุมแนวนอนแบบราบ แต่ก็ไม่เสมอไป ค่าบวกจะทำให้มุมของกล้องถ่ายรูปเงยขึ้น (โดย 90 องศาหมายถึงตั้งขึ้น) ในขณะที่ค่าลบจะทำให้มุมของกล้องถ่ายรูปต่ำลง (โดย -90 องศาหมายถึงคว่ำลง)
zoom:number	ตั้งการซูมของกล้องให้สัมพันธ์กับยานพาหนะของ Street View

แกลเลอรีแบบปัดดู

gwd-swipegallery

วัตถุแกลเลอรีที่แสดงเฟรมในแถบเนื้อหาแบบปัดดู

คุณสมบัติ

ชื่อ	คำอธิบาย
images:string	สตริงเส้นทางรูปภาพที่ใช้ในแกลเลอรี ซึ่งคั่นด้วยคอมมา
groups:string	สตริงรหัสกลุ่มซึ่งคั่นด้วยคอมมา
transition-duration:number	ความเร็วในการเคลื่อนไหวของแกลเลอรีในหน่วยมิลลิวินาที
start-frame:number	เฟรมแบบฐานหนึ่งที่จะเริ่มต้น
num-frames-to-display:number	จำนวนเฟรมที่จะแสดงพร้อมกัน
frame-snap-interval:number	จำนวนเฟรมที่จะเคลื่อนไปข้างหน้าหลังจากปัดแต่ละครั้ง
autoplay:boolean	หมุนแกลเลอรี 1 ครั้งโดยอัตโนมัติไหม
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	สตริง URL การออกซึ่งคั่นด้วยคอมมา และสอดคล้องกับรูปภาพในแกลเลอรี
disable-gesture:boolean	ซ่อน/ปิดใช้คอมโพเนนต์ท่าทางสัมผัสที่เปิดใช้การนำทางด้วยการแตะของแกลเลอรี
pause-front-media:boolean	เมื่อเฟรมปัจจุบันเปลี่ยนไป ให้หยุดองค์ประกอบของสื่อ (เช่น วิดีโอหรือเสียง) ในเฟรมก่อนหน้าไว้ชั่วคราวไหม
resume-next-media:boolean	เมื่อเฟรมปัจจุบันเปลี่ยนไป ให้องค์ประกอบของสื่อ (เช่น วิดีโอหรือเสียง) ในเฟรมใหม่ในปัจจุบันกลับมาทำงานอีกครั้งไหม

เหตุการณ์

ชื่อ	คำอธิบาย
firstinteraction	ส่งเมื่อผู้ใช้โต้ตอบกับแกลเลอรีเป็นครั้งแรก
allframesviewed	ส่งเมื่อเฟรมทั้งหมดของแกลเลอรีแสดงแล้วอย่างน้อย 1 ครั้ง
allframesloaded	ส่งเมื่อโหลดเฟรมทั้งหมดของแกลเลอรีแล้ว
autoplayended	ส่งเมื่อการเล่นอัตโนมัติสิ้นสุดลงไม่ว่าด้วยเหตุผลใดก็ตาม event.detail.completed จะเป็นจริงหากสิ้นสุดเองตามปกติเมื่อถึงกำหนดการผ่านพ้นระยะเวลาที่ตั้งใจไว้ มิเช่นนั้นจะเป็นเท็จ
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()	เลื่อนแกลเลอรีไปข้างหน้าทีละ 1 เฟรม
goBackwards()	เลื่อนแกลเลอรีไปข้างหลังทีละ 1 เฟรม

หมุนวน

gwd-swirl

คอมโพเนนต์หมุนวน

คุณสมบัติ

ชื่อ	คำอธิบาย
yscroll:decimal	ระยะการเลื่อนที่ใช้สำหรับภาพเคลื่อนไหวแบบหมุนวนเมื่อแสดงในพื้นที่งาน
settings:string	เปิดกล่องโต้ตอบการตั้งค่าคอมโพเนนต์

เหตุการณ์

ชื่อ	คำอธิบาย
ready	ส่งเมื่อโหลดเนื้อหาย่อยทั้งหมดแล้ว

พื้นที่การแตะ

gwd-taparea

Abstraction สำหรับเหตุการณ์การคลิก/แตะ

คุณสมบัติ

ชื่อ	คำอธิบาย
exit-override-url:string	URL ที่จะออกเมื่อแตะพื้นที่การแตะ

เหตุการณ์

ชื่อ	คำอธิบาย
action	ส่งเมื่อผู้ใช้แตะปุ่ม (อุปกรณ์เคลื่อนที่) หรือคลิกปุ่ม (เดสก์ท็อป)

แตะเพื่อโทร/รับส่งข้อความ

gwd-taptocall

คอมโพเนนต์ที่เมื่อคลิกหรือแตะ จะโทรหรือส่ง SMS ไปยังหมายเลขโทรศัพท์ที่กำหนดค่าไว้

คุณสมบัติ

ชื่อ	คำอธิบาย
number:string	หมายเลขโทรศัพท์ที่จะโทรหรือส่งข้อความไป
action:string	เลือกเพื่อส่งข้อความ SMS หรือเริ่มต้นการโทร

เหตุการณ์

ชื่อ	คำอธิบาย
action	ส่งเมื่อผู้ใช้แตะปุ่ม (อุปกรณ์เคลื่อนที่) หรือคลิกปุ่ม (เดสก์ท็อป)
taptocall	ส่งเมื่อการโทรหรือ SMS กำลังเริ่มขึ้น

เมธอด

ชื่อ	คำอธิบาย
dial()	เริ่มต้นการโทรหรือส่งข้อความ SMS ไปยังหมายเลขที่กำหนดค่าไว้

แกลเลอรีการเปลี่ยน

gwd-transitiongallery

คอมโพเนนต์แกลเลอรีการเปลี่ยน

คุณสมบัติ

ชื่อ	คำอธิบาย
settings:string	เปิดกล่องโต้ตอบการตั้งค่าคอมโพเนนต์
images:string	สตริงเส้นทางรูปภาพที่ใช้ในแกลเลอรี ซึ่งคั่นด้วยคอมมา
scaling:string	กำหนดวิธีปรับขนาดรูปภาพให้พอดีกับเฟรม
exit-urls:string	สตริง URL การออกซึ่งคั่นด้วยคอมมา และสอดคล้องกับรูปภาพในแกลเลอรี

เหตุการณ์

ชื่อ	คำอธิบาย
autoplayended	ส่งเมื่อการเล่นอัตโนมัติสิ้นสุดลงไม่ว่าด้วยเหตุผลใดก็ตาม event.detail.completed จะเป็นจริงหากสิ้นสุดเองตามปกติเมื่อถึงกำหนดการผ่านพ้นระยะเวลาที่ตั้งใจไว้ มิเช่นนั้นจะเป็นเท็จ
frameactivated	ส่งเมื่อเฟรมใหม่ได้เริ่มเปิดใช้งาน แม้ว่าจะยังมองไม่เห็น
frameshown	ส่งเมื่อเฟรมใหม่แสดง
frametap	ส่งเมื่อผู้ใช้แตะเฟรม
rotateonceended	ส่งเมื่อการหมุนสิ้นสุดลงไม่ว่าด้วยเหตุผลใดก็ตาม event.detail.completed จะเป็นจริงหากสิ้นสุดเองตามปกติ มิเช่นนั้นจะเป็นเท็จ
reachleftend	ส่งเมื่อเล่นแกลเลอรีไปจนถึงฝั่งซ้ายสุด
reachrightend	ส่งเมื่อเล่นแกลเลอรีไปจนถึงฝั่งขวาสุด

เมธอด

ชื่อ	คำอธิบาย
goToFrame(frame:number, with_animation:boolean)	ไปที่เฟรมที่ระบุ
rotateOnce(startFromCurrentFrame:boolean)	แสดงเฟรมในแกลเลอรีจากเฟรมเริ่มต้น หาก StartFromCurrentFrame เป็นเท็จหรือไม่ได้ระบุ มิเช่นนั้นให้แสดงจากเฟรมปัจจุบัน การหมุนจะหยุดก่อนที่จะถึงเฟรมเริ่มต้น
startAutoplay(startFromCurrentFrame:boolean)	เริ่มเล่นอัตโนมัติในแกลเลอรีจากเฟรมเริ่มต้น หาก StartFromCurrentFrame เป็นเท็จหรือไม่ได้ระบุ มิเช่นนั้นให้เริ่มเล่นจากเฟรมปัจจุบัน การเล่นอัตโนมัติจะหยุดวนซ้ำเมื่อครบตามจำนวนที่กำหนดแล้ว
stop()	ยกเลิกภาพเคลื่อนไหวหากกำลังเคลื่อนไหวอยู่
goForwards()	เลื่อนแกลเลอรีไปข้างหน้าทีละ 1 เฟรม
goBackwards()	เลื่อนแกลเลอรีไปข้างหลังทีละ 1 เฟรม

การเปลี่ยนแบบ Blinds

gwd-blinds

คอมโพเนนต์เอฟเฟกต์ Blinds ที่จะแสดงรูปภาพใหม่ในลักษณะคล้ายกับออกมาจากด้านหลังมู่ลี่หน้าต่าง โดยจะเปิดแผ่นมู่ลี่ทีละแผ่นเริ่มจากขอบด้านหนึ่งไปยังขอบตรงข้าม

คุณสมบัติ

ชื่อ	คำอธิบาย
direction:dropdown	ทิศทางของเอฟเฟกต์
blinds:number	จํานวนแผ่นมู่ลี่
transparentbackground:boolean	เลือกว่าจะเปิดเผยพื้นหลังโปร่งใสก่อนแสดงผลมู่ลี่ของรูปภาพใหม่ไหม หากตั้งค่าเป็นเท็จ แผ่นมู่ลี่จะวางซ้อนบนรูปภาพเก่า

การเปลี่ยนแบบ Door Wipe

gwd-door-wipe

คอมโพเนนต์เอฟเฟกต์ Door Wipe เป็นรูปแบบหนึ่งของเอฟเฟกต์การเลื่อน โดยมีอยู่ 2 แบบขึ้นอยู่กับทิศทางของการเลื่อน เอฟเฟกต์แบบประตูกำลังเปิดและเผยให้เห็นรูปภาพใหม่เริ่มต้นจากตรงกลางของรูปภาพเก่า เหมือนกับว่าประตูที่ซ้อนอยู่กำลังเปิดออกไป เอฟเฟกต์แบบประตูกำลังปิดและเผยให้เห็นรูปภาพใหม่เริ่มต้นจากขอบด้านตรงข้ามของรูปภาพเก่ามายังตรงกลางของรูป เหมือนกับว่าประตูที่ซ้อนอยู่กำลังปิดเข้ามา

คุณสมบัติ

ชื่อ	คำอธิบาย
orientation:dropdown	การวางแนวการเคลื่อนไหว
direction:dropdown	ทิศทางของเอฟเฟกต์ Door Wipe

การเปลี่ยนแบบ Fade

gwd-fade

คอมโพเนนต์การเปลี่ยนที่ทำให้ค่อยๆ จางลง

การเปลี่ยนแบบ Iris Wipe

gwd-iris-wipe

คอมโพเนนต์เอฟเฟกต์แบบ Iris Wipe เป็นการเลื่อนแบบรูม่านตาที่เผยรูปภาพใหม่ด้วยม่านตาวงกลมที่ขยายออกจากตรงกลางของเฟรมซึ่งเป็นค่าเริ่มต้น

คุณสมบัติ

ชื่อ	คำอธิบาย
originpercentx:number	จุดเริ่มต้นของวงกลมที่ขยายออกในแกน x ซึ่งสัมพันธ์กับความกว้างของเฟรม
originpercenty:number	จุดเริ่มต้นของวงกลมที่ขยายออกในแกน y ซึ่งสัมพันธ์กับความสูงของเฟรม

การเปลี่ยนแบบ Push

gwd-push

คอมโพเนนต์เอฟเฟกต์การเปลี่ยนแบบ Push ที่รูปภาพใหม่จะเลื่อนเข้ามาในมุมมองพร้อมๆ กับดันรูปภาพเก่าออกจากมุมมอง

คุณสมบัติ

ชื่อ	คำอธิบาย
direction:dropdown	ทิศทางของเอฟเฟกต์ที่ดันภาพออก

การเปลี่ยนแบบ Radial Wipe

gwd-radial-wipe

คอมโพเนนต์เอฟเฟกต์แบบ Radial Wipe ที่จะแสดงรูปภาพใหม่โดยการวาดรัศมีรอบๆ จุดที่กำหนดเหมือนกับเข็มนาฬิกา

คุณสมบัติ

ชื่อ	คำอธิบาย
direction:dropdown	ทิศทางของเอฟเฟกต์
originpercentx:number	จุดเริ่มต้นในแกน x ซึ่งสัมพันธ์กับความกว้างของเฟรม เป็นจุดเริ่มของการกวาดรัศมีเพื่อเผยรูปภาพใหม่
originpercenty:number	จุดเริ่มต้นในแกน y ซึ่งสัมพันธ์กับความสูงของเฟรม เป็นจุดเริ่มของการกวาดรัศมีเพื่อเผยรูปภาพใหม่

การเปลี่ยนแบบ Rotate

gwd-rotate

คอมโพเนนต์เอฟเฟกต์แบบ Rotate ซึ่งจะหมุนรูปภาพเก่าขณะซูมเข้า จากนั้นซูมออกไปเป็นรูปภาพใหม่ขณะหมุนให้ครบรอบ

คุณสมบัติ

ชื่อ	คำอธิบาย
direction:dropdown	ทิศทางของเอฟเฟกต์

การเปลี่ยนแบบ Slice

gwd-slice

คอมโพเนนต์เอฟเฟกต์แบบ Slice ที่จะแสดงรูปภาพใหม่เป็นชิ้นส่วนหรือเป็นแถบที่เลื่อนเข้ามาในมุมมองทีละชิ้น

คุณสมบัติ

ชื่อ	คำอธิบาย
direction:dropdown	ทิศทางของเอฟเฟกต์ชิ้นส่วน
slices:number	จํานวนชิ้นส่วนหรือแถบที่แบ่งมุมมอง
transparentbackground:boolean	เลือกว่าจะแสดงพื้นหลังโปร่งใสก่อนชิ้นส่วนรูปภาพใหม่จะเลื่อนเข้ามาไหม หากตั้งค่าเป็นเท็จ ชิ้นส่วนจะวางซ้อนบนรูปภาพเก่า

การเปลี่ยนแบบ Split Push

gwd-split-push

คอมโพเนนต์เอฟเฟกต์แบบ Split Push เป็นรูปแบบหนึ่งของเอฟเฟกต์แบบดันออก ซึ่งรูปภาพเก่าจะแยกออกเป็น 2 ส่วนในแนวตั้งหรือแนวนอน ส่วนที่แยกกันของรูปภาพใหม่จะดันแต่ละส่วนของรูปภาพเก่าออกจากมุมมองในทิศทางตรงกันข้าม

คุณสมบัติ

ชื่อ	คำอธิบาย
orientation:dropdown	การวางแนวการเคลื่อนไหว

การเปลี่ยนแบบ Stripe Wipe

gwd-stripe-wipe

คอมโพเนนต์เอฟเฟกต์ Stripe Wipe เป็นเอฟเฟกต์ Wipe รูปแบบหนึ่งที่จะมีแถบสีพื้นสลับกันขยายใหญ่ขึ้นพร้อมกันในหน้าจอเพื่อบดบังรูปภาพเก่า จากนั้นแถบสีจะหดเล็กลงเพื่อแสดงรูปภาพใหม่

คุณสมบัติ

ชื่อ	คำอธิบาย
direction:dropdown	ทิศทางของเอฟเฟกต์
stripes:number	จํานวนแถบของแต่ละสี
color1:color	ค่าเลขฐานสิบหกสําหรับสีหนึ่งของแถบสีที่สลับกัน 2 สี
color2:color	ค่าเลขฐานสิบหกสําหรับอีกสีหนึ่งของแถบสีที่สลับกัน 2 สี

การเปลี่ยนแบบ Venetian Blinds

gwd-venetian-blinds

คอมโพเนนต์เอฟเฟกต์มู่ลี่ที่จะแสดงรูปภาพใหม่ในลักษณะคล้ายกับออกมาจากด้านหลังมู่ลี่ โดยที่แผ่นมู่ลี่เปิดออกพร้อมกันหรือเปิดทีละแผ่น

คุณสมบัติ

ชื่อ	คำอธิบาย
orientation:dropdown	การวางแนวการเคลื่อนไหว
blinds:number	จํานวนแผ่นมู่ลี่
staggered:boolean	เลือกว่าจะให้แผ่นมู่ลี่เปลี่ยนแบบมีการหน่วงเวลาไหม หากตั้งค่าเป็นเท็จ แผ่นมู่ลี่ทั้งหมดจะเปลี่ยนพร้อมกัน

การเปลี่ยนแบบ Wipe

gwd-wipe

คอมโพเนนต์การเปลี่ยนด้วยการเลื่อน ในเอฟเฟกต์การเลื่อนแบบปกติ ซึ่งรูปภาพใหม่จะค่อยๆ แทนที่รูปภาพเก่าหลังเส้นที่เลื่อนจากขอบด้านหนึ่งไปยังขอบด้านตรงข้าม

คุณสมบัติ

ชื่อ	คำอธิบาย
direction:dropdown	ทิศทางของเอฟเฟกต์
angle:number	มุมที่คั่นด้วยเส้นเฉียงซึ่งจะแทนที่รูปภาพเก่าด้วยรูปภาพใหม่

การเปลี่ยนแบบ Zigzag

gwd-zigzag

คอมโพเนนต์เอฟเฟกต์ซิกแซกซึ่งแสดงรูปภาพใหม่ในรูปแบบตารางกริดที่คดเคี้ยวไปมา เอฟเฟกต์ซิกแซกแนวนอนจะเผยชิ้นส่วนของรูปภาพใหม่ในแถวที่ตามมาสลับจากซ้ายไปขวาและขวาไปซ้าย เอฟเฟกต์ซิกแซกแนวตั้งจะเผยชิ้นส่วนของรูปภาพใหม่ในคอมลัมน์ที่ตามมาสลับจากบนลงล่างและล่างขึ้นบน

คุณสมบัติ

ชื่อ	คำอธิบาย
orientation:dropdown	การวางแนวการเคลื่อนไหว
rows:number	จํานวนแถวของเอฟเฟกต์ซิกแซก
columns:number	จํานวนคอลัมน์ของเอฟเฟกต์ซิกแซก

วิดีโอ

gwd-video

คอมโพเนนต์ที่รวม HTMLVideoElement

คุณสมบัติ

ชื่อ	คำอธิบาย
autoplay:boolean	วิดีโอควรเล่นอัตโนมัติเมื่อโหลดเสร็จไหม
loop:boolean	วิดีโอควรวนซ้ำเมื่อเล่นเสร็จไหม
muted:boolean	วิดีโอควรเริ่มต้นด้วยการปิดเสียงไหม
controls:boolean	ตัวควบคุมโปรแกรมเล่นเริ่มต้นที่มีอยู่แต่เดิมมีการเปิดใช้ไหม
sources:file	สตริงวิดีโอในรูปแบบต่างๆ ซึ่งคั่นด้วยคอมมา
poster:string	URL ที่ชี้ไปยังเฟรมโปสเตอร์ซึ่งจะแสดงจนกระทั่งผู้ใช้เล่นหรือกรอ

เหตุการณ์

ชื่อ	คำอธิบาย
play	ส่งเมื่อการเล่นของสื่อเริ่มต้นหลังจากหยุดชั่วคราว กล่าวคือเมื่อกลับมาเล่นอีกครั้งหลังจากเหตุการณ์หยุดชั่วคราวก่อนหน้านี้
pause	ส่งเมื่อหยุดเล่นชั่วคราว
playing	ส่งเมื่อสื่อเริ่มเล่น (เป็นครั้งแรกหลังจากที่หยุดชั่วคราว หรือหลังจากสิ้นสุดแล้วเริ่มต้นใหม่)
ended	ส่งเมื่อเล่นเสร็จสิ้น
volumechange	ส่งเมื่อระดับเสียงเปลี่ยนแปลง (ทั้งเมื่อตั้งค่าระดับเสียงและเมื่อแอตทริบิวต์ muted มีการเปลี่ยนแปลง)
seeked	ส่งเมื่อโอเปอเรเตอร์การค้นหาทำงานเสร็จสิ้น
waiting	ส่งเมื่อโอเปอเรเตอร์ที่ขอ (เช่น การเล่น) ล่าช้าเพราะต้องรอให้โอเปอเรเตอร์อื่น (เช่น การค้นหา) ทำงานเสร็จสิ้น

เมธอด

ชื่อ	คำอธิบาย
mute()	สลับเพื่อปิด/เปิดเสียงวิดีโอ
pause()	หยุดวิดีโอชั่วคราว
play()	เล่นวิดีโอ
replay()	เล่นวิดีโอซ้ำ
seek(time:number)	ข้ามไปยังเวลาที่ระบุไว้ในวิดีโอ
setVolume(volume:number)	ตั้งระดับเสียงของวิดีโอ
setSources(sources:string)	กำหนดแหล่งที่มาของวิดีโอ

YouTube

gwd-youtube

ขยาย HTMLElement เพื่อรวมการเรียก YouTube API

คุณสมบัติ

ชื่อ	คำอธิบาย
video-url:string	URL ของ YouTube สำหรับวิดีโอนั้น
autoplay:string	สำหรับสภาพแวดล้อมที่สนับสนุน วิดีโอ YouTube จะเล่นอัตโนมัติเมื่อมีการโหลด
preview-duration:number	ตั้งค่าระยะเวลาของการแสดงตัวอย่าง ใช้เฉพาะเมื่อแอตทริบิวต์ autoplay ตั้งค่าเป็น preview
controls:string	แสดงการควบคุมวิดีโอ (none, autohide)
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	ส่งเมื่อดูวิดีโอแล้ว 0%
viewed25percent	ส่งเมื่อดูวิดีโอแล้ว 25%
viewed50percent	ส่งเมื่อดูวิดีโอแล้ว 50%
viewed75percent	ส่งเมื่อดูวิดีโอแล้ว 75%
viewed100percent	ส่งเมื่อดูวิดีโอแล้ว 100%
previewed0percent	ส่งเมื่อดูตัวอย่างแล้ว 0%
previewed25percent	ส่งเมื่อดูตัวอย่างแล้ว 25%
previewed50percent	ส่งเมื่อดูตัวอย่างแล้ว 50%
previewed75percent	ส่งเมื่อดูตัวอย่างแล้ว 75%
previewed100percent	ส่งเมื่อดูตัวอย่างแล้ว 100%

เมธอด

ชื่อ	คำอธิบาย
toggleMute()	สลับเพื่อปิด/เปิดเสียงวิดีโอ
pause()	หยุดวิดีโอชั่วคราว
play()	เล่นวิดีโอ
replay()	เล่นวิดีโอซ้ำ
seek(time:number)	ข้ามไปยังเวลาที่ระบุไว้ในวิดีโอ
setYouTubeId(id:string, cueOnly:boolean)	เปลี่ยนแหล่งที่มาของวิดีโอ YouTube เป็นรหัสที่ระบุไว้