菜單工具插件——menu
菜單工具插件可以通過<ul>創(chuàng)建多級內(nèi)聯(lián)或彈出式菜單，支持通過鍵盤方向鍵控制菜單滑動，允許為菜單的各個選項添加圖標，調(diào)用格式如下：
$(selector).menu({options});
selector參數(shù)為菜單列表中最外層<ul>元素，options為menu()方法的配置對象。
例如，在頁面中，通過<ul>元素內(nèi)聯(lián)的方式構(gòu)建一個三層結(jié)構(gòu)的導航菜單，并將最外層<ul>元素通過menu()方法綁定插件，實現(xiàn)導航菜單的功能，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，通過<ul>內(nèi)嵌的方式，構(gòu)建一個三層結(jié)構(gòu)的導航菜單，將<li>元素的class屬性值設(shè)為“ui-state-disabled”，可將菜單選項置為不可用狀態(tài)。
任務(wù)
我來試試，親自調(diào)用菜單插件構(gòu)建一個四層結(jié)構(gòu)的菜單
在下列代碼的第43行，調(diào)用菜單插件的meun()方法，定義一個四層結(jié)構(gòu)的導航式菜單。
- ?不會了怎么辦
-
- 先通過選擇器獲取最外一層的<ul>元素，然后，再通過該元素調(diào)用菜單插件中的
menu()方法，將構(gòu)建的頁面元素與插件相綁定。
- “menu()”方法書寫是否正確，在方法中，即使不添加配置對象，也必須添加括號。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>菜單工具插件</title>
<link href="http://idcbgp.cn/data/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://idcbgp.cn/data/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="http://idcbgp.cn/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
</head>
<body>
<ul id="menu">
<li><a href="#">小明一中</a>
<ul>
<li><a href="#">高中部</a>
<ul>
<li><a href="#">高一(1)班</a></li>
<li><a href="#">高一(2)班</a></li>
<li><a href="#">高一(3)班</a>
<ul>
<li><a href="#">小胡</a></li>
<li><a href="#">小李</a></li>
<li><a href="#">小陳</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">初中部</a>
<ul>
<li><a href="#">初一(1)班</a></li>
<li><a href="#">初一(2)班</a></li>
<li><a href="#">初一(3)班</a></li>
</ul>
</li>
<li><a href="#">教研部</a></li>
</ul>
</li>
<li class="ui-state-disabled"><a href="#">大明二中</a></li>
</ul>
<script type="text/javascript">
$(function () {
?
});
</script>
</body>
</html>
body
{
font-size: 62.5%;
}
.ui-menu
{
width: 150px;
}
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
