jquery easyui手风琴Accordion菜单效果-三体教程
文章目录

jquery easyui手风琴Accordion菜单效果

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

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

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

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

html代码<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>手风琴菜单-jQuery EasyUI演示</title>
    <link rel="stylesheet" type="text/css" href="source/file/jqueryeasyui/easyui.css">
    <link rel="stylesheet" type="text/css" href="source/file/jqueryeasyui/icon.css">
    <script type="text/javascript" src="source/file/js/jquery.min.js"></script>
    <script type="text/javascript" src="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>
亲自测试一下

jquery easyui手风琴Accordion菜单效果

手风琴是jQuery EasyUI框架的一部分,它可以让你在网页上面更容易的定义风琴组件。

手风琴允许您提供多个面板,每次显示一个或多个。支持每个面板的展开和折叠,当单击面板标题的时候,将会展开或折叠该面板,面板的内容可以通过ajax加载。用户可以自定义要展开的面板,如果未指定,则默认会使用第一个面板。

本文网址:http://www.santii.com/article/101.html

您可能还会对这些jQuery EasyUI文章感兴趣


数据更新时间:2018-05-26