一、加载

1.class加载

<div class="easyui-accordion" style="width:300px;height:200px">
<div title="accordion1">accordion1</div>
<div title="accordion2">accordion2</div>
<div title="accordion3">accordion3</div>
</div>

2.js加载

<div id="acdn" style="width:300px;height:200px">
<div title="accordion1">accordion1</div>
<div title="accordion2">accordion2</div>
<div title="accordion3">accordion3</div>
</div>
<script>
$(function () {
$("#acdn").accordion({});
});
</script>

生成的代码

二、属性

<div id="acdn">
<div title="accordion1">accordion1</div>
<div title="accordion2">accordion2</div>
<div title="accordion3">accordion3</div>
</div>
<script>
$(function () {
$("#acdn").accordion({
width: 300,
height: 200,
border: true,
//fit:true,
//animate:true,
//同时展开多个面板
multiple: true,
selected: 1
});
});
</script>

三、事件

<div id="acdn">
<div title="accordion1">accordion1</div>
<div title="accordion2">accordion2</div>
<div title="accordion3">accordion3</div>
</div>
<script>
$(function () {
$("#acdn").accordion({
width: 300,
height: 200,
onSelect: function (title, index) {
console.log(title + "," + index);
},
onUnselect: function (title, index) {
console.log(title + ":" + index);
},
onAdd: function (title, index) {
console.log(title + ":" + index);
},
onBeforeRemove: function (title, index) {
console.log(title + ":" + index + "前");
},
onRemove: function (title, index) {
console.log(title + ":" + index + "后");
},
});
});
</script>

四、方法

五、新增属性

因为分类组件继承了panel属性,其具有selected和collapsible两个属性

EasyUI系列学习(十一)-Accordion(分类)的更多相关文章

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

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

  2. accordion 分类

    <!--accordion--><h1>accordion 分类</h1><div id="accordionId" class=&quo ...

  3. Accordion( 分类) 组件

    一. 加载方式 //class 加载方式<div id="box" class="easyui-accordion"style="width:3 ...

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

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

  5. EasyUI系列学习笔记(一)——注册

    前面介绍过EasyUI是一个前段框架,开发之前需要导入底层包:我这里采用的是EasyUI 1.4版本~ 今天主要是搭建一个EasyUI的环境,同时做一个登陆页面... 环境搭建 导入需要的文件到项目中 ...

  6. EasyUI系列学习(二)-使用EasyUI

    一.引入必要文件 <!--1.0引入jQuery核心库--> <script src="jquery-easyui-1.4.4/jquery.min.js"> ...

  7. EasyUI系列学习(一)-入门

    1.什么是jQuery EasyUI jQueryEasyUI是一组基于jQuery的UI插件集合 2.jQueryEasyUI的特点 可以通过html标记来定义用户界面:支持扩展,可根据最近的需求扩 ...

  8. Java系列学习(十一)-内部类

    1.内部类 (1)把类定义在另一个类的内部,该类就称为内部类 (2)内部类的访问规则 A:内部类可以直接访问外部类的成员,包括私有 B:外部类要想访问内部类的成员,必须创建对象 (3)内部类的分类 A ...

  9. EasyUI报错 $(...).accordion is not a function

    参考资料: https://stackoverflow.com/questions/9017634/accordion-is-not-a-function 原因:加载了2次jquery js文件

随机推荐

  1. Reorder the Books-HDU5500

    Problem Description dxy has a collection of a series of books called "The Stories of SDOI" ...

  2. systemtap 作用-- SystemTap使用技巧

    http://blog.csdn.net/wangzuxi/article/details/42849053

  3. 多线程TcpServer

    多线程TcpServer自己的EventLoop只用来接收新连接(即TcpServer所属线程的EventLoop只监听listen fd),而新连接会用其他EventLoop来执行IO(即每个新Tc ...

  4. 【Android归纳】回调机制在Android中的应用与实战

    回调这样的思想在程序中是比較普遍的.有时候可能我们并没有注意到.近期整理了一些对于回调的理解,分享给大家 先上概念...... 什么是回调函数? 回调函数就是一个通过函数指针调用的函数. 假设你把函数 ...

  5. C语言++a与a++的实现机制与操作符结合优先级

    看到一道"经典Linux C"面试题,关于左值和右值的. 华为笔试题 1.写出推断ABCD四个表达式的是否正确, 若正确, 写出经过表达式中 a的值(3分) int a = 4; ...

  6. java多线程之 ---- 线程死锁

    java多线程之线程死锁 产生死锁的主要原因: 由于系统资源不足. 进程执行推进的顺序不合适. 资源分配不当等. 假设系统资源充足.进程的资源请求都可以得到满足,死锁出现的可能性就非常低.否则就会因争 ...

  7. xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is

    method: select Xcode version in Command Line Tools in Location(Click Xcode and then Preferences) Bef ...

  8. CentOS下VI命令整理

    Vi共分三种模式,分别是“一般模式”.“编辑模式”与“命令行命令模式”. l         一般模式:vi处理文件时,一进入该文件就是一般模式.在这个模式中,可以使用“上下左右”键来移动光标,可以使 ...

  9. 假如Java对象是个人······

    假如Java对象是个人,那意味着它也具备了我们人所有的东西,头,身体,大长腿. 头 头就是我们的对象头(Header).根据JAVA虚拟机规范,我们的对象头分为两部分,分别是存储对象自身的运行时数据和 ...

  10. 洛谷 P2577 [ ZJOI 2005 ] 午餐 —— DP + 贪心

    题目:https://www.luogu.org/problemnew/show/P2577 首先,想一想可以发现贪心策略是把吃饭时间长的人放在前面: 设 f[i][j] 表示考虑到第 i 个人,目前 ...