jQuery UI API สมาชิก - แท็บ (แท็บ Widget)

ก่อนหน้านี้: jQuery UI API - สมาชิก Rotator (ปินเนอร์ Widget)

ถัดไป: jQuery UI API สมาชิก - กล่องคำแนะนำเครื่องมือ (เคล็ดลับ Widget)

หมวดหมู่

วิดเจ็ต (วิดเจ็ต)

การใช้

คำอธิบาย: หลายแผงพื้นที่เนื้อหาเดียวแต่ละแผงในชื่อรายการ

ใหม่เวอร์ชัน: 1.0

แท็บ (แท็บ) โดยปกติจะใช้เนื้อหาลงในส่วนใหญ่ของส่วนในการสั่งซื้อเพื่อประหยัดพื้นที่เช่นหีบเพลง (หีบเพลง) เดียวกัน

แท็บ (แท็บ) มีเฉพาะชุดของแท็กที่จะต้องใช้ในเพื่อที่จะทำงานได้อย่างถูกต้องแท็บ

แท็บ (แท็บ) จะต้องสั่ง ( <ol> ) หรือเรียงลำดับ ( <ul> รายการ)
"ชื่อ" แท็กของแต่ละหน้าจะต้องเลือกรายการ ( <li> ภายใน) และต้องใช้กับ href แอตทริบิวต์ของสมอ (คน <a> ) แพคเกจ
จานแต่ละแท็กสามารถเป็นองค์ประกอบของหน้าถูกต้องใด ๆ แต่มันก็ต้องมีกัญชา ID สมอเกี่ยวข้องกับ ID ที่สอดคล้องแท็บ

เนื้อหาของแต่ละหน้าแท็บแผ่นสามารถกำหนดในหน้าเป็นสิ่งที่ดีหรืออาจจะโหลดผ่านทางอาแจ็กซ์ ทั้งสองวิธีจะขึ้นอยู่กับหน้าเว็บที่เกี่ยวข้องสมอแท็ก href กระบวนการอัตโนมัติ โดยค่าเริ่มต้นเมื่อคุณคลิกบนแท็บเพื่อเปิดใช้งาน แต่ event ตัวเลือกที่คุณสามารถเปลี่ยนหรือแทนที่เหตุการณ์

นี่คือบางส่วนแท็กตัวอย่าง:

<div id = "แท็บ">
  <ul>
    <li> <a href="#fragment-1"> </a> </ li>
    <li> <a href="#fragment-2"> สอง </a> </ li>
    <li> <a href="#fragment-3"> สาม </a> </ li>
  </ ul>
  <div id = "ชิ้นส่วน-1">
    Lorem Ipsum บังคับ Amet นั่ง, consectetuer adipiscing Elit, sed เส้นผ่าศูนย์กลาง nonummy อะแดปเตอร์ euismod tincidunt UT ปั๊ม dolore Magna แบ่งปัน Erat volutpat
  </ div>
  <div id = "ชิ้นส่วนที่ 2">
    Lorem Ipsum บังคับ Amet นั่ง, consectetuer adipiscing Elit, sed เส้นผ่าศูนย์กลาง nonummy อะแดปเตอร์ euismod tincidunt UT ปั๊ม dolore Magna แบ่งปัน Erat volutpat
  </ div>
  <div id = "ชิ้นส่วน-3">
    Lorem Ipsum บังคับ Amet นั่ง, consectetuer adipiscing Elit, sed เส้นผ่าศูนย์กลาง nonummy อะแดปเตอร์ euismod tincidunt UT ปั๊ม dolore Magna แบ่งปัน Erat volutpat
  </ div>
</ div>

ปฏิสัมพันธ์แป้นพิมพ์

เมื่อโฟกัสอยู่บนแท็บแป้นพิมพ์คำสั่งต่อไปนี้:

ขึ้น / ซ้าย: เลื่อนเคอร์เซอร์ไปที่แท็บก่อนหน้า หากฉลากในหน้าแรกแล้วย้ายโฟกัสไปยังแท็บสุดท้าย ในเวลาสั้น ๆ หลังจากที่เปิดใช้งานของเน้นแท็บ
ลง / ขวา: เลื่อนเคอร์เซอร์ไปที่แท็บถัดไป หากฉลากในหน้าสุดท้ายแล้วย้ายโฟกัสไปที่แท็บแรก ในเวลาสั้น ๆ หลังจากที่เปิดใช้งานของเน้นแท็บ
หน้าแรก: เลื่อนเคอร์เซอร์ไปที่แท็บแรก ในเวลาสั้น ๆ หลังจากที่เปิดใช้งานของเน้นแท็บ
End: เลื่อนเคอร์เซอร์ไปที่แท็บสุดท้าย ในเวลาสั้น ๆ หลังจากที่เปิดใช้งานของเน้นแท็บ
พื้นที่: เปิดใช้งานที่เกี่ยวข้องกับแผงแท็บที่มุ่งเน้น
ENTER: เปิดใช้งานหรือเปลี่ยนที่เกี่ยวข้องกับแผงแท็บที่มุ่งเน้น
ALT + PAGE UP: เลื่อนเคอร์เซอร์ไปที่แท็บก่อนหน้าและใช้งานได้ทันที
ALT + PAGE DOWN: เลื่อนเคอร์เซอร์ไปที่แท็บถัดไปและใช้งานได้ทันที

เมื่อโฟกัสอยู่บนแผงแป้นพิมพ์คำสั่งต่อไปนี้:

CTRL + UP: เลื่อนเคอร์เซอร์ไปที่แท็บที่เกี่ยวข้อง
ALT + PAGE UP: เลื่อนเคอร์เซอร์ไปที่แท็บก่อนหน้าและใช้งานได้ทันที
ALT + PAGE DOWN: เลื่อนเคอร์เซอร์ไปที่แท็บถัดไปและใช้งานได้ทันที

ชุดรูปแบบ

สมาชิก Tab (แท็บ Widget) โดยใช้ กรอบ jQuery UI CSS เพื่อกำหนดรูปลักษณ์และความรู้สึกของสไตล์ หากคุณจำเป็นต้องใช้แท็บสไตล์ที่ระบุคุณสามารถใช้ชื่อคลาส CSS ต่อไปนี้:

ui-tabs : แท็บด้านนอกตู้คอนเทนเนอร์ เมื่อคุณตั้งค่า collapsible ตัวเลือกเรียลไทม์ที่องค์ประกอบเพิ่มเติมมีให้กับ ui-tabs-collapsible ชั้น
- ui-tabs-nav : รายชื่อแท็บ
  - การนำทางรายการจะเปิดใช้งานพร้อมกับ ui-tabs-active คลาส เนื้อหาที่โหลดผ่านโทรอาแจ็กซ์จะปรากฏพร้อมกับรายชื่อของรายการ ui-tabs-loading ชั้น
    - ui-tabs-anchor : สวิตช์สำหรับเบรก
- ui-tabs-panel : แผงแท็บที่เกี่ยวข้องกับ เฉพาะแท็บที่สอดคล้องกันจะปรากฏเฉพาะเมื่อเปิดใช้งาน

วางใจ

UI หลัก (UI หลัก)
ห้องสมุดองค์ประกอบ (โรงงาน Widget)
ผลกระทบหลัก (หลักผลกระทบ) (ตัวเลือก; เมื่อ show และ hide เมื่อใช้ร่วมกับตัวเลือก)

ข้อมูลเพิ่มเติม

ส่วนที่ต้องมีการทำงาน CSS มิฉะนั้นมันจะไม่ทำงาน ถ้าคุณสร้างธีมที่กำหนดเองใช้วิดเจ็ตที่ระบุ CSS แฟ้มเป็นจุดเริ่มต้น

ตัวอย่าง

ง่ายแท็บ jQuery UI (แท็บ)

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> สมาชิกแท็บ (แท็บ Widget) สาธิต </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ head>
<body>
 
<div id = "แท็บ">
  <ul>
    <li> <a href="#fragment-1"> <span> a </ span> </a> </ li>
    <li> <a href="#fragment-2"> <span> สอง </ span> </a> </ li>
    <li> <a href="#fragment-3"> <span> สาม </ span> </a> </ li>
  </ ul>
  <div id = "ชิ้นส่วน-1">
    <p> แท็กแรกถูกเปิดใช้งานโดยค่าเริ่มต้น: </ p>
    <code> $ ( "#tabs") .tabs (); </ code>
  </ div>
  <div id = "ชิ้นส่วนที่ 2">
    Lorem Ipsum บังคับ Amet นั่ง, consectetuer adipiscing Elit, sed เส้นผ่าศูนย์กลาง nonummy อะแดปเตอร์ euismod tincidunt UT ปั๊ม dolore Magna แบ่งปัน Erat volutpat
    Lorem Ipsum บังคับ Amet นั่ง, consectetuer adipiscing Elit, sed เส้นผ่าศูนย์กลาง nonummy อะแดปเตอร์ euismod tincidunt UT ปั๊ม dolore Magna แบ่งปัน Erat volutpat
  </ div>
  <div id = "ชิ้นส่วน-3">
    Lorem Ipsum บังคับ Amet นั่ง, consectetuer adipiscing Elit, sed เส้นผ่าศูนย์กลาง nonummy อะแดปเตอร์ euismod tincidunt UT ปั๊ม dolore Magna แบ่งปัน Erat volutpat
    Lorem Ipsum บังคับ Amet นั่ง, consectetuer adipiscing Elit, sed เส้นผ่าศูนย์กลาง nonummy อะแดปเตอร์ euismod tincidunt UT ปั๊ม dolore Magna แบ่งปัน Erat volutpat
    Lorem Ipsum บังคับ Amet นั่ง, consectetuer adipiscing Elit, sed เส้นผ่าศูนย์กลาง nonummy อะแดปเตอร์ euismod tincidunt UT ปั๊ม dolore Magna แบ่งปัน Erat volutpat
  </ div>
</ div>
 
<script>
$ ( "#tabs") .tabs ();
</ script>
 
</ body>
</ html>

ก่อนหน้านี้: jQuery UI API - สมาชิก Rotator (ปินเนอร์ Widget)

ถัดไป: jQuery UI API สมาชิก - กล่องคำแนะนำเครื่องมือ (เคล็ดลับ Widget)

jQuery UI หลักสูตร

jQuery UI กระทู้

jQuery UI ห้องสมุดองค์ประกอบ

jQuery UI คู่มืออ้างอิง

jQuery UI ตัวอย่าง