手风琴也是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. 【ExtJS】FormPanel 布局(一)

    准备工作,布置一个最简单的Form,共5个组件,都为textfield. Ext.onReady(function(){ Ext.create('Ext.form.Panel', { width: 5 ...

  2. Golang教程：switch 语句

    switch 是一个条件语句,用于将一个表达式的求值结果与可能的值的列表进行匹配,并根据匹配结果执行相应的代码.可以认为 switch 语句是编写多个 if-else 子句的替代方式. 举例是说明问题 ...

  3. 深入理解JavaScript系列（49）：Function模式（上篇）

    介绍 本篇主要是介绍Function方面使用的一些技巧(上篇),利用Function特性可以编写出很多非常有意思的代码,本篇主要包括:回调模式.配置对象.返回函数.分布程序.柯里化(Currying) ...

  4. angular 与 layer 集成过程

    layer 的提示框和弹层确实也好用,在使用angular的前提下,使用layer遇到诸多麻烦,记录下来. 在类型是1页面层,主要问题在遮罩方面,造成无法编辑. 开始:引入layer 样式,angul ...

  5. Spring Cloud实战之初级入门（五）— 配置中心服务化与配置实时刷新

    目录 1.环境介绍 2.配置中心服务化 2.1 改造mirco-service-spring-config 2.2 改造mirco-service-provider.mirco-service-con ...

  6. shiro权限控制入门

    一:权限控制两种主要方式 粗粒度 URL 级别权限控制和细粒度方法级别权限控制 1.粗粒度 URL 级别权限控制 可以基于 Filter 实现在数据库中存放 用户.权限.访问 URL 对应关系, 当前 ...

  7. Elasticsearch全文检索工具入门

    Elasticsearch全文检索工具入门: 1.下载对应系统版本的文件 elasticsearch-2.4.0.zip 1.1运行elasticsearch-2.4.0\elasticsearch- ...

  8. bash的常用功能呢

    一.tab键可以自动补齐命令 二.命令历史 1.history 查看之前敲过的所有命令 2.!历史命令编号 调用历史的某一个命令 三.命令别名 1.设置别名    alias 别名=‘命令’ 2.移除 ...

  9. mysql根据时间查询日期的优化

    例如查询昨日新注册用户,写法有如下两种: EXPLAIN select * from chess_user u where DATE_FORMAT(u.register_time,'%Y-%m-%d' ...

  10. CentOS 7.2 安装 MySQL 5.6.24

    说明:由于甲骨文公司收购了MySQL后,有将MySQL闭源的潜在风险,因此CentOS社区采用mysql的MariaDB分支的方式来避开这个风险. 所以需要先加入yum的仓库,才能利用yum来安装my ...