手风琴也是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. pycharm安装与使用

    python是一门解释性编程语言,所以一般把写python的工具叫解释器.写python脚本的工具很多,小编这里推荐pycharm,是小编用过最好用的一个工具.比较顺手的一个.而且可以跨平台,在mac ...

  2. 【javascript】Javascript闭包

    在描述闭包的实现与用途前,需要了解以下一些知识点. 执行上下文(执行上下文环境) console.log(a); //Uncaught ReferenceError: a is not defined ...

  3. LookupError: unknown encoding: cp65001的问题

    在CMD中进入Python2命令行交互模式,输入代码报错: LookupError: unknown encoding: cp65001 解决方法: 在CMD中设置 Python2 的环境变量 PYT ...

  4. 完美解决ExtJs6上传中文文件名乱码，后端SpringMVC

    ExtJs上传中文文件名乱码,观察请求. ExtJs6上传乱码从后台无法解决,因为文件名请求里面就已经乱码了,后台无法解码. 除非请求参数正确没有乱码,后台因为编码设置不一样,可以通过后台处理乱码 这 ...

  5. 跨文件代码跳转插件：Ctags

    1.通过package control搜索Ctags 2.Enter安装,等待其安装完成 3.下载ctags可执行程序,链接:https://pan.baidu.com/s/1jIINAxo 密码:4 ...

  6. jQuery比较时间处理过程（日期转换为时间戳比较）

    不管在JS中还是PHP中,终会遇到时间比较,但是很尴尬的是,举个例子,2017-04-12和2017-5-21是不一样或者说不能比较的,这在PHP和JS都是这种情况,这种情况怎么办呢,换成统一的格式比 ...

  7. C# 多线程系列之Mutex使用

    互斥量是一个内核对象,它用来确保一个线程独占一个资源的访问,并且互斥量可以用于不同进程中的线程互斥访问资源. 我们可以把Mutex看作一个出租车,乘客看作线程.乘客首先等车,然后上车,最后下车.当一个 ...

  8. window.open()被浏览器拦截问题汇总

    一.问题描述 最近在做项目的时候碰到了使用window.open被浏览器拦截的情况,虽然在自己的环境可以对页面进行放行,但是对用户来说,不能要求用户都来通过拦截.何况当出现拦截时,很多用户根本不知道发 ...

  9. centos7关于防火墙的操作

    1.firewalld的基本使用 启动: systemctl start firewalld 查看状态: systemctl status firewalld  停止: systemctl disab ...

  10. java 2018面试题-多线程汇总（含解答）

    学习,内容越多.越杂的知识,越需要进行深刻的总结,这样才能记忆深刻,将知识变成自己的.这篇文章主要是对多线程的问题进行总结的,因此罗列了自己整理的多线程的问题,都是自己觉得比较经典和一些大企业面试会问 ...