easyui学习笔记6—基本的Accordion(手风琴)

简介: 手风琴也是web页面中常见的一个控件,常常用在网站后台管理中,这里我们看看easyui中基本的手风琴设置。  1.先看看引用的资源 注意到这里并没有引用到其他的js只是两个基本的,一个是jquery.min.js,一个是jquery.easyui.min.js。

手风琴也是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">这个是定义树形结构的,这是另外一个控件了。在后面的例子中。

总的来看还是很简单的。

作者:Tyler Ning
出处:http://www.cnblogs.com/tylerdonet/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题,可以通过以下邮箱地址williamningdong@gmail.com  联系我,非常感谢。

目录
相关文章
|
Web App开发 Java C#
easyui accordion—手风琴格子始终展开和多个格子展开
来源:http://www.cnblogs.com/tylerdonet/p/3531844.html   始终打开有时候可能会很管用,其实就是一个设置问题。这里就不再介绍引用的资源了,这里只看看html是怎么写的。
1405 0
easyui学习笔记14-拓展的基本验证规则
/** * 扩展的基本校验规则, */ $.extend($.fn.validatebox.defaults.rules, { minLength : { // 判断最小长度 validator : function(value, param) { value = $.trim(value); //去空格 return value.length >= param[0]; }, message : '最少输入 {0} 个字符。
1047 0
|
JavaScript 前端开发 索引
easyui学习笔记11—tab标签页和鼠标动作
这篇我们看看标签页是怎么实现的,默认情况下要靠点击切换标签,也可以用鼠标切换标签选项,就是鼠标放在标签上切换。 首先看看引用的资源文件 1.资源文件 Basic Tabs - jQuery EasyUI Demo 这里我们看到还是这几个文件,这里要说一下jquery.
972 0
|
JavaScript 前端开发 HTML5
easyui学习笔记12—tab标签页的添加和删除
这一篇我们来看看标签页的添加和删除动作。我在想看这些例子还不如看文档,文档的内容更加全面,但是文档全部是理论没有实际的操作,看起来很枯燥,文档只能是遇到问题的时候查。easyui的文档写的还是很详细的,这点对开发者很重要。
1159 0
|
JavaScript 前端开发 索引
easyui学习笔记9—手风琴格子的增,删和选择
这一篇中我们将看看如何给手风琴动态的增加,删除格子,怎样选择某一个格子的。 1.先看看引用的资源  2.
881 0
|
Web App开发 Java C#
easyui学习笔记10—手风琴格子始终展开和多个格子展开
始终打开有时候可能会很管用,其实就是一个设置问题。这里就不再介绍引用的资源了,这里只看看html是怎么写的。 1.html代码 Basic Accordion Click on panel header to show its content.
874 0
|
JavaScript 前端开发
easyui学习笔记7—在手风琴中显示表格
在这一篇中我们看看如何在手风琴里面显示表格数据的。 1.先看看引用的资源 我们看到这里面还是一样的,没有什么变化,还是jquery.min.js和jquery.easyui.min.js两个文件,看来这两个文件已经包含了大部分的功能了。
900 0
|
Web App开发 JavaScript 前端开发
easyui学习笔记8—在手风琴中加载其他的页面
在手风琴中加载其他页面和在表格中加载其他的页面有写类似的,就是请求另外一个页面显示数据。 1.先看看引用的资源文件 还是没有什么的变化2个js文件和三个css文件。
824 0
|
Web App开发 JavaScript 前端开发
easyui学习笔记5—panel加载其他的页面
上一篇中我们看到了panel的基本实现,没有什么难度,最重要的是data-options和class两个标签属性的定义。这里我们将看一下在panel中如何加载其他的页面。 1.先看看引用的资源文件和html DOCTYPE html> L...
904 0