<html>

<head>

    <script src="jquery-easyui/jquery.min.js"></script>

    <script src="jquery-easyui/jquery.easyui.min.js"></script>

    <script src="jquery-easyui/easyloader.js"></script>

    <script src="jquery-easyui/locale/easyui-lang-zh_CN.js"></script>

    <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css" />

</head>

<body>

    <!--

    accordion的属性

    width：可伸缩面板所在容器的宽度

    <div class="easyui-accordion" data-options="width:200">

        <div title="Title1" ></div>

    </div>

    height：可伸缩面板所在容器的高度

    <div class="easyui-accordion" data-options="height:200">

        <div title="Title1" ></div>

    </div>

    fit：铺满整个屏幕

    <div class="easyui-accordion" data-options="fit:true">

        <div title="Title1" ></div>

    </div>

    border：为false时不显示边框，相反则显示，默认是true

    <div class="easyui-accordion" data-options="border:true">

        <div title="Title1" ></div>

    </div>

    animate：为false时没有折叠的动画效果，相反有动画效果，默认是true

    <div class="easyui-accordion" data-options="animate:true">

        <div title="Title1" ></div>

    </div>

    可伸缩面板属性

    selected：为true时，默认展开这个面板，相反是第一个默认展开，默认是false

    <div class="easyui-accordion" data-options="width:200,height:200">

        <div title="Title1" ></div>

        <div title="Title2" selected=true></div>

    </div>

    accordion的事件

    onSelect：当一个可伸缩面板被选择时触发。

    <div class="easyui-accordion" data-options="width:200,height:200,onSelect:aa">

        <div title="Title1" ></div>

        <div title="Title2" ></div>

    </div>

    onAdd：在一个新面板被添加时触发。

    <div class="easyui-accordion" data-options="width:200,height:200,onAdd:aa">

        <div title="Title1" ></div>

        <div title="Title2" ></div>

    </div>

    onBeforeRemove：在可伸缩面板被移除之前触发，返回false将取消移除。

    <div class="easyui-accordion" data-options="width:200,height:200,onBeforeRemove:aa">

        <div title="Title1" ></div>

        <div title="Title2" ></div>

    </div>

    onRemove：在一个可伸缩面板被移除时触发。

    <div class="easyui-accordion" data-options="width:200,height:200,onRemove:aa">

        <div title="Title1" ></div>

        <div title="Title2" ></div>

    </div>

    accordion的方法

    options：返回容器属性对象。

    panels：获取所有的面板。

    resize：重置可伸缩面板。

    getSelected：获取被选择的面板。

    getPanel：获取特定的可伸缩面板。

    select：选择特定的面板。

    add：添加一个先的可伸缩面板。

    remove：移除特定的面板。

    -->

    <div id="p" class="easyui-accordion" data-options="width:200,height:200,onBeforeRemove:aa">

        <div title="Title1"  icon="icon-sys"></div>

        <div title="Title2" ></div>

        <div title="Title3" ></div>

        <div title="Title4" ></div>

    </div>

    <input type="button" id="tian" value="添加">

    <input type="button" id="yi" value="移除">

<script>

    function aa(){

        alert('123');

    }

    //方法的使用

    $(function (){

        $("#tian").click(function (){

            $("#p").accordion('add',{

                title:"Title1"

            })

        })

        $("#yi").click(function (){

            $("#p").accordion('remove','Title1');

        })

    })

</script>

</body>

</html>

