LOGIN_TO_YOUR_ACCOUNT

MOD_BT_LOGIN_USERNAME
MOD_BT_LOGIN_PASSWORD
BT_REMEMBER_ME

CREATE_AN_ACCOUNT

BTL_REQUIRED_FIELD
MOD_BT_LOGIN_NAME
MOD_BT_LOGIN_USERNAME
MOD_BT_LOGIN_PASSWORD
MOD_BT_VERIFY_PASSWORD
MOD_BT_EMAIL
MOD_BT_VERIFY_EMAIL
MOD_BT_CAPTCHA

Font Size

SCREEN

Profile

Layout

Menu Style

Cpanel

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

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

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

 

รูปที่.1

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



รูปที่.2

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

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



รูปที่.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



รูปที่.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



รูปที่.5

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



รูปที่.6

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

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



รูปที่.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



รูปที่.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



รูปที่.9

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



รูปที่.10

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



รูปที่.11

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



รูปที่.12

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


 

modules\mod_tabs_gk4\styles\style2.css



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



รูปที่.13

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