菜单工具插件
2017-11-30 本文已影响0人
你说我的笑绽放在过去
菜单工具插件可以通过<ul>创建多级内联或弹出式菜单，支持通过键盘方向键控制菜单滑动，允许为菜单的各个选项添加图标，调用格式如下：
$(selector).menu({options});
selector参数为菜单列表中最外层<ul>元素，options为menu()方法的配置对象。
在页面中，通过<ul>元素内联的方式构建一个三层结构的导航菜单，并将最外层<ul>元素通过menu()方法绑定插件，实现导航菜单的功能
<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="#">我最喜欢的运动</a></li>
</ul>
<script type="javascript">
$(fuction(){
$("#menu:").menu();
});
</script>
</body>
通过<ul>内嵌的方式，构建一个三层结构的导航菜单，将<li>元素的class属性值设为“ui-state-disabled”，可将菜单选项置为不可用状态。
