jQuery UI API - เมนูส่วนหนึ่ง (Widget เมนู)

ก่อนหน้านี้: jQuery UI API - ตัวแทนโต้ตอบ (Dialog Widget)

ถัดไป: jQuery UI API - แถบความคืบหน้าสมาชิก (ProgressBar Widget)

หมวดหมู่

การใช้

คำอธิบาย: ด้วยปฏิสัมพันธ์เมาส์และแป้นพิมพ์สำหรับการนำสามารถเมนูแกน

รุ่นใหม่: 1.9

เมนูสามารถสร้างขึ้นด้วยแท็กที่ถูกต้องใด ๆ ตราบใดที่องค์ประกอบที่มีผู้ปกครอง / ความสัมพันธ์ของเด็กอย่างเข้มงวดและแต่ละรายการมีสมอ องค์ประกอบที่พบมากที่สุดคือรายการเรียงลำดับ ( <ul> ):

<ul id = "เมนู">
  <li> <a href="#"> รายการที่ 1 </a> </ li>
  <li> <a href="#"> รายการที่ 2 </a> </ li>
  <li> <a href="#"> วาระที่ 3 </a>
    <ul>
      <li> <a href="#"> รายการ 3-1 </a> </ li>
      <li> <a href="#"> รายการ 3-2 </a> </ li>
      <li> <a href="#"> รายการ 3-3 </a> </ li>
      <li> <a href="#"> รายการ 3-4 </a> </ li>
      <li> <a href="#"> รายการ 3-5 </a> </ li>
    </ ul>
  </ li>
  <li> <a href="#"> วาระที่ 4 </a> </ li>
  <li> <a href="#"> รายการ 5 </a> </ li>
</ ul>

ถ้าคุณใช้ไม่ใช่ <ul> / <li> โครงสร้างสำหรับเมนูและรายการเมนูการใช้องค์ประกอบเดียวกันใช้ menus ตัวเลือกที่จะแยกแยะความแตกต่างระหว่างทั้งสององค์ประกอบเช่น menus: "div.menuElement"

ด้วยการเพิ่มองค์ประกอบ ui-state-disabled ระดับปิดการใช้งานเมนูรายการใด ๆ

ไอคอน

เพื่อเพิ่มไอคอนเมนูรวมถึงไอคอนในแท็กนี้:

<ul id = "เมนู">
  <li> <a href="#"> <ระดับช่วง = "UI-ไอคอน UI-ไอคอนดิสก์"> </ span> บันทึก </a> </ li>
</ ul>

เมนู (เมนู) จะเพิ่มช่องว่างภายในที่จำเป็นในการเข้าสู่ไอคอน

เครื่องสกัด

องค์ประกอบคั่นสามารถสร้างขึ้นโดยรวมของรายการเมนูยกเลิกการเชื่อมโยงรายการเมนูเพียงช่องว่าง / ขีดกลาง:

<ul id = "เมนู">
  <li> <a href="#"> รายการที่ 1 </a> </ li>
  <li> - </ li>
  <li> <a href="#"> รายการที่ 2 </a> </ li>
</ ul>

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

Enter / พื้นที่: เรียกรายการเมนูการกระทำมีโฟกัสอาจเปิดเมนูย่อย
UP: ย้ายไปสอนของรายการเมนู
ลง: ย้ายไปสอนรายการเมนูถัดไป
ขวา: ถ้ามีแล้วเปิดเมนูย่อย
ซ้าย: ปิดปัจจุบันเมนูย่อยย้ายโฟกัสไปที่รายการเมนูแม่ หากโฟกัสไม่ได้อยู่ในเมนูย่อยไม่มีอะไรจะทำ
ESCAPE: ปิดปัจจุบันเมนูย่อยย้ายโฟกัสไปที่รายการเมนูแม่ หากโฟกัสไม่ได้อยู่ในเมนูย่อยไม่มีอะไรจะทำ

กรอกตัวอักษร, เลื่อนเคอร์เซอร์ไปที่รายการแรกเริ่มต้นด้วยตัวอักษรว่า ซ้ำรอบตัวอักษรประสงค์เดียวกันผ่านรายการที่ตรงกัน ครั้งหนึ่งคุณป้อนตัวอักษรตรงกับตัวละครเข้ามา

ปิดการใช้รายการโฟกัสของแป้นพิมพ์ที่มีอยู่ แต่ไม่อนุญาตให้มีปฏิสัมพันธ์ใด ๆ

ชุดรูปแบบ

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

ui-menu : ภาชนะด้านนอกของเมนู ถ้ามีเมนูไอคอนองค์ประกอบจะยังมี ui-menu-icons ชั้น
- ui-menu-item : ภาชนะบรรจุรายการเมนูของแต่ละบุคคล
  - ui-menu-icon : ผ่าน icons ไอคอนเมนูย่อยที่จะตั้งค่าตัวเลือก
- ui-menu-divider : องค์ประกอบคั่นระหว่างรายการเมนู

วางใจ

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

ส่วนที่ต้องมีการทำงาน 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">
  <style>
  .ui เมนู {
    ความกว้าง: 200px;
  }
  </ style>
  <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>
 
<ul id = "เมนู">
  <li> <a href="#"> รายการที่ 1 </a> </ li>
  <li> <a href="#"> รายการที่ 2 </a> </ li>
  <li> <a href="#"> วาระที่ 3 </a>
    <ul>
      <li> <a href="#"> รายการ 3-1 </a> </ li>
      <li> <a href="#"> รายการ 3-2 </a> </ li>
      <li> <a href="#"> รายการ 3-3 </a> </ li>
      <li> <a href="#"> รายการ 3-4 </a> </ li>
      <li> <a href="#"> รายการ 3-5 </a> </ li>
    </ ul>
  </ li>
  <li> <a href="#"> วาระที่ 4 </a> </ li>
  <li> <a href="#"> รายการ 5 </a> </ li>
</ ul>
 
<script>
$ ( "#menu") .menu ();
</ script>
 
</ body>
</ html>