jquery easyui Accordion的使用的更多相关文章

  1. jQuery EasyUI 折叠面板accordion的使用实例

    1.对折叠面板区域 div 设置 class=”easyui-accordion” 2.在区域添加多个 div, 每个 div 就是一个面板 (每个面板一定要设置 title 属性). 3.设置面板属 ...

  2. 第二百零一节，jQuery EasyUI，Accordion(分类)组件

    jQuery EasyUI,Accordion(分类)组件 学习要点: 1.加载方式 2.容器属性 3.事件列表 4.方法列表 5.面板属性 本节课重点了解 EasyUI 中 Accordion(选项 ...

  3. jquery easyui使用（二）······可折叠面板动态加载无效果

    先上代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"& ...

  4. HTML5界面开发工具jQuery EasyUI更新至v1.3.5

    本文转自:evget.com HTML5界面开发工具 jQuery EasyUI 最新发布v1.3.5,新版修复了多个bug,并改进了menu,tabs和slider等多个控件.jQuery Easy ...

  5. 【推荐】使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享

    使用Jquery+EasyUI 进行框架项目开发案例讲解之一 员工管理源码分享   在开始讲解之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery的U ...

  6. jquery easyui中文培训文档

    目  录 1.... Accordion(可折叠标签)... 2 1.1          实例... 2 1.2          参数... 3 2.... DateBox(日期框)... 4 2 ...

  7. Jquery easyui 教程

            Jquery easyui教程                 目  录 1基本拖放... 4 2构建购物车型拖放... 5 3创建课程表... 8 4菜单和按钮Menu and Bu ...

  8. EasyUI Accordion下的Panel面板初始化时全部折叠

    EasyUI Accordion下的Panel面板有一个属性:selected,默认值为:false.初始化时,若设置'selected:true',则面板默认打开,效果如下: <div tit ...

  9. 使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享

    使用Jquery+EasyUI 进行框架项目开发案例解说之中的一个 员工管理源代码分享 在開始解说之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery ...

随机推荐

  1. 数据库神器：Navicat Premium

    Navicat premium是一款数据库管理工具.将此工具连接数据库,你可以从中看到各种数据库的详细信息.包括报错,等等.当然,你也可以通过他,登陆数据库,进行各种操作.Navicat Premiu ...

  2. 说说关于php内置函数curl_init()

    昨天在我本地的项目,调试时碰到无法识别curl_init()方法,网上查了查才知道是我本地的php.ini文件里没加载上,完了把extension=php_curl.dll前面的;去掉后就好了,注意一 ...

  3. 《音乐商店》第4集：自动生成StoreManager控制器

    一.自动生成StoreManager控制器 二.查看 StoreManager 控制器的代码 现在,Store Manager 控制器中已经包含了一定数量的代码,我们从头到尾重新过一下. 1.访问数据 ...

  4. [置顶] 小白学习KM算法详细总结--附上模板题hdu2255

    KM算法是基于匈牙利算法求最大或最小权值的完备匹配 关于KM不知道看了多久,每次都不能完全理解,今天花了很久的时间做个总结,归纳以及结合别人的总结给出自己的理解,希望自己以后来看能一目了然,也希望对刚 ...

  5. 清华集训2014 day1 task2 主旋律

    题目 这可算是一道非常好的关于容斥原理的题了. 算法 好吧,这题我毫无思路,直接给正解. 首先,问题的正面不容易求,那么就求反面吧: 有多少种添加边的方案,使得这个图是DAG图(这里及以下所说的DAG ...

  6. 软件project师的属性与发展

    工作近十年了.[软件project师] 一直是我职业 title 的中心词,仅仅是前面的修饰语在不断变化,从0基础.中级.高级到资深. 事实上 [软件project师] 是一个非常泛化的定义.工作现实 ...

  7. PCI-X总线

    PCI-X接口是并连的PCI总线(Peripheral Components Interconnect)的更新版本号,仍採用传统的总线技术,只是有很多其它数量的接线针脚, 同一时候,如前所述的全部的连 ...

  8. ClassLoader载入指定的类需注意六个细节或报ClassNotFundEception异常总结

    项目中,载入指定的类反射调用方法一直报类找不到,经过数百次的測试.对这样的问题有了一个又一次的认识,特总结.记录.分享例如以下: 1.路径中尽可能用"/"或者File.separa ...

  9. Thinkpad W520 完美安装Ubuntu14.04LTS

    Thinkpad W520 完美安装Ubuntu14.04LTS Ubuntu已经升级到14.04LTS,这是个长期支持的版本号.自从上次安装12.04LTS之后一直没有升级. 于是从站点上下载Ubu ...

  10. android圆形进度条ProgressBar颜色设置

    花样android Progressbar http://www.eoeandroid.com/thread-1081-1-1.html http://www.cnblogs.com/xirihanl ...