手风琴也是web页面中常见的一个控件，常常用在网站后台管理中，这里我们看看easyui中基本的手风琴设置。

1.先看看引用的资源

        <meta charset="UTF-8" />

        <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/default/easyui.css" />

        <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/icon.css" />

        <link rel="stylesheet" href="jquery-easyui-1.3.5/demo/demo.css" />

        <script type="text/javascript" src="jquery-easyui-1.3.5/jquery.min.js"></script>

        <script type="text/javascript" src="jquery-easyui-1.3.5/jquery.easyui.min.js"></script>

注意到这里并没有引用到其他的js只是两个基本的，一个是jquery.min.js，一个是jquery.easyui.min.js。

2.再看看html代码

    <body>

        <h2>Click on panel header to show its content.</h2>

        <div class="demo-info">

            <div class="demo-tip icon-tip"></div>

            <div>Click on panel header to show its content.</div>

        </div>

        <div style="margin:10px 0"></div>

        <div class="easyui-accordion" style="width:500px;height:300px;">

            <div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">

                <h3 style="color:#0099FF;">Accordion for jQuery</h3>

                <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>

            </div>

            <div title="Help" data-options:"iconCls:'icon-help'" style="padding:10px">

                <p>The accordion allows you to provide multiple panels and display one at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p>

            </div>

            <div title="TreeMenu" data-options:"iconCls:'icon-search'" style="padding:10px">

                <ul class="easyui-tree">

                    <li>

                    <span>Foods</span>

                        <ul>

                            <li>

                                <span>Fruits</span>

                                <ul>

                                    <li>apple</li>

                                    <li>orange</li>

                                </ul>

                            </li>

                            <li>

                                <span>Vegetables</span>

                                <ul>

                                    <li>tomato</li>

                                    <li>carrot</li>

                                    <li>cabbage</li>

                                    <li>potato</li>

                                    <li>lettuce</li>

                                </ul>

                            </li>

                        </ul>

                    </li>

                </ul>

            </div>

        </div>

    </body>

说简单点一个基本的手风琴就是一个包含内部嵌套div的有class="easyui-accordion"的div，每个嵌套的div里面包含想要的元素。这里注意嵌套的div的属性title="About" data-options="iconCls:'icon-ok'" 这个就是定义每个格子的title和图标的。

这里看到<ul class="easyui-tree">这个是定义树形结构的，这是另外一个控件了。在后面的例子中。

总的来看还是很简单的。

easyui学习笔记6—基本的Accordion(手风琴)的更多相关文章

  1. easyUI学习笔记二

    1．  拖拉大小 <!DOCTYPE html> <html> <head> <title>easyui学习</title> <scr ...

  2. easyUI学习笔记一

    1.引用js文件 <script type="text/javascript" src = jquery-easyui/jquery.min.js> </scri ...

  3. easyui学习笔记10—手风琴格子始终展开和多个格子展开

    始终打开有时候可能会很管用,其实就是一个设置问题.这里就不再介绍引用的资源了,这里只看看html是怎么写的. 1.html代码 <body> <h2>Basic Accordi ...

  4. easyui学习笔记9—手风琴格子的增，删和选择

    这一篇中我们将看看如何给手风琴动态的增加,删除格子,怎样选择某一个格子的. 1.先看看引用的资源 <link rel="stylesheet" href="jque ...

  5. easyui学习笔记12—tab标签页的添加和删除

    这一篇我们来看看标签页的添加和删除动作.我在想看这些例子还不如看文档,文档的内容更加全面,但是文档全部是理论没有实际的操作,看起来很枯燥,文档只能是遇到问题的时候查.easyui的文档写的还是很详细的 ...

  6. easyui学习笔记8—在手风琴中加载其他的页面

    在手风琴中加载其他页面和在表格中加载其他的页面有写类似的,就是请求另外一个页面显示数据. 1.先看看引用的资源文件 <link rel="stylesheet" href=& ...

  7. easyui学习笔记7—在手风琴中显示表格

    在这一篇中我们看看如何在手风琴里面显示表格数据的. 1.先看看引用的资源 <link rel="stylesheet" type="text/css" h ...

  8. easyui学习笔记2—在行内进行表格的增删改操作

    第一篇笔记中记录了如何实现表格的增删改,那个是点击之后跳出来一个对话框然后进行的,这里是在表格本身上进行的操作,也很简单,但是这里发现一个版本问题,也可以说是兼容性问题. 1.首先我们看引用的js和c ...

  9. easyui学习笔记1—增删改操作

    最近公司要用easyui,这里自己看了官网几篇文章,遇到些问题,大多数的问题都是敲代码的时候笔误,其他有些地方确实需要注意一下,这里做些笔记. 1.在mysql中建好表之后修改id字段为递增字段,发现 ...

随机推荐

  1. Robot Framework自动化测试一（第一个脚本）

    创建测试项目                                           选择菜单栏file----->new Project Name 输入项目名称,Type 选择Di ...

  2. 【随笔】关于绝对定位absolute相对于父元素定位的问题

    绝对定位absolute的官方定义: 设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块.元素原先在正常文档流中所占的空间会关闭,就好像该元素 ...

  3. Log4J2 配置文件模板及代码说明

    Log4j是Apache的著名项目,随着Java应用的越来越广泛,对日志性能等方面的要求也越来越高.Log4j的升级版本Log4j2在前些年发布.Log4J2的优点和好处有很多,可以自行搜索查阅相关文 ...

  4. unity收集log工具

    参考 yusong:http://www.xuanyusong.com/archives/2477 凉鞋     :https://www.cnblogs.com/liangxiegame/p/Uni ...

  5. 前端emmet插件的一些常用用法

    以下是在webstorm中简单使用emmet插件,注意一点就是当编写完emmet命令后一定要把光标移动到命令的结尾处,不然生成的代码会不一样 <!DOCTYPE html> <htm ...

  6. Bash编程(4) 参数与变量

    1. 变量命名 变量命名只能使用数字.下划线.字母,且仅能以下划线或字母开头. 变量很少使用单个字母,单个字母一般用于循环或读取一次性文件的时候. 例: while IFS=: read login ...

  7. C#基础知识-使用XML完成一个小程序（十一）

    上一篇中讲到XML基本的结构,还有增删改查的方法,这一篇中我们就来利用XML来完成一个简单的订单系统,主要是实现一个简单学生名单的增删改查,如果想要应用到实际的环境中建议考虑数据量的问题,如果数据量大 ...

  8. JVM(四) G1 收集器工作原理介绍

    此篇文章半原创是对参考资料中的知识点进行总结,欢迎评论指点,谢谢!        部分知识点总结来自R大的帖子,下文有参考资料的链接 概述 G1 收集是相比于其他收集器(可见 上一篇文章),可以独立运 ...

  9. nodejs封装mssql

    对mssql操作Sqlserver数据库的基本封装: 记录一下: /** * Created by chaozhou on 2015/9/18. */ var mssql = require('mss ...

  10. node版本管理nvm使用

    nvm:Node Version Manager,用来管理node版本,可以在一台机器上来回切换node版本,比较方便. win下建议使用 nvm-windows nodist linux下直接使用n ...