ตั้งค่าการอ่าน

ค่าเริ่มต้น

  • เลื่อนอัตโนมัติ
    • ฟอนต์ THSarabunNew
    • ฟอนต์ Sarabun
    • ฟอนต์ Mali
    • ฟอนต์ Trirong
    • ฟอนต์ Maitree
    • ฟอนต์ Taviraj
    • ฟอนต์ Kodchasan
    • ฟอนต์ ChakraPetch
Code for Dek-d Customization

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

  • อัปเดตล่าสุด 9 พ.ค. 59


สำหรับตอนนี้ของบทความ ผู้อ่านจำเป็นต้องมีความรู้เรื่อง 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 เองได้ก็จะสั้นและกระชับมากขึ้น

ติดตามเรื่องนี้
เก็บเข้าคอลเล็กชัน

ผู้อ่านนิยมอ่านต่อ ดูทั้งหมด

loading
กำลังโหลด...

อีบุ๊ก ดูทั้งหมด

loading
กำลังโหลด...

ความคิดเห็น

กำลังโหลด...

ความคิดเห็น

กำลังโหลด...
×
แทรกรูปจากแกลเลอรี่ - Dek-D.com
L o a d i n g . . .
x
เรียงตาม:
ใหม่ล่าสุด
ใหม่ล่าสุด
เก่าที่สุด
ที่กำหนดไว้
*การลบรูปจาก Gallery จะส่งผลให้ภาพที่เคยถูกนำไปใช้ถูกลบไปด้วย

< Back
แทรกรูปโดย URL
กรุณาใส่ URL ที่ขึ้นต้นด้วย
http:// หรือ https://
กำลังโหลด...
ไม่สามารถโหลดรูปภาพนี้ได้
*เมื่อแทรกรูปเป็นการยืนยันว่ารูปที่ใช้เป็นของตัวเอง หรือได้รับอนุญาตจากเจ้าของ และลงเครดิตเจ้าของรูปแล้วเท่านั้น
< Back
สร้างโฟลเดอร์ใหม่
< Back
ครอปรูปภาพ
Picture
px
px
ครอปรูปภาพ
Picture