สร้าง Tabs ง่ายๆด้วย Tabs GK4 / GK5

Tag :

สร้าง Tabs ง่ายๆด้วย Tabs GK4 / GK5

   สวัสดีครับ มีเพื่อนๆถามมากันมากในเรื่องของ Tab ในหน้าแรกของเว็บ joomlaup นะครับ ซึ่งจริงๆ แล้ว Script นำมาใส่ในเทมเพลท ผมก็เลยคิดว่าน่าจะลองหา tab ดีๆ มาให้เพื่อนๆ ได้ลองเล่นกันบ้าง ก็เลยนึกถึงเจ้า Tabs GK4 ขึ้นมา เลยเป็นที่มาของวันนี้ว่าเราจะคุยกันถึงเรื่องของ Tabs ที่มีชื่อว่า Tabs GK4 นะครับ สนใจก็ตามไปดูกันเลยครับ..

 

ประเภท : Module

รองรับ จูมล่า : Joomla 3

ดาวน์โหลด : https://extensions.joomla.org/extension/tabs-gk5/

ตัวอย่าง : https://www.gavick.com/best-free-joomla-tab-module

 

 

ก่อนอื่นเพื่อนๆ คงต้องดาน์โหลด Module มาก่อนนะครับ จากนั้นก็ทำการติดตั้งได้เลยนะครับ เมื่อติดตั้งเสร็จแล้ว ก็ให้มาที่เมนู Extensions เลือกที่ Module Manager นะครับหา Module ที่ชื่อว่า Tabs GK4 นะครับ เมื่อเจอแล้วก็คลิ๊กที่ชื่อได้เลยนะครับ ดังรูปที่.1

สร้าง Tabs ง่ายๆด้วย Tabs GK4 / GK5

รูปที่.1

เมื่อเราเข้ามาที่หน้า Module Manager: Module mod_tabs_gk4 แล้วนั้นก็ให้กำหนดรายละเอียดในด้าน Details ก่อนนะครับ ดังรูปที่.2

สร้าง Tabs ง่ายๆด้วย Tabs GK4 / GK5

รูปที่.2

ในส่วน Detials
1.Title กำหนดชื่อของโมดูลนะครับ
2.Show Title กำหนดให้แสดงชื่อของโมดูลหรือไม่
3.Position กำหนดตำแหน่งที่จะแสดงโมดูลครับ
4.Status กำหนดเปิดใช้งานโดยกำหนดให้เป็น Published นะครับ
5.Module Assignment กำหนดแสดงโมดูลในหน้าไหนบ้างนะครับ (อยู่ที่ด้านล่างนะครับ)

จากนั้นเรามาดูที่ละส่วนของรายละเอียดด้านขวากันนะครับ
1.BASIC เป็นรายละเอียดเบื่องต้นของ Tab นะครับ ดังรูปที่.3

สร้าง Tabs ง่ายๆด้วย Tabs GK4 / GK5

รูปที่.3

1.1 Automatic module id เป็นการเปิดใช้ให้ auto สร้างชื่อ id ของ Module ON คือเปิด นะครับ
1.2 Module ID ชื่อ ID ของโมดูล หากเราอยากที่จะกำหนดเองนะครับ
1.3 Module suffix รูปแบบเฉพาะของโมดูลที่อ้างอิงกับ css ของเทมเพลทนะครับ
1.4 Module height กำหนดความสูงของ Module นะครับ

2. Your Tabs เป็นการสร้าง Tabs แต่ละอันนะครับ โดยเราจะลองสร้างใหม่ ดังรูปที่.4

สร้าง Tabs ง่ายๆด้วย Tabs GK4 / GK5

รูปที่.4

2.1 ADD NEW TAB เป็นการสร้าง Tab ใหม่นะครับ
2.2 Title กำหนดชื่อของ Tab ลงไปนะครับ
2.3 Content type เป็นรูปแบบของ Tab โดยเราสามารถสร้างได้ 2 แบบคือ
XHTML คือ การใส่ รายละเอียดเป็น tag HTML ตรงๆลงไปได้เลย หรือเป็นข้อความก็ได้ครับ
Module เป็นการเรียกใช้ Position หรือตำแหน่งของโมดูล มาแสดงในแท็บนี้นะครับ
**ในที่นี้เราจะใช้เป็น Module นะครับ **
2.4 Content ในกรณีถ้าเราเลือกที่หัวข้อ Content type เป็น Module แล้วนั้น ในข้อนี้ก็จะเป็นการ กำหนดชื่อของ Position นะครับ โดยจะมีให้เลือก Tab1-tab10 ครับ
จากนั้นก็ลอง save นะครับ เราก็จะได้ดังรูปที่.5

สร้าง Tabs ง่ายๆด้วย Tabs GK4 / GK5

รูปที่.5

จากนั้นเรากำหนด tab ตามที่ต้องการนะครับ ก็จะได้ดังรูปที่.6

สร้าง Tabs ง่ายๆด้วย Tabs GK4 / GK5

รูปที่.6

โดยแต่ละ TAB นั้น เราต้องกำหนดในข้อ Content ให้ต่างกัน นะครับ เช่น Tab ข่าวสาร หัวข้อ Content ก็จะเป็น tab1 และ Tab เรื่องเด่น หัวข้อ Content ก็จะเป็น tab2 นะครับ เป็นต้น

3. Interface เป็นการกำหนดรูปแบบของแท็บนะครับ ดังรูปที่.7

สร้าง Tabs ง่ายๆด้วย Tabs GK4 / GK5

รูปที่.7

3.1 Buttons prev/next กำหนดให้แสดงปุ่ม prev/next หรือไม่ ON คือแสดงนะครับ
3.2 Tap position กำหนดในส่วนของชื่อแท็บต่างๆ ให้แสดงอยู่ด้าน บน หรือ ด้านล่าง
3.3 Module style กำหนดรูปแบบที่จะใช้ของ TAB นะครับ ในที่นี้ผมจะใช้รูปแบบที่ 2 ก็คือ style 2 นะครับ

4.Animation เป็นการกำหนดในส่วนของ Animation ของ tab นะครับ ดังรูปที่.8

สร้าง Tabs ง่ายๆด้วย Tabs GK4 / GK5

รูปที่.8

4.1 Animation activator เป็นการกำหนดการทำงานของ Animation ว่าจะทำงานก็ต่อเมื่อระหว่าง Click กับ นำ Mouse ไปวางตรง tab นะครับ ให้เราใช้ค่าเดิมคือ Click นะครับ
4.2 Auto animation เป็นการกำหนดให้แสดง Animation เลยหลังจากที่โหลดหน้าเว็บไซต์เสร็จใช่หรือไม่ ON เป็นใช่ นะครับ
4.3 Animation speed กำหนดความเร็วในการเปลี่ยน Tab ของ Animation นะครับ
ส่วนข้ออื่นๆ ก็ไว้ตามเดิมก็ได้ครับ ไม่ต้องไปปรับอะไร

5. Advanced settings เป็นการกำหนดการใช้งานฟังค์ชั่นอื่นๆ นะครับ เช่นการโหลด script หรือการ กำหนดเปิดใช้ css นะครับ อันนี้เราไม่ต้องไปปรับอะไรครับ ใช้ค่าเดิมไปก่อนก็ได้ครับ ดังรูปที่.9

สร้าง Tabs ง่ายๆด้วย Tabs GK4 / GK5

รูปที่.9

เมื่อเสร็จแล้วก็ให้เรา Save & Close นะครับ จากนั้นลองไปดูที่หน้าเว็บไซต์เราก็จะได้ ดังรูปที่.10

สร้าง Tabs ง่ายๆด้วย Tabs GK4 / GK5

รูปที่.10

เพื่อนๆ จะเห็นว่าเราได้ TAB มาใช้แล้วนะครับ แต่ว่าตอนนี้ยังว่างอยู่ ก็ให้เราไปนำ Module ตัวอื่นๆ ที่จะแสดงเนื้อหาหรือสิ่งที่เพื่อนๆต้องการแสดงใน tab มาใส่ตาม position ของแต่ละ Tab นะครับ ( โดยการพิมพ์ชื่อ tab1 , tab2 , tab3 เข้าไปได้เลยนะครับ เพราะจะไม่มีรายการให้เลือกนะครับ ดังรูปที่ .11

สร้าง Tabs ง่ายๆด้วย Tabs GK4 / GK5

รูปที่.11

1.ในส่วนชื่อ Titel และกำหนดแสดงชื่อ Title นั้น จะไม่ส่งผลต่อ tab นะครับ คือ Tab จะไม่แสดงในส่วนชื่ออยู่แล้วนะครับ
2.กำหนด position ลงไป โดยการ พิมพ์ลงไปที่ช่องได้เลยนะครับ ในที่นี้เราจะให้แสดงในแท็บข่าวสาร ก็ให้ใส่เป็น tab1 ลงไปนะครับ แล้วก็ Save & Close นะครับ จากนั้นไปดูที่หน้าเว็บไซต์ เราก็จะได้ดังรูปที่.12

สร้าง Tabs ง่ายๆด้วย Tabs GK4 / GK5

รูปที่.12

ตอนนี้เราก็ได้ Tab ไว้ใช้งานแล้วนะครับ สิ่งที่ต้องระวังก็คือ ความสูงนั้น อาจจะไม่พอดี เราต้องกะให้สูงกว่าปกติหน่อยนะครับ โดยกำหนดในหัวข้อ Height ของ TabGK4 ให้สูงกว่าเนื้อหาเล็กน้อย นะครับเพื่อความสวยงาม และอีกอย่างคือ รูปแบบ หรือ Style นั้น เราสามารถแก้ไขได้จากไฟล์ css ของแต่ละ style โดยในที่นี้ เป็น style 2 พาทของไฟล์ก็คือ

modules\mod_tabs_gk4\styles\style2.css 

 โดยเราอาจจะปรับสี หรือขนาดตัวอักษรก็ตามใจชอบเลยนะครับ ที่นีมาทดสอบ ผมลองปรับในไฟล์ style2.css ผลที่ได้ก็ดังรูปที่.13 


สร้าง Tabs ง่ายๆด้วย Tabs GK4 / GK5

รูปที่.13

เป็นไงครับ ไม่ยากเหมือนเดิมใช่ไหมครับ เพื่อนก็ลองเล่นดูนะครับ เพราะตัว tab นี้ก็เป็นอีกลูกเล่นหนึ่งที่เว็บส่วนมากต้องมีอยู่แล้วนะครับ หวังว่าคงจะชอบกันนะครับ

 

 

ขอบคุณครับ
Webmaster JoomlaHitz.com (ริว)

 รับทำเว็บไซต์  ดูแลเว็บไซต์  สอนทำเว็บไซต์ www.joomla-creative.com

 

 

Tag :

บทความอื่นๆ ที่น่าสนใจ

คุณอาจสนใจ

สถิติผู้เข้าชม

2.png3.png7.png6.png1.png1.png
Today99
Yesterday503
This week1356
This month6783
Total237611

ผู้เข้าชม

3
Online
22 สิงหาคม 2562