菜單工具插件可以通過(guò)<ul>創(chuàng)建多級(jí)內(nèi)聯(lián)或彈出式菜單,支持通過(guò)鍵盤(pán)方向鍵控制菜單滑動(dòng),允許為菜單的各個(gè)選項(xiàng)添加圖標(biāo),調(diào)用格式如下:
$(selector).menu({options});
selector參數(shù)為菜單列表中最外層<ul>元素,options為menu()方法的配置對(duì)象。
在頁(yè)面中,通過(guò)<ul>元素內(nèi)聯(lián)的方式構(gòu)建一個(gè)三層結(jié)構(gòu)的導(dǎo)航菜單,并將最外層<ul>元素通過(guò)menu()方法綁定插件,實(shí)現(xiàn)導(dǎo)航菜單的功能
<body>
<ul id=:menu">
<li><a href="#">我最喜歡的食物</a>
<ul>
<li><a href="#">蔬菜</a>
<ul>
<li><a href="#">芹菜</a></li>
<li><a href="#">胡蘿卜</a></li>
<li><a href="#>茄子</a></li>
</ul>
</li>
<li><a href="#">水果</a>
<ul>
<li><a href="#">香蕉</a></li>
<li><a href="#">葡萄</a></li>
</ul>
</li>
<li<a href="#">飲料</a></li>
</ul>
</li>
<li class="ui-state-disabled"><a href="#">我最喜歡的運(yùn)動(dòng)</a></li>
</ul>
<script type="javascript">
$(fuction(){
$("#menu:").menu();
});
</script>
</body>
通過(guò)<ul>內(nèi)嵌的方式,構(gòu)建一個(gè)三層結(jié)構(gòu)的導(dǎo)航菜單,將<li>元素的class屬性值設(shè)為“ui-state-disabled”,可將菜單選項(xiàng)置為不可用狀態(tài)。