JqueryUI - เมนู
วิดเจ็ตเมนูมักประกอบด้วยแถบเมนูหลักพร้อมเมนูป๊อปอัป รายการในเมนูป๊อปอัปมักจะมีเมนูป๊อปอัปย่อย สามารถสร้างเมนูโดยใช้องค์ประกอบมาร์กอัปได้ตราบเท่าที่ยังคงรักษาความสัมพันธ์แม่ลูกไว้ (โดยใช้ <ul> หรือ <ol>) รายการเมนูแต่ละรายการมีองค์ประกอบจุดยึด
วิดเจ็ตเมนูใน jQueryUI สามารถใช้สำหรับเมนูแบบอินไลน์และป๊อปอัพหรือเป็นฐานในการสร้างระบบเมนูที่ซับซ้อนมากขึ้น ตัวอย่างเช่นคุณสามารถสร้างเมนูที่ซ้อนกันด้วยการกำหนดตำแหน่งที่กำหนดเอง
jQueryUI มีเมนู () วิธีการในการสร้างเมนู
ไวยากรณ์
menu() วิธีการสามารถใช้ได้สองรูปแบบ -
$ (ตัวเลือกบริบท) .menu (ตัวเลือก)วิธีการ
$ (ตัวเลือกบริบท) .menu ("action", params) Method
$ (ตัวเลือกบริบท) .menu (ตัวเลือก) วิธีการ
เมนู (ตัวเลือก)วิธีการบอกว่าองค์ประกอบ HTML และเนื้อหาของมันควรจะได้รับการรักษาและการจัดการเป็นเมนู ตัวเลือกพารามิเตอร์เป็นวัตถุที่ระบุลักษณะและการทำงานของรายการเมนูที่เกี่ยวข้อง
ไวยากรณ์
$(selector, context).menu (options);
คุณสามารถระบุตัวเลือกได้ครั้งละหนึ่งตัวเลือกโดยใช้วัตถุ Javascript หากมีให้เลือกมากกว่าหนึ่งตัวเลือกคุณจะแยกตัวเลือกโดยใช้ลูกน้ำดังนี้ -
$(selector, context).menu({option1: value1, option2: value2..... });
ตารางต่อไปนี้แสดงตัวเลือกต่างๆที่สามารถใช้ได้กับวิธีนี้ -
ซีเนียร์ | ตัวเลือกและคำอธิบาย |
---|---|
1 | ปิดการใช้งาน ตัวเลือกนี้หากตั้งค่าเป็น trueจะปิดใช้งานเมนู โดยค่าเริ่มต้นคือfalse. Option - disabled ตัวเลือกนี้หากตั้งค่าเป็น trueจะปิดใช้งานเมนู โดยค่าเริ่มต้นคือfalse. Syntax
|
2 | ไอคอน ตัวเลือกนี้ตั้งค่าไอคอนสำหรับเมนูย่อย โดยค่าเริ่มต้นคือ{ submenu: "ui-icon-carat-1-e" }. Option - icons ตัวเลือกนี้ตั้งค่าไอคอนสำหรับเมนูย่อย โดยค่าเริ่มต้นคือ{ submenu: "ui-icon-carat-1-e" }. Syntax
|
3 | เมนู ตัวเลือกนี้เป็นตัวเลือกสำหรับองค์ประกอบที่ทำหน้าที่เป็นที่เก็บเมนูรวมถึงเมนูย่อย โดยค่าเริ่มต้นคือul. Option - menus ตัวเลือกนี้เป็นตัวเลือกสำหรับองค์ประกอบที่ทำหน้าที่เป็นที่เก็บเมนูรวมถึงเมนูย่อย โดยค่าเริ่มต้นคือul. Syntax
|
4 | ตำแหน่ง ตัวเลือกนี้ตั้งค่าตำแหน่งของเมนูย่อยให้สัมพันธ์กับรายการเมนูหลักที่เกี่ยวข้อง โดยค่าเริ่มต้นคือ{ my: "left top", at: "right top" }. Option - position ตัวเลือกนี้ตั้งค่าตำแหน่งของเมนูย่อยให้สัมพันธ์กับรายการเมนูหลักที่เกี่ยวข้อง โดยค่าเริ่มต้นคือ{ my: "left top", at: "right top" }. Syntax
|
5 | บทบาท ตัวเลือกนี้ใช้เพื่อปรับแต่งบทบาท ARIA ที่ใช้สำหรับเมนูและรายการเมนู โดยค่าเริ่มต้นคือmenu. Option - role ตัวเลือกนี้ใช้เพื่อปรับแต่งบทบาท ARIA ที่ใช้สำหรับเมนูและรายการเมนู โดยค่าเริ่มต้นคือmenu. ในฐานะที่เป็นส่วนหนึ่งของ Web Accessibility Initiative (WAI) Accessible Rich Internet Applications Suite (ARIA) กำหนดวิธีที่จะทำให้เนื้อหาเว็บและแอปพลิเคชันเว็บสามารถเข้าถึงได้มากขึ้น ใช้เพื่อปรับปรุงความสามารถในการเข้าถึงเนื้อหาแบบไดนามิกและการควบคุมอินเทอร์เฟซผู้ใช้ขั้นสูงที่พัฒนาด้วย Ajax, HTML, JavaScript และเทคโนโลยีที่เกี่ยวข้อง คุณสามารถอ่านเพิ่มเติมได้ที่: ARIA Syntax
|
ฟังก์ชันเริ่มต้น
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงตัวอย่างง่ายๆของฟังก์ชันวิดเจ็ตเมนูโดยไม่ต้องส่งพารามิเตอร์ไปยังไฟล์ menu() วิธี.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Menu functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-menu {
width: 200px;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#menu-1" ).menu();
});
</script>
</head>
<body>
<!-- HTML -->
<ul id = "menu-1">
<li><a href = "#">Spring</a></li>
<li><a href = "#">Hibernate</a></li>
<li><a href = "#">Java</a>
<ul>
<li><a href = "#">Java IO</a></li>
<li><a href = "#">Swing</a></li>
<li><a href = "#">Jaspr Reports</a></li>
</ul>
</li>
<li><a href = "#">JSF</a></li>
<li><a href = "#">HTML5</a></li>
</ul>
</body>
</html>
ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML menuexample.htmและเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณต้องเห็นผลลัพธ์ต่อไปนี้ด้วย ตอนนี้คุณสามารถเล่นกับผลลัพธ์ -
ในตัวอย่างข้างต้นคุณจะเห็นเมนูที่เป็นธีมได้พร้อมการโต้ตอบของเมาส์และคีย์บอร์ดสำหรับการนำทาง
การใช้ไอคอนและตำแหน่ง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้สองตัวเลือก iconsและ position ในฟังก์ชันเมนูของ JqueryUI
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Menu functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-menu {
width: 200px;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#menu-2" ).menu({
icons: { submenu: "ui-icon-circle-triangle-e"},
position: { my: "right top", at: "right-10 top+5" }
});
});
</script>
</head>
<body>
<!-- HTML -->
<ul id = "menu-2">
<li><a href = "#">Spring</a></li>
<li><a href = "#">Hibernate</a></li>
<li><a href = "#">Java</a>
<ul>
<li><a href = "#">Java IO</a></li>
<li><a href = "#">Swing</a></li>
<li><a href = "#">Jaspr Reports</a></li>
</ul>
</li>
<li><a href = "#">JSF</a></li>
<li><a href = "#">HTML5</a></li>
</ul>
</body>
</html>
ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML menuexample.htmและเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณต้องเห็นผลลัพธ์ต่อไปนี้ด้วย ตอนนี้คุณสามารถเล่นกับผลลัพธ์ -
ในตัวอย่างข้างต้นคุณจะเห็นว่าเราได้ใช้ภาพไอคอนสำหรับรายการเมนูย่อยและเปลี่ยนตำแหน่งเมนูย่อยด้วย
$ (ตัวเลือกบริบท) .menu ("action", params) Method
เมนู ( "การกระทำ" params)วิธีการสามารถดำเนินการกับองค์ประกอบเมนูเช่นเปิด / ปิดการใช้งานเมนู การดำเนินการถูกระบุเป็นสตริงในอาร์กิวเมนต์แรก (เช่น "ปิดการใช้งาน" ปิดใช้งานเมนู) ตรวจสอบการดำเนินการที่สามารถส่งผ่านได้ในตารางต่อไปนี้
ไวยากรณ์
$(selector, context).menu ("action", params);;
ตารางต่อไปนี้แสดงการดำเนินการต่างๆที่สามารถใช้ได้กับวิธีนี้ -
ซีเนียร์ | การดำเนินการและคำอธิบาย |
---|---|
1 | เบลอ ([เหตุการณ์]) การดำเนินการนี้จะลบโฟกัสออกจากเมนู ทำให้เกิดเหตุการณ์เบลอของเมนูโดยการรีเซ็ตรูปแบบองค์ประกอบที่ใช้งานอยู่ โดยที่เหตุการณ์เป็นประเภทEvent และแสดงถึงสิ่งที่ทำให้เมนูเบลอ Action - blur( [event ] ) การดำเนินการนี้จะลบโฟกัสออกจากเมนู ทำให้เกิดเหตุการณ์เบลอของเมนูโดยการรีเซ็ตรูปแบบองค์ประกอบที่ใช้งานอยู่ โดยที่เหตุการณ์เป็นประเภทEvent และแสดงถึงสิ่งที่ทำให้เมนูเบลอ Syntax
|
2 | ยุบ ([เหตุการณ์]) การดำเนินการนี้จะปิดเมนูย่อยที่ใช้งานอยู่ในปัจจุบัน โดยที่เหตุการณ์เป็นประเภทEvent และแสดงถึงสิ่งที่ทำให้เมนูยุบ Action - collapse( [event ] ) การดำเนินการนี้จะปิดเมนูย่อยที่ใช้งานอยู่ในปัจจุบัน โดยที่เหตุการณ์เป็นประเภทEvent และแสดงถึงสิ่งที่ทำให้เมนูยุบ Syntax
|
3 | ยุบทั้งหมด ([เหตุการณ์] [ทั้งหมด]) การดำเนินการนี้จะปิดเมนูย่อยที่เปิดอยู่ทั้งหมด Action - collapseAll( [event ] [, all ] ) การดำเนินการนี้จะปิดเมนูย่อยที่เปิดอยู่ทั้งหมด ที่ไหน -
Syntax
|
4 | ทำลาย() การดำเนินการนี้จะลบฟังก์ชันการทำงานของเมนูโดยสิ้นเชิง สิ่งนี้จะทำให้องค์ประกอบกลับสู่สถานะก่อนเริ่มต้น วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - destroy() การดำเนินการนี้จะลบฟังก์ชันการทำงานของเมนูโดยสิ้นเชิง สิ่งนี้จะทำให้องค์ประกอบกลับสู่สถานะก่อนเริ่มต้น วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax
|
5 | ปิดการใช้งาน () การดำเนินการนี้จะปิดใช้งานเมนู วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - disable() การดำเนินการนี้จะปิดใช้งานเมนู วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax
|
6 | เปิดใช้งาน () การดำเนินการนี้จะเปิดใช้งานเมนู วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - enable() การดำเนินการนี้จะเปิดใช้งานเมนู วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax
|
7 | ขยาย ([เหตุการณ์]) การดำเนินการนี้จะเปิดเมนูย่อยด้านล่างรายการที่ใช้งานอยู่ในปัจจุบันหากมีอยู่ โดยที่เหตุการณ์เป็นประเภทEvent และแสดงถึงสิ่งที่กระตุ้นให้เมนูขยาย Action - expand( [event ] ) การดำเนินการนี้จะเปิดเมนูย่อยด้านล่างรายการที่ใช้งานอยู่ในปัจจุบันหากมีอยู่ โดยที่เหตุการณ์เป็นประเภทEvent และแสดงถึงสิ่งที่กระตุ้นให้เมนูขยาย Syntax
|
8 | โฟกัส ([เหตุการณ์] รายการ) การดำเนินการนี้จะเปิดใช้งานรายการเมนูเฉพาะเริ่มเปิดเมนูย่อยใด ๆ หากมีอยู่และทริกเกอร์เหตุการณ์โฟกัสของเมนู โดยที่เหตุการณ์เป็นประเภทEventและแสดงถึงสิ่งที่เรียกให้เมนูได้รับโฟกัส และรายการเป็นวัตถุ jQuery ที่แสดงรายการเมนูเพื่อโฟกัส / เปิดใช้งาน Action - focus( [event ], item ) การดำเนินการนี้จะเปิดใช้งานรายการเมนูเฉพาะเริ่มเปิดเมนูย่อยใด ๆ หากมีอยู่และทริกเกอร์เหตุการณ์โฟกัสของเมนู โดยที่เหตุการณ์เป็นประเภทEventและแสดงถึงสิ่งที่เรียกให้เมนูได้รับโฟกัส และรายการเป็นวัตถุ jQuery ที่แสดงรายการเมนูเพื่อโฟกัส / เปิดใช้งาน Syntax
|
9 | isFirstItem () การดำเนินการนี้ส่งคืนค่าบูลีนซึ่งระบุว่ารายการเมนูที่ใช้งานอยู่ในปัจจุบันเป็นรายการเมนูแรกหรือไม่ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - isFirstItem() การดำเนินการนี้ส่งคืนค่าบูลีนซึ่งระบุว่ารายการเมนูที่ใช้งานอยู่ในปัจจุบันเป็นรายการเมนูแรกหรือไม่ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax
|
10 | isLastItem () การดำเนินการนี้ส่งคืนค่าบูลีนซึ่งระบุว่ารายการเมนูที่ใช้งานอยู่ปัจจุบันเป็นรายการเมนูสุดท้ายหรือไม่ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - isLastItem() การดำเนินการนี้ส่งคืนค่าบูลีนซึ่งระบุว่ารายการเมนูที่ใช้งานอยู่ปัจจุบันเป็นรายการเมนูสุดท้ายหรือไม่ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax
|
11 | ถัดไป ([เหตุการณ์]) การดำเนินการนี้มอบหมายสถานะที่ใช้งานอยู่ให้กับรายการเมนูถัดไป โดยที่เหตุการณ์เป็นประเภทEvent และแสดงถึงสิ่งที่กระตุ้นให้โฟกัสเคลื่อนที่ Action - next( [event ] ) การดำเนินการนี้มอบหมายสถานะที่ใช้งานอยู่ให้กับรายการเมนูถัดไป โดยที่เหตุการณ์เป็นประเภทEvent และแสดงถึงสิ่งที่กระตุ้นให้โฟกัสเคลื่อนที่ Syntax
|
12 | nextPage ([เหตุการณ์]) การดำเนินการนี้จะย้ายสถานะที่ใช้งานไปยังรายการเมนูแรกที่ด้านล่างของเมนูที่เลื่อนได้หรือรายการสุดท้ายหากไม่สามารถเลื่อนได้ โดยที่เหตุการณ์เป็นประเภทEvent และแสดงถึงสิ่งที่กระตุ้นให้โฟกัสเคลื่อนที่ Action - nextPage( [event ] ) การดำเนินการนี้จะย้ายสถานะที่ใช้งานไปยังรายการเมนูแรกที่ด้านล่างของเมนูที่เลื่อนได้หรือรายการสุดท้ายหากไม่สามารถเลื่อนได้ โดยที่เหตุการณ์เป็นประเภทEvent และแสดงถึงสิ่งที่กระตุ้นให้โฟกัสเคลื่อนที่ Syntax
|
13 | ตัวเลือก (optionName) การดำเนินการนี้ได้รับค่าเชื่อมโยงกับที่ระบุOptionName โดยoptionNameเป็นประเภทString และแสดงถึงชื่อของตัวเลือกที่จะได้รับ Action - option( optionName ) การดำเนินการนี้ได้รับค่าเชื่อมโยงกับที่ระบุOptionName โดยoptionNameเป็นประเภทString และแสดงถึงชื่อของตัวเลือกที่จะได้รับ Syntax
|
14 | ตัวเลือก () การดำเนินการนี้ได้รับวัตถุที่มีคู่คีย์ / ค่าที่แสดงถึงแฮชตัวเลือกเมนูปัจจุบัน Action - option() การดำเนินการนี้ได้รับวัตถุที่มีคู่คีย์ / ค่าที่แสดงถึงแฮชตัวเลือกเมนูปัจจุบัน Syntax
|
15 | ตัวเลือก (optionName ค่า) การดำเนินการนี้ตั้งค่าของตัวเลือกเมนูที่เกี่ยวข้องกับ optionName ที่ระบุ โดยoptionNameเป็นประเภทStringและแสดงถึงชื่อของตัวเลือกที่จะตั้งค่าและค่าเป็นประเภทวัตถุและแสดงถึงค่าที่จะตั้งค่าสำหรับตัวเลือก Action - option( optionName, value ) การดำเนินการนี้ตั้งค่าของตัวเลือกเมนูที่เกี่ยวข้องกับ optionName ที่ระบุ โดยoptionNameเป็นประเภทStringและแสดงถึงชื่อของตัวเลือกที่จะตั้งค่าและค่าเป็นประเภทวัตถุและแสดงถึงค่าที่จะตั้งค่าสำหรับตัวเลือก Syntax
|
16 | option (ตัวเลือก) การดำเนินการนี้ตั้งค่าตัวเลือกอย่างน้อยหนึ่งรายการสำหรับเมนู โดยตัวเลือกเป็นประเภทObject และแสดงแผนที่ของคู่ค่าตัวเลือกที่จะตั้งค่า Action - option( options ) การดำเนินการนี้ตั้งค่าตัวเลือกอย่างน้อยหนึ่งรายการสำหรับเมนู โดยตัวเลือกเป็นประเภทObject และแสดงแผนที่ของคู่ค่าตัวเลือกที่จะตั้งค่า Syntax
|
17 | ก่อนหน้า ([เหตุการณ์]) การดำเนินการนี้จะย้ายสถานะที่ใช้งานไปยังรายการเมนูก่อนหน้า โดยที่เหตุการณ์เป็นประเภทEvent และแสดงถึงสิ่งที่กระตุ้นให้โฟกัสเคลื่อนที่ Action - previous( [event ] ) การดำเนินการนี้จะย้ายสถานะที่ใช้งานไปยังรายการเมนูก่อนหน้า โดยที่เหตุการณ์เป็นประเภทEvent และแสดงถึงสิ่งที่กระตุ้นให้โฟกัสเคลื่อนที่ Syntax
|
18 | PreviousPage ([เหตุการณ์]) การดำเนินการนี้จะย้ายสถานะที่ใช้งานไปยังรายการเมนูแรกเหนือด้านบนของเมนูที่เลื่อนได้หรือรายการแรกหากไม่สามารถเลื่อนได้ โดยที่เหตุการณ์เป็นประเภทEvent และแสดงถึงสิ่งที่กระตุ้นให้โฟกัสเคลื่อนที่ Action - previousPage( [event ] ) การดำเนินการนี้จะย้ายสถานะที่ใช้งานไปยังรายการเมนูแรกเหนือด้านบนของเมนูที่เลื่อนได้หรือรายการแรกหากไม่สามารถเลื่อนได้ โดยที่เหตุการณ์เป็นประเภทEvent และแสดงถึงสิ่งที่กระตุ้นให้โฟกัสเคลื่อนที่ Syntax
|
19 | รีเฟรช () การดำเนินการนี้เริ่มต้นเมนูย่อยและรายการเมนูที่ยังไม่ได้เตรียมใช้งาน วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - refresh() การดำเนินการนี้เริ่มต้นเมนูย่อยและรายการเมนูที่ยังไม่ได้เตรียมใช้งาน วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax
|
20 | เลือก ([เหตุการณ์]) การดำเนินการนี้จะเลือกรายการเมนูที่ใช้งานอยู่ในขณะนี้ยุบเมนูย่อยทั้งหมดและทริกเกอร์เหตุการณ์การเลือกของเมนู โดยที่เหตุการณ์เป็นประเภทEvent และแสดงถึงสิ่งที่กระตุ้นการเลือก Action - select( [event ] ) การดำเนินการนี้จะเลือกรายการเมนูที่ใช้งานอยู่ในขณะนี้ยุบเมนูย่อยทั้งหมดและทริกเกอร์เหตุการณ์การเลือกของเมนู โดยที่เหตุการณ์เป็นประเภทEvent และแสดงถึงสิ่งที่กระตุ้นการเลือก Syntax
|
21 | วิดเจ็ต () การดำเนินการนี้ส่งคืนวัตถุ jQuery ที่มีเมนู วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - widget() การดำเนินการนี้ส่งคืนวัตถุ jQuery ที่มีเมนู วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax
|
ตัวอย่างต่อไปนี้สาธิตวิธีใช้การดำเนินการที่ให้ไว้ในตารางด้านบน
ใช้วิธีปิดการใช้งาน
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้เมธอดdisable ()
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Menu functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-menu {
width: 200px;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#menu-3" ).menu();
$( "#menu-3" ).menu("disable");
});
</script>
</head>
<body>
<!-- HTML -->
<ul id = "menu-3">
<li><a href = "#">Spring</a></li>
<li><a href = "#">Hibernate</a></li>
<li><a href = "#">Java</a>
<ul>
<li><a href = "#">Java IO</a></li>
<li><a href = "#">Swing</a></li>
<li><a href = "#">Jaspr Reports</a></li>
</ul>
</li>
<li><a href = "#">JSF</a></li>
<li><a href = "#">HTML5</a></li>
</ul>
</body>
</html>
ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML menuexample.htm และเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณต้องเห็นผลลัพธ์ต่อไปนี้ -
ในตัวอย่างข้างต้นคุณจะเห็นเมนูถูกปิดใช้งาน
การใช้โฟกัสและการยุบวิธีการทั้งหมด
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้focus ()และวิธีการยุบทั้งหมด
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Menu functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-menu {
width: 200px;
}
</style>
<!-- Javascript -->
<script>
$(function() {
var menu = $("#menu-4").menu();
$( "#menu-4" ).menu(
"focus", null, $( "#menu-4" ).menu().find( ".ui-menu-item:last" ));
$(menu).mouseleave(function () {
menu.menu('collapseAll');
});
});
</script>
</head>
<body>
<!-- HTML -->
<ul id = "menu-4">
<li><a href = "#">Spring</a></li>
<li><a href = "#">Hibernate</a></li>
<li><a href = "#">JSF</a></li>
<li><a href = "#">HTML5</a></li>
<li><a href = "#">Java</a>
<ul>
<li><a href = "#">Java IO</a></li>
<li><a href = "#">Swing</a></li>
<li><a href = "#">Jaspr Reports</a></li>
</ul>
</li>
</ul>
</body>
</html>
ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML menuexample.htm และเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณต้องเห็นผลลัพธ์ต่อไปนี้ -
ในตัวอย่างข้างต้นคุณจะเห็นว่าโฟกัสอยู่ที่รายการเมนูสุดท้าย ตอนนี้ขยายเมนูย่อยและเมื่อเมาส์ออกจากเมนูย่อยเมนูย่อยจะถูกปิด
การจัดการเหตุการณ์ในองค์ประกอบเมนู
นอกเหนือจากเมธอดเมนู (ตัวเลือก) ที่เราเห็นในส่วนก่อนหน้านี้ JqueryUI ยังมีวิธีเหตุการณ์ที่จะถูกทริกเกอร์สำหรับเหตุการณ์หนึ่ง ๆ วิธีการจัดกิจกรรมเหล่านี้แสดงไว้ด้านล่าง -
ซีเนียร์ | วิธีการและคำอธิบายเหตุการณ์ |
---|---|
1 | เบลอ (เหตุการณ์, UI) เหตุการณ์นี้จะเกิดขึ้นเมื่อเมนูสูญเสียโฟกัส Event - blur(event, ui) เหตุการณ์นี้จะเกิดขึ้นเมื่อเมนูสูญเสียโฟกัส โดยที่เหตุการณ์เป็นประเภทเหตุการณ์และuiเป็นประเภทวัตถุและแสดงถึงรายการเมนูที่ใช้งานอยู่ในปัจจุบัน Syntax
|
2 | สร้าง (เหตุการณ์, UI) เหตุการณ์นี้จะถูกทริกเกอร์เมื่อสร้างเมนู Event - create(event, ui) เหตุการณ์นี้จะถูกทริกเกอร์เมื่อสร้างเมนู ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ Syntax
|
3 | โฟกัส (เหตุการณ์, UI) เหตุการณ์นี้จะเกิดขึ้นเมื่อเมนูได้รับโฟกัสหรือเมื่อเปิดใช้งานรายการเมนูใด ๆ Event - focus(event, ui) เหตุการณ์นี้จะเกิดขึ้นเมื่อเมนูได้รับโฟกัสหรือเมื่อเปิดใช้งานรายการเมนูใด ๆ โดยที่เหตุการณ์เป็นประเภทเหตุการณ์และuiเป็นประเภทวัตถุและแสดงถึงรายการเมนูที่ใช้งานอยู่ในปัจจุบัน Syntax
|
4 | เลือก (เหตุการณ์, ui) เหตุการณ์นี้จะถูกทริกเกอร์เมื่อรายการเมนูถูกเลือก Event - select(event, ui) เหตุการณ์นี้จะถูกทริกเกอร์เมื่อรายการเมนูถูกเลือก โดยที่เหตุการณ์เป็นประเภทเหตุการณ์และuiเป็นประเภทวัตถุและแสดงถึงรายการเมนูที่ใช้งานอยู่ในปัจจุบัน Syntax
|
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานเมธอดเหตุการณ์สำหรับฟังก์ชันวิดเจ็ตเมนู ตัวอย่างนี้แสดงให้เห็นถึงการใช้งานของเหตุการณ์สร้าง , เบลอและโฟกัส
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Menu functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-menu {
width: 200px;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#menu-5" ).menu({
create: function( event, ui ) {
var result = $( "#result" );
result.append( "Create event<br>" );
},
blur: function( event, ui ) {
var result = $( "#result" );
result.append( "Blur event<br>" );
},
focus: function( event, ui ) {
var result = $( "#result" );
result.append( "focus event<br>" );
}
});
});
</script>
</head>
<body>
<!-- HTML -->
<ul id = "menu-5">
<li><a href = "#">Spring</a></li>
<li><a href = "#">Hibernate</a></li>
<li><a href = "#">JSF</a></li>
<li><a href = "#">HTML5</a></li>
<li><a href = "#">Java</a>
<ul>
<li><a href = "#">Java IO</a></li>
<li><a href = "#">Swing</a></li>
<li><a href = "#">Jaspr Reports</a></li>
</ul>
</li>
</ul>
<span id = "result"></span>
</body>
</html>
ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML menuexample.htm และเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณต้องเห็นผลลัพธ์ต่อไปนี้ -
ในตัวอย่างข้างต้นเรากำลังพิมพ์ข้อความตามเหตุการณ์ที่เกิดขึ้น