1. <html>
  2. <head>
  3.     <script src="jquery-easyui/jquery.min.js"></script>
  4.     <script src="jquery-easyui/jquery.easyui.min.js"></script>
  5.     <script src="jquery-easyui/easyloader.js"></script>
  6.     <script src="jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
  7.     <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
  8.     <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css" />
  9. </head>
  10. <body>
  11.  
  12.     <!--
  13.     accordion的属性
  14.     width：可伸缩面板所在容器的宽度
  15.     <div class="easyui-accordion" data-options="width:200">
  16.         <div title="Title1" ></div>
  17.     </div>
  18.  
  19.     height：可伸缩面板所在容器的高度
  20.     <div class="easyui-accordion" data-options="height:200">
  21.         <div title="Title1" ></div>
  22.     </div>
  23.  
  24.     fit：铺满整个屏幕
  25.     <div class="easyui-accordion" data-options="fit:true">
  26.         <div title="Title1" ></div>
  27.     </div>
  28.  
  29.     border：为false时不显示边框，相反则显示，默认是true
  30.     <div class="easyui-accordion" data-options="border:true">
  31.         <div title="Title1" ></div>
  32.     </div>
  33.  
  34.     animate：为false时没有折叠的动画效果，相反有动画效果，默认是true
  35.     <div class="easyui-accordion" data-options="animate:true">
  36.         <div title="Title1" ></div>
  37.     </div>
  38.  
  39.     可伸缩面板属性
  40.     selected：为true时，默认展开这个面板，相反是第一个默认展开，默认是false
  41.     <div class="easyui-accordion" data-options="width:200,height:200">
  42.         <div title="Title1" ></div>
  43.         <div title="Title2" selected=true></div>
  44.     </div>
  45.  
  46.     accordion的事件
  47.     onSelect：当一个可伸缩面板被选择时触发。
  48.     <div class="easyui-accordion" data-options="width:200,height:200,onSelect:aa">
  49.         <div title="Title1" ></div>
  50.         <div title="Title2" ></div>
  51.     </div>
  52.  
  53.     onAdd：在一个新面板被添加时触发。
  54.     <div class="easyui-accordion" data-options="width:200,height:200,onAdd:aa">
  55.         <div title="Title1" ></div>
  56.         <div title="Title2" ></div>
  57.     </div>
  58.  
  59.     onBeforeRemove：在可伸缩面板被移除之前触发，返回false将取消移除。
  60.     <div class="easyui-accordion" data-options="width:200,height:200,onBeforeRemove:aa">
  61.         <div title="Title1" ></div>
  62.         <div title="Title2" ></div>
  63.     </div>
  64.  
  65.     onRemove：在一个可伸缩面板被移除时触发。
  66.     <div class="easyui-accordion" data-options="width:200,height:200,onRemove:aa">
  67.         <div title="Title1" ></div>
  68.         <div title="Title2" ></div>
  69.     </div>
  70.  
  71.     accordion的方法
  72.     options：返回容器属性对象。
  73.     panels：获取所有的面板。
  74.     resize：重置可伸缩面板。
  75.     getSelected：获取被选择的面板。
  76.     getPanel：获取特定的可伸缩面板。
  77.     select：选择特定的面板。
  78.     add：添加一个先的可伸缩面板。
  79.     remove：移除特定的面板。
  80.     -->
  81.     <div id="p" class="easyui-accordion" data-options="width:200,height:200,onBeforeRemove:aa">
  82.         <div title="Title1"  icon="icon-sys"></div>
  83.         <div title="Title2" ></div>
  84.         <div title="Title3" ></div>
  85.         <div title="Title4" ></div>
  86.     </div>
  87.     <input type="button" id="tian" value="添加">
  88.     <input type="button" id="yi" value="移除">
  89. <script>
  90.     function aa(){
  91.         alert('123');
  92.     }
  93.     //方法的使用
  94.     $(function (){
  95.         $("#tian").click(function (){
  96.             $("#p").accordion('add',{
  97.                 title:"Title1"
  98.             })
  99.         })
  100.  
  101.         $("#yi").click(function (){
  102.             $("#p").accordion('remove','Title1');
  103.         })
  104.     })
  105. </script>
  106.  
  107. </body>
  108. </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. activity变成Dialog的样式设置

    1.属性解析 <item name="android:windowFrame">@null</item> :Dialog的windowFrame框为无< ...

  2. 搭建OA平台

    公司没有OA平台的原因是: 1.暂时没有上的必要. 2.总厂有一个web版的用友的OA. 但最近法方总经理提到了共享日历日程的需求. 这个需求的主要要整合的是把outlook的日历功能共享.原来微软是 ...

  3. 10 - 应用程序间通信、本地通知、加速计、URL传输中文

    一.应用间通信 URL 调用系统服务: tel:11111 sms:xxx@163.com http:// URL深入 类型://主机:端口/地址?参数 label框等于文字大小快捷键:command ...

  4. Android Camera系列开发 (二)通过Intent录制视频

    Android Camera系列开发 (二)通过Intent录制视频 作者:雨水  2013-8-18 CSDN博客:http://blog.csdn.net/gobitan/ 概述 使用Camera ...

  5. Cloud Foundry 中国群英会【上海站、成都站】资料宣传

    关注云计算和PaaS层的童鞋可以了解下: http://www.cloudfoundry-heroes-summit.com/shanghai http://www.cloudfoundry-hero ...

  6. 新浪SAE快速上手教程

     新浪SAE快速上手教程[1]如何免费开通新浪云 2014-07-18 > 新浪SAE快速上手教程[2]如何创建.删除应用 2014-07-24 > 新浪SAE快速上手教程[3]如何上传应 ...

  7. [Oracle]TRIGGER

    题外话: Oracle 的使用. 以前客户方用的是SQL SERVER,一直在用SQL SERVER,感觉SQL SERVER的用户体验非常好. 不管是开发环境的界面布局到SQL 的写法上,感觉写起来 ...

  8. PHP判断远程文件是否存在的几种方法

    在做一个图片预览中图的东西,遇到一个问题,就是要判断远程文件是否存在(不是同一台服务器). 代码如下: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 ...

  9. 设计模式模式适配器(Adapter)摘录

    23种子GOF设计模式一般分为三类:创建模式.结构模型.行为模式. 创建模式抽象的实例,他们帮助建立一个系统,是独立于如何.这是一个这些对象和陈述的组合.创建使用继承一个类架构更改实例,一个对象类型模 ...

  10. 【C语言】在两个数成对出现的数组中找到一个单独的数。

    //在两个数成对出现的数组中找到一个单独的数.比如{1,2,3.3,1,4.2},即找出4 #include <stdio.h> int find(int arr[], int len) ...