easyui手风琴菜单

想必小伙伴都有见过手风琴的图片，一层一层的非常有层次感，而且许多网站也有做这样的菜单效果。

是的，在jquery easyui中，我们也称之为手风琴菜单。

今天小编就给大家带来一个这样的效果实例。

我们需要引用easyui相关的js及css文件。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>手风琴菜单-jQuery EasyUI演示</title><link rel="stylesheet" type="text/css" href="http://www.santii.com/source/file/jqueryeasyui/easyui.css"><link rel="stylesheet" type="text/css" href="http://www.santii.com/source/file/jqueryeasyui/icon.css"><script type="text/javascript" src="http://www.santii.com/source/jquery.min.js"></script><script type="text/javascript" src="http://www.santii.com/source/file/jqueryeasyui/jquery.easyui.min.js"></script>
</head>
<body><h2>手风琴菜单</h2><p>单击面板显示其内容</p><div style="margin:20px 0 10px 0;"></div><div class="easyui-accordion" style="width:500px;height:300px;"><div title="HTML" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;"><h3 style="color:#0099FF;">html教程</h3><p>学习html教程是每个web开发者必需经历的,所有的网页都离不开html。html标签、代码、表单、编辑器是学习html的基础,其实很容易学会。</p></div><div title="CSS" data-options="iconCls:'icon-help'" style="padding:10px;"><p>学习css教程是制作网页的必要条件,html和css相辅相成,网页呈现在我们眼中的样子就是就是靠css样式来控制,因此一定要熟练掌握css布局、代码等知识。</p>      </div><div title="树形菜单" data-options="iconCls:'icon-search'" style="padding:10px;"><ul class="easyui-tree"><li><span>食物</span><ul><li><span>水果</span><ul><li>苹果</li><li>桔子</li></ul></li><li><span>蔬菜</span><ul><li>土豆</li><li>黄瓜</li><li>茄子</li><li>西红柿</li><li>豌豆</li></ul></li></ul></li></ul></div></div>
</body>
</html>

支持每个面板的展开和折叠，当单击面板标题的时候，将会展开或折叠该面板，面板的内容可以通过ajax加载。用户可以自定义要展开的面板，如果未指定，则默认会使用第一个面板。

easyui手风琴菜单相关推荐

EasyUI 树菜单
EasyUI 树菜单通过ssm框架项目实现EasyUI 的树菜单的单选,复选,异步加载树,同步加载树和树权限控制等功能. 本章知识点效果图: 需求:通过SSM框架,实现EasyUI 树菜单的单选, ...
手风琴html例子,jquery实现简单手风琴菜单效果实例
本文实例讲述了jquery实现简单手风琴菜单效果的方法.分享给大家供大家参考.具体实现方法如下: dd').hide(); $('.accordion > dt > a').click(f ...
java 手风琴二级菜单_jQuery多级手风琴菜单实例讲解
手风琴菜单一般用于下拉导航,由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中适当应用手风琴效果会给用户带来非常好的体验.本文借助jQuery插件轻松打造一个非常不错的手风琴效果的菜单 ...
Bootstrap手风琴菜单
手风琴菜单似乎已经成了网站后台的标配了,怎么写一个手风琴式的菜单呢?如果你利用原生js去写可能会比较麻烦,但利用Bootstrap框架的Collapse.js插件就变得简单啦. 你可以直接用官网的de ...
雷林鹏分享：jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单
jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单 easyui 的树(Tree)插件允许您创建一个复选框树.如果您点击一个节点的复选框,这个点击的节点信息将向上和向下继承.例如:点击 ...
如何用HTML和css实现简单的手风琴菜单效果，附带详细注释
超完整的代码+详细注释,适合给小白做的简单的手风琴菜单实例代码: <!DOCTYPE html> <html lang="en"><head> ...
使用Axure制作手风琴菜单
Axure在页面设计这一块起到了很大作用,它不仅可以将客观的文本改变为直观的演示模板,还可以对于页面的各个方面进行UI设计美化页面等等. 例如设计一个网站肯定少不了菜单栏.菜单栏的样式很多,有点击显示 ...
【HUI】AccordionMenu 手风琴菜单(基于jQuery)
文章来自LearnShare,转载请注明. 分享自己写的基于jQuery的手风琴菜单,包括横向和纵向两种,会不断丰富它的功能,方便自己和大家使用. Updates: ----------------- ...
HTML基础6折叠菜单手风琴菜单
页面主体部分: <body><ul id="menu"><li> <a href="#">一级菜单1</a ...

easyui手风琴菜单

easyui手风琴菜单相关推荐

最新文章

热门文章