สอนทำเว็บขั้นพื้นฐานJavaScript
ผมค้นไปค้นมา ก็เจอโปรเจคบน Git Hub ของคุณ TrevorBurnham ซึ่งทำตัวช่วยสร้าง Ajax Loader แบบคลิ๊กเลือกสี เลือกไอคอน แทรกโค้ด อัพโหลดขึ้น server .. จบ ไม่ต้อง config ค่าอะไร มัน detect ให้เองโดยอัตโนมัติครับ
วิธีการแทรกโค้ด
(1) ไปที่ http://github.hubspot.com/pace/docs/welcome/
(2) สกอลลงไปจนเจอคำว่า PACE.JS ในกรอบสีฟ้า ให้คลิ๊ก ก็จะแสดงโค้ด pace.min.js บนบราวเซอร์
(3) ให้คัดลอกโค้ด pace.min.js ไปไว้ในไฟล์ .js ที่คุณมีอยู่ หรือ จะสร้างไฟล์ .js ขึ้นใหม่ และสามารถตั้งชื่อไฟล์ใหม่เองได้ เช่น loader.js (1)
(2) สกอลลงไปจนเจอคำว่า Theme แตะตรงแถบสีใต้คำว่า Theme เพื่อเลือกสีที่คุณต้องการตามชอบ
(3) ถัดมาจากส่วนของ Theme คือ รูปแบบไอคอน ซึ่งมีหลายแบบ โดยแสดงตัวอย่างเป็นสีที่เราเลือกในข้อ 2 ให้เสร็จสรรพ
(4) ชอบอันไหน ก็คลิ๊กคำว่า Download ก็จะแสดงโค้ด CSS ขึ้นมา ก็คัดลอกไปต่อไว้ในไฟล์ .css ของเราเอง หรือ จะสร้างไฟล์ .css ขึ้นใหม่ แล้วตั้งชื่อใหม่ได้ตามต้องการ เช่น loader.css (2)
(5) ให้แทรกโค้ดต่อไปนี้ลงไปในระหว่างแทค
..
ของไฟล์นั้น ๆ ที่ต้องการ เช่น index.html
< !doctype html > (3)
< head >
< script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" >< /script > (4)
< script src="loader.js" type="text/javascript" >< /script >
< link type="text/css" rel="stylesheet" href="loader.css" />
< /head >
(6) บันทึก และ อัพโหลด 3 ไฟล์ คือ ไฟล์เพจที่เราต้องการให้แสดง Ajax Loader , ไฟล์ .css และ ไฟล์ .jss
(7) ลองเปิดเพจนั้นดู จะเห็นไอคอนสถานะว่า เว็บเพจเรากำลังโหลดไฟล์อยู่ แสดงตรงกลางหน้าจอเลยครับ (แนะนำให้เลือกแบบที่แสดงเปอร์เซ็นต์ จะดีกว่าแบบหมุน ๆ เฉย ๆ เพราะผู้ใช้จะไม่รู้ว่า ต้องรออีกนานไหม)
หมายเหตุ
(1) ถ้าคัดลอกโค้ด js ไปไว้ในไฟล์ js เดิม ไม่ต้องมีแทค < script > .. < /script > นะครับ แต่ถ้าต้องการฝังไว้ในส่วน
..
ก็ต้องมีแทค < script > เปิด และ ปิดด้วยแทค < /script > นะครับ
(2) เช่นเดียวกับข้อ 1 ครับ ไม่ต้องมีแทค < style > .. < /style > นะครับ แต่ถ้าต้องการฝังไว้ในส่วน
..
ก็ต้องมีแทค < style > เปิด และ ปิดด้วยแทค < /style > นะครับ
(3) ต้องกำหนดแบบ html5 เท่านั้นนะครับ โค้ดถึงจะแสดง
(4) เป็นการขอยืมใช้ไฟล์ jquery จาก server ของ google ที่เปิดให้นักพัฒนาทั่วโลก ดึงไปใช้ฟรี ผ่านลิงค์นะครับ
แนะนำโซเชียลของนักเขียน
