不得不爱开源 Wijmo jQuery 插件集(3)-【菜单】(附页面展示和源码)
程序员文章站
2022-03-19 08:49:09
...
经过前两篇文章的介绍我们了解了 开源Wijmo jQuery 插件集 所包含的 插件 和 多种Theme 样式。还为刚入门的朋友提供了 jQuery 入门的一些基础知识。
有些朋友第一次看到本系列文章,所以给出前篇文章的链接:
同时也再次感谢园子中朋友的支持,从这篇文章起,我们就分别介绍 开源Wijmo jQuery 插件集 中的插件。这篇文章我们将介绍 Wijmo Menu 使用方法。
看看 Wijmo Menu 给我们提供了哪些功能?
可以创建多级的、动态效果的、滚动的菜单,同时我们可以在菜单中添加图片、复选框按钮。下面我们就来展示下我们不得不爱的 Wijmo Menu,甚至还可以创建一个弹出式 Menu。
功能预览展示:(sry,很遗憾依然无法插入iframe)
建立你的第一个 Wijmo jQuery Menu:
<ul id="menu"> <li><a>menuitem1</a> <ul> <li><a>menuitem1a</a></li> <li><a>menuitem2a</a></li> </ul> </li> <li><a>menuitem2</a></li> <li><a>menuitem3</a></li> </ul>
<script type="text/javascript"> $(document).ready(function () { $("#menu").wijmenu(); }); </script>
效果预览:
特性
垂直和水平菜单
菜单和子菜单,包括其他的布局选项,都可以水平或垂直地呈现出来。
效果截图:
滚动显示
C1Menu可以滚动显示顶层菜单,子菜单和子组。你可以将滚动模式选项设置为,按钮点击滚动、按钮悬停滚动、边缘徘徊滚动或滚动条。
效果截图:
菜单项目图标
菜单项可以有它们自己的图标。你可以从许多内置的图标中选择,也可以添加你自己的图标到菜单。
动画
菜单支持不同的展开和折叠的动画效果。例如,渐变、从顶部滚动、水平打开、反弹,等等。
主题
只需点击一下智能标签,就可以通过从六个溢价主题(北极,午夜时分,雅集,火箭,钴和英镑)中选择一个来改变菜单控件的外观。另外,还可以使用jQuery UI中的ThemeRoller来创建一个自定义的主题!
源码下载(包含以上特性):wijmo-menu.zip
好了,关于 wijmo-menu 部分我们就介绍到这里,感兴趣的朋友可以下载源码动手尝试。在下一篇文章中我们将介绍 Wijmo Accordinon 的特性及使用方法。