手风琴也是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. Git命令学习笔记

    一.本地代码增,删,改,查,提交,找回git checkout .                //抛弃工作区所有修改git checkout -- <file>    //抛弃工作区& ...

  2. bzoj 5368: [Pkusc2018]真实排名

    Description 小C是某知名比赛的组织者,该比赛一共有n名选手参加,每个选手的成绩是一个非负整数,定义一个选手的排名是 :成绩不小于他的选手的数量(包括他自己).例如如果3位选手的成绩分别是[ ...

  3. apache配置apache server status，监控服务器访问情况

    在apache配置文件中添加开启代码, 1.如果你的Apache配置文件httpd.conf或者extra/httpd-info.conf中有LoadModule status_module modu ...

  4. [转]象棋AI算法（一）

    本文转自:http://blog.csdn.net/u012723995/article/details/47133693 参考文献:http://www.xqbase.com/computer/se ...

  5. 自动生成数据库字典(sql2008) 转自 飘渺の云海

    每次做项目的时候都要做数据字典,这种重复的工作实在很是痛苦,于是广找资料,终于完成了自动生成数据库字典的工作,废话少说,上代码. 截取一部分图片: 存储过程: SET ANSI_NULLS ON GO ...

  6. url字符转义

    作者在做短链接功能时,url参数里带了&字符,结果无法转换.后来查了一下,发现可以用其它符号代替.下面是对应表 +    URL 中+号表示空格                         ...

  7. 十一、cent OS下搭建SVN服务器

    安装SVN命令:yum install subversion 查看安装位置:rpm -ql subversion,我们看到它在/usr/bin目录下生成了svn的二进制文件 查看svn版本:/usr/ ...

  8. centos top 命令详解及退出top命令-使用p键及free命令

    1.作用 top命令用来显示执行中的程序进程,使用权限是所有用户. 2.格式 top [-] [d delay] [q] [c] [S] [s] [i] [n] 3.主要参数 d:指定更新的间隔,以秒 ...

  9. Win10自带Ubuntu子系统下Mysql安装踩坑记录

    linux系统为win10自带Ubuntu子系统 错误的安装过程 我按照一般的方法安装mysql,安装步骤如下 1.升级源 $ sudo apt-get update 2.安装mysql $ sudo ...

  10. react-native一些好的组件

    一.移动端路由 react-navigator 二.移动端本地储存 react-native-storage(https://github.com/sunnylqm/react-native-stor ...