สร้างการทำงานที่กำหนดเอง

 

คุณสร้างการทำงานที่กำหนดเองโดยใช้ JavaScript ได้ เมื่อกำหนดการทำงานที่กำหนดเองเรียบร้อยแล้ว คุณก็นำการทำงานดังกล่าวมาใช้ซ้ำในเอกสารได้

วิธีสร้างการทำงานที่กำหนดเอง

1. เพิ่มเหตุการณ์ใหม่โดยคลิกปุ่มเพิ่มเหตุการณ์ ที่ด้านล่างของแผงเหตุการณ์
2. เลือกเป้าหมายและเหตุการณ์
3. สำหรับการทำงาน ให้เลือกกำหนดเอง > เพิ่มการทำงานที่กำหนดเอง Google Web Designer จะแจ้งให้คุณป้อนโค้ดที่กำหนดเอง
   
4. ตั้งชื่อการทำงานในช่องเหนือกล่องโค้ด (หลังคำนำหน้า gwd.)
   • การทำงานที่กำหนดเองแต่ละรายการต้องมีชื่อที่ไม่ซ้ำกันภายในเอกสาร
   • คุณควรตั้งชื่อที่สื่อความหมายเพื่อให้คุณจำการทำงานได้
   • หากคุณป้อนชื่อที่ไม่ถูกต้อง (เช่น ชื่อที่มีเว้นวรรค) ระบบจะขีดเส้นใต้ช่องด้วยสีแดง
5. กำหนดฟังก์ชันในกล่องโค้ด โปรดดู Component API สำหรับรายการพร็อพเพอร์ตี้ เหตุการณ์ และเมธอดที่มีให้สำหรับแต่ละคอมโพเนนต์
6. คลิกตกลง

เหตุการณ์ได้รับการกำหนดค่าให้ใช้การทำงานที่กำหนดเองได้ นอกจากนี้ การทำงานนี้ยังพร้อมใช้สำหรับเหตุการณ์อื่นๆ ที่อยู่ในกำหนดเองด้วย

คุณปรับขนาดกล่องโต้ตอบได้โดยลากที่มุมขวาล่าง

ตัวอย่าง

คุณสามารถใช้การทำงานที่กำหนดเองควบคู่กับคอมโพเนนต์เพื่อเพิ่มฟังก์ชันการทำงานของ Google Web Designer ตัวอย่างทั้งหมดต่อไปนี้ใช้เมธอด document.getElementById เพื่อระบุองค์ประกอบในเอกสารที่ใช้การทำงานนี้

เปิดเสียงวิดีโอทุกครั้งที่เล่น

เพิ่มเหตุการณ์ต่อไปนี้

เป้าหมาย	gwd-video_1 (หรือรหัสของวิดีโอ)
เหตุการณ์	วิดีโอ > เล่นหลังจากหยุดชั่วคราว
การทำงาน	กำหนดเอง > เพิ่มการทำงานที่กำหนดเอง
โค้ดที่กำหนดเอง	if (document.getElementById('gwd-video_1').muted) { document.getElementById('gwd-video_1').mute(); }

 

วิธีใช้โค้ดนี้

• แทนที่ gwd-video_1 ด้วยรหัสของวิดีโอ

แสดงคำบรรยายภาพของแต่ละเฟรมในแกลเลอรีแบบกวาดนิ้วได้

เพิ่มเหตุการณ์ต่อไปนี้

เป้าหมาย	gwd-swipegallery_1 (หรือรหัสของแกลเลอรีแบบกวาดนิ้วได้)
เหตุการณ์	แกลเลอรีแบบกวาดนิ้วได้ > เฟรมที่แสดง
การทำงาน	กำหนดเอง > เพิ่มการทำงานที่กำหนดเอง
โค้ดที่กำหนดเอง	var gallery = document.getElementById('gwd-swipegallery_1'); var div = document.getElementById('caption-div'); var text = { 1: "The text for frame 1", 2: "The text for frame 2", 3: "The text for frame 3" }; div.textContent = text[gallery.currentIndex];

 

วิธีใช้โค้ดนี้

• แทนที่ gwd-swipegallery_1 ด้วยรหัสของแกลเลอรีแบบกวาดนิ้วได้
• แทนที่ caption-div ด้วยรหัสขององค์ประกอบข้อความที่แสดงคำบรรยายภาพ
• แทนที่ข้อความคำบรรยายภาพของแต่ละเฟรมในโค้ดที่กำหนดเอง

ไปยังหน้าถัดไปในโฆษณาหลังจากหยุดชั่วคราว 2 วินาที

เพิ่มเหตุการณ์ต่อไปนี้

เป้าหมาย	page1 (หรือรหัสของหน้าเริ่มต้น)
เหตุการณ์	หน้า > พร้อมนำเสนอหน้า
การทำงาน	กำหนดเอง > เพิ่มการทำงานที่กำหนดเอง
โค้ดที่กำหนดเอง	setTimeout(nextPage, 2000); function nextPage() { document.getElementById('pagedeck').goToNextPage(); }

 

วิธีใช้โค้ดนี้

• แทนที่ page1 ด้วยรหัสของหน้าเริ่มต้น