手风琴也是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. [目录]ASP.NET web api开发实战

    第一章:Restful web service v.s. RPC style web service 第二章:ASP.NET web api v.s. WCF v.s. ASP.NET web ser ...

  2. android httpclient 发送 PATCH 请求

    Put 用于全部更新 Patch 用于部分更新 重写一下 HttpPut 或 HttpPost 的 getMethod 方法 /** * Send a patch request */ public ...

  3. Django 入门项目案例开发（下）——创建项目应用及模型类

    关注微信公众号:FocusBI 查看更多文章:加QQ群:808774277 获取学习资料和一起探讨问题. 前面两章是在已经开发好的项目上用来描述环境和业务,这一章创建一个全新的项目来用作开发,你可以跟 ...

  4. sqlite、mysql 将时间戳转换成本地时间语句

    sqlite:SELECT datetime(createdTime, 'unixepoch', 'localtime'); mysql:SELECT FROM_UNIXTIME( 124948800 ...

  5. 在打印窗口，打印视图View的子视图结构图

    在打印窗口,打印视图View的子视图结构图,使用 po [self.view recursiveDescription];

  6. 一个Java小菜鸟的实习之路

    博主今年大四,六月份毕业,之前一直对编程感兴趣,于是在大学里自学了Java,(本专业是通信工程).在今年过年的时候,父母让来南方过年,于是博主自己也想着能不能在南方找份java的实习先干着,了解一下行 ...

  7. show_space1

    CREATE OR REPLACE PROCEDURE show_space1(p_segname IN VARCHAR2, p_owner IN VARCHAR2 DEFAULT 'NTSUSER0 ...

  8. css内容简介（层叠样式表）

    css是对网页编辑的加色,是对其功能的渲染. 根据规范每个元素都有一个display属性,每个元素都有一个------------如div元素他的默认为block. 行内元素和块级元素 块级元素会占据 ...

  9. PHP学习5——异常处理

    主要内容: PHP错误类型 异常的产生 错误日志 日志信息记录到操作系统日志 异常处理 扩展异常处理类 PHP错误类型 语法错误 执行时错误 逻辑错误 异常的产生 如果安装了xampp之后,在php. ...

  10. ngnix优化【转】

    nginx的优化 1． gzip压缩优化 2． expires缓存有还 3． 网络IO事件模型优化 4． 隐藏软件名称和版本号 5． 防盗链优化 6． 禁止恶意域名解析 7． 禁止通过IP地址访问网站 ...