บทช่วยสอน jQuery UI เช่น - เมนู (เมนู) ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ฟังก์ชั่นเริ่มต้น,ไอคอน,
มีปฏิสัมพันธ์กับเมาส์และแป้นพิมพ์ที่สามารถใช้เพื่อนำทางชุดรูปแบบของเมนู
สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับส่วนประกอบของเมนูโปรดดูที่เอกสาร API ส่วนประกอบเมนู (เมนู Widget)
กับการกำหนดค่าเริ่มต้นปิดการใช้งานเมนูรายการซ้อนกันและเมนู มันประกอบไปด้วยรายการของรูปแบบแปลงและเสริมและสนับสนุนเมาส์และแป้นพิมพ์ปฏิสัมพันธ์ ลองใช้ปุ่มลูกศรในการเลือกเมนู
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI เมนู (เมนู) - ฟังก์ชั่นเริ่มต้น </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "#menu") .menu ();
});
</ script>
<style>
.ui เมนู {กว้าง: 150px;}
</ style>
</ head>
<body>
<ul id = "เมนู">
<ระดับ Li = "UI รัฐพิการ"> <a href="#"> อเบอร์ดีน </a> </ li>
<li> <a href="#"> Ada </a> </ li>
<li> <a href="#"> Adamsville </a> </ li>
<li> <a href="#"> Addyston </a> </ li>
<li>
<a href="#"> Delphi </a>
<ul>
<ระดับ Li = "UI รัฐพิการ"> <a href="#"> Ada </a> </ li>
<li> <a href="#"> ซาร์ลันด์ </a> </ li>
<li> <a href="#"> Salzburg </a> </ li>
</ ul>
</ li>
<li> <a href="#"> ซาร์ลันด์ </a> </ li>
<li>
<a href="#"> Salzburg </a>
<ul>
<li>
<a href="#"> Delphi </a>
<ul>
<li> <a href="#"> Ada </a> </ li>
<li> <a href="#"> ซาร์ลันด์ </a> </ li>
<li> <a href="#"> Salzburg </a> </ li>
</ ul>
</ li>
<li>
<a href="#"> Delphi </a>
<ul>
<li> <a href="#"> Ada </a> </ li>
<li> <a href="#"> ซาร์ลันด์ </a> </ li>
<li> <a href="#"> Salzburg </a> </ li>
</ ul>
</ li>
<li> <a href="#"> Perch </a> </ li>
</ ul>
</ li>
<ระดับ Li = "UI รัฐพิการ"> <a href="#"> Amesville </a> </ li>
</ ul>
</ body>
</ html>
เมนูที่มีการกำหนดค่าเริ่มต้นที่แสดงให้เห็นถึงวิธีการใช้งานเมนูที่มีไอคอน
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI เมนู (เมนู) - ไอคอน </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "#menu") .menu ();
});
</ script>
<style>
.ui เมนู {กว้าง: 150px;}
</ style>
</ head>
<body>
<ul id = "เมนู">
<li> <a href="#"> <ระดับช่วง = "UI-ไอคอน UI-ไอคอนดิสก์"> </ span> บันทึก </a> </ li>
<li> <a href="#"> <ระดับช่วง = "UI-ไอคอน UI-ไอคอน ZoomIn"> </ span> ขยาย </a> </ li>
<li> <a href="#"> <ระดับช่วง = "UI-ไอคอน UI-ไอคอน ZoomOut"> </ span> ที่นี่ </a> </ li>
<ระดับ Li = "UI รัฐพิการ"> <a href="#"> <ระดับช่วง = "UI-ไอคอน UI-ไอคอนพิมพ์"> </ span> พิมพ์ th. </a> </ li >
<li>
<a href="#"> เล่น </a>
<ul>
<li> <a href="#"> <ระดับช่วง = "UI-ไอคอน UI-ไอคอนแสวงหาจุดเริ่มต้น"> </ span> บน </a> </ li>
<li> <a href="#"> <ระดับช่วง = "UI-ไอคอน UI-ไอคอนแบบครบวงจร"> </ span> หยุด </a> </ li>
<li> <a href="#"> <ระดับช่วง = "UI-ไอคอน UI-ไอคอนเล่น"> </ span> Play </a> </ li>
<li> <a href="#"> <ระดับช่วง = "UI-ไอคอน UI-ไอคอนแสวงหาสิ้น"> </ span> ถัด </a> </ li>
</ ul>
</ li>
</ ul>
</ body>
</ html>