Code for Dek-d Customization

ลำดับตอนที่ #7 : [code] ย้ายที่กล่องคอมเมนต์ และการประยุกต์เพื่อย้ายสิ่งต่างๆ

สำหรับตอนนี้ของบทความ ผู้อ่านจำเป็นต้องมีความรู้เรื่อง CSS Selector สำหรับบทความที่ให้ความรู้ในเรื่องดังกล่าวมีดังต่อไปนี้

1. บทความของคุณเบท ตอน "must know about CSS" 1 2 3 4
2. css selector ของ nascent

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

ซึ่งสำหรับวิธีแก้ปัญหาสามารถทำได้สองวิธี

1. ให้ตัวโค้ดแบบฟอร์มเลื่อนหน้าเพจลงไปยังด้านล่างเอง
2. วิธีที่สองก็คือการย้ายกล่องคอมมเนต์ขึ้นมาไว้ด้านบน เหนือลิสของคอมเมนต์

สำหรับวิธีแรกก็จะเป็นโค้ดชุดเดียวกับที่เคยแนะนำไปในตอนที่ 2 สามารถย้อนกลับไปดูได้

ส่วนวิธีที่สองจะมีขั้นตอนคือ ค้นหาโหนดของกล่องคอมเมนต์ ซึ่งสามารถหาได้จากการใช้งาน DevTool ของเว็บบราวเซอร์ หลังจากได้โหนดแล้ว ขั้นต่อไปก็คือการหาตัวอ้างอิงที่เราสามารถใช้โค้ดเพื่อเข้าถึงโหนดนี้ได้ในอนาคต (หรือก็คือ CSS Selector อ่ะแหละ)ที่เหลือก็เป็นแค่การค้นหาโหนดด้วยโค้ด แล้วก็ย้ายตำแหน่ง ก็เป็นอันจบ

---

/* This code is for move comment box up and place it before the commend list in the dek-d article page */ $("document").ready(function () { $("#comment-box").detach().insertBefore($(".comment-list"));   });

See the Pen Dek-D - Move Commentbox by Krerkkiat Chusap (@krerkkiat) on CodePen.

ตัวอย่างสามารถดูได้ที่นี่ หรือข้างล่างของตอนนี้ ที่จะพบว่ากล่องคอมเมนต์เลื่อนขึ้นมาอยู่ด้านบน

---

โดยโค้ดนี้สามารถนำไปประยุกต์ใช้งานเพื่อย้ายตำแหน่งของสิ่งต่างๆ ได้ เพียงแค่เรานำเอา CSS Selctor ที่จะอ้างไปถึงสิ่งเหล่านั้นมาใส่แทนคำว่า #comment-box และเราสามารถกำหนดจุดหมายได้ด้วยการเปลี่ยน .comment-list ไปเป็น CSS Selector ที่อ้างไปถึงจุดหมายที่เราต้องการ

สำหรับการค้นหา CSS Selector ที่ต้องการนั้น เราสามารถใช้ความรู้ที่ได้จากบทความของคุณเบท เพื่อทำการสร้างมันถึงมาเอง หรือจะใช้ Developer Tools ที่มีอยู่ในเว็บบราวเซอร์เพื่อค้นหาข้อมูลสำหรับการสร้าง CSS Selector ได้

สำหรับผู้ที่ใช้ Google Chrome การกด Ctrl + Shift + i หรือ F12 (ถ้าใช้ Microsoft Windows) จะเป็นการเรียกหน้าต่าง Developer Tools ออกมา (ถ้าไม่เห็นภาพอ่านเพิ่มเติมได้ที่นี่)

หลังจากเปิด Developer Tools ได้แล้ว ให้กดตรงรูปแว่นขยาย ซึ่งจะทำให้เราสามารถนำเมาส์ไปชี้ตามส่วนต่างๆ ของเว็บเพจได้ (สังเกตุว่าจะมีกรอบสีขึ้นมาเมื่อเอาเมาส์ไปชี้ตามส่วนต่างๆ ของหน้าเว็บ) ก็ให้คลิกเมาส์บนส่วนที่จะย้ายหรือใช้เป็นเป้าหมาย ซึ่งหลังจากคลิก ก็จะมีการไฮไลท์ในหน้าต่างของ Developer Tools ซึ่งเมื่อเราคลิกขวตรงส่วนที่มีการไฮไลท์ แล้วเลือก Copy CSS Path ก็จะทำให้เราได้ CSS Selector มาใช้งาน

อย่างไรก็ตามวิธีที่กล่าวไปนั่นจะทำให้เราได้ CSS Selector ที่ยาวเกินไป ดังนั้นถ้าเราสามารถสร้าง CSS Selector เองได้ก็จะสั้นและกระชับมากขึ้น