GCSS CSS frame work.

Tabs & Accordion

จุดเด่นของ Tab และ Accordion โดยใช้ GCSS อย่างแรกก็คือ ไม่ต้องใช้ Javascript แต่ก็สามารถใช้ร่วมกับ Javascript ได้ เพื่อให้ได้คุณสมบัติที่ดีกว่า

Accordion

About Us

You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.

You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.

Our Services

You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out.

How we work

You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.

Contact Us

Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price.

โค้ดของ Accordion ตามด้านล่างนี้เลยครับ ส่วนโค้ดเต็มๆสามารถ View Source ดุได้เลยครับ

<section class=accordion> <div> <input checked id=tab1 name=accordion type=radio> <label for=tab1>About</label> <article class=item> ..... </article> </div> <div> <input id=tab2 name=accordion type=radio> <label for=tab2>Services</label> <article class=item> ..... </article> </div> ..... </section>
  • .accordion ใช้สำหรับระบุว่านี่คือ Accordion
  • property checked หากกำหนดให้กับ Input ชนิด radio ตัวใด รายการนั้นจะถือเป็น default แสดงเนื้อหาของรายการนั้นๆตอนเริ่มต้น
  • .item ใช้ระบุให้รายการที่เป็นส่วนของเนื้อหา
  • name ของ Input ชนิด Radio (accordion) แต่ละตัวต้องกำหนดให้เป็นชื่อเดียวกัน
  • id ของ Input ชนิด Radio (tab1) และ for ของ Label ต้องกำหนดให้ตรงกัน

Tabs

About Us

You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.

You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.

Our Services

You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out.

How we work

You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.

Contact Us

Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price.

โค้ดด้านบนเป็นการใช้คลาส gtab เพื่อสร้าง Tabs โดยที่โค้ดนี้สนับสนุน Responsive ด้วยครับ โดยมีการแสดงผลในรูปของปุ่มกด ซึ่ง Tabs นี้สนับสนุนเฉพาะ CSS3 เท่านั้นนะครับ ดังนั้นมันจะสามารถใช้งานได้ตั้งแต่ IE9 ขึ้นไป และ โมเดิร์นบราวเซอร์เท่านั้น

<section class=gtab> <input checked class=tab-1 id=tab-1 name=gtab type=radio> <label for=tab-1>Tab 1</label> ..... <input class=tab-10 id=tab-10 name=gtab type=radio> <label for=tab-10>Tab 10</label> <div class=tab_content> <article class="item tab-1"> ..... </article> ..... <article class="item tab-10"> ..... </article> </div> </section>
  • .gtab ใช้ระบุว่านี่คือ Tabs ครับ
  • property checked หากกำหนดให้กับ Input ชนิด radio ตัวใด รายการนั้นจะถือเป็น default แสดงเนื้อหาของรายการนั้นๆตอนเริ่มต้น
  • name ของ Input ชนิด Radio (gtab) แต่ละตัวต้องกำหนดให้เป็นชื่อเดียวกัน
  • id ของ Input ชนิด Radio (tab-1) และ for ของ Label ต้องกำหนดให้ตรงกัน
  • gtab สนับสนุนการเบื่องต้นสูงสุด 10 รายการคือ tab-1 ถึง tab-10 เท่านั้นครับ
  • .tab_content สำหรับระบุว่าเป็นส่วน เนื้อหาของ Tabs
  • .item สำหรับระบุว่าเป็นส่วนของเนื้อหาของ Tab แต่ละรายการ โดยใช้ร่วมกับ tab-1 ถึง tab-10 เพื่อระบุว่าเป็นรายการใด

ส่วนของเนื้อแสดงตาม URL ที่กำหนดโดย tag a ของ Tab เหมาะสำหรับการใช้ Tab ที่เป็น URL ซึ่งข้อดีของ Tab แบบนี้ก็คือรองรับบราวเซอร์รุ่นเก่าๆ

หมายเหตุ Tab นี้ แสดงผลตาม URL ที่เรียกมานะครับ ดังนั้นจึงอาจไม่เห็นความเปลี่ยนแปลง เมื่อมีการกด Tab

<div class=tab> <ul> <li class=select><a href=tab1.html>Tab 1</a></li> <li><a href=tab2.html>Tab 2</a></li> ..... </ul> <div class=tab_content> ..... </div> </div>

Tabs และ Accordion ที่สนับสนุน Responsive โดยทั่วไปไม่จำเป็นต้องใช้ Javascript เพิ่มเติม แต่จะสนับสนุนบนบราวเซอร์ที่สามารถใช้งาน CSS3 ได้เท่านั้น ดังนั้น IE ตั้งแต่ 8 ลงมา จะไม่สนับสนุน Tabs และ Accordion แบบนี้ ซึ่งถ้าต้องการใช้จริงๆ ใน IE ตั้งแต่ 8 ลงมา อาจต้องใช้ Javascript ร่วมด้วย