Accordion( 分类) 组件
一. 加载方式
//class 加载方式
<div id="box" class="easyui-accordion"
style="width:300px;height:200px;">
<div title="accordion1">accordion1</div>
<div title="accordion2">accordion2</div>
<div title="accordion3">accordion3</div>
</div>
//JS 加载调用
$('#box').accordion({
//...
});
二.容器属性
//属性设置
$('#box').accordion({
width : 500,
height : 500,
fit : true,
border : false,
animate : false,
multiple : true,
selected : 1,
});
三.事件列表
$('#box').accordion({
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);
//return false;
},
onRemove : function (title, index) {
console.log(title + '|' + index);
},
});
四.方法列表
//返回属性对象
console.log($('#box').accordion('options'));
//返回所有分类面板
console.log($('#box').accordion('panels'));
//调整分类面板布局和大小
$(document).click(function () {
$('#box').accordion().css('display', 'block');
$('#box').accordion('resize');
});
//选择选中的分类面板
console.log($('#box').accordion('getSelected'));
//选择所有选中的分类面板
console.log($('#box').accordion('getSelections'));
//获取指定下标的分类面板
console.log($('#box').accordion('getPanel', 1));
//获取指定分类面板的下标值
console.log($('#box').accordion('getPanelIndex', '#a2'));
//选中指定下标的分类面板
$('#box').accordion('select', 1);
//取消选中指定下标的分类面板
$('#box').accordion('unselect', 0);
//新增一个分类面板
$('#box').accordion('add', {
title : '新分类',
closable : true,
content : '123',
collapsible : false,
selected : false,
});
//移除一个分类面板
$('#box').accordion('remove', 0);
PS:我们可以使用$.fn.accordion.defaults 重写默认值对象。
$.fn.accordion.defaults.border = false;
五.面板属性
分类组件面板继承了 panel 属性, 我们参考 panel 属性即可, 对分类的面板同样有效。
并且提供了新增的两个属性。
Accordion( 分类) 组件的更多相关文章
- 第二百零一节,jQuery EasyUI,Accordion(分类)组件
jQuery EasyUI,Accordion(分类)组件 学习要点: 1.加载方式 2.容器属性 3.事件列表 4.方法列表 5.面板属性 本节课重点了解 EasyUI 中 Accordion(选项 ...
- EasyUI系列学习(十一)-Accordion(分类)
一.加载 1.class加载 <div class="easyui-accordion" style="width:300px;height:200px" ...
- accordion 分类
<!--accordion--><h1>accordion 分类</h1><div id="accordionId" class=&quo ...
- vue2.0 自定义 折叠列表(Accordion)组件
1.自定义 折叠列表 Accordion.vue (1)sass 版本 <!-- 折叠列表 组件 --> <template> <nav :class="$ ...
- 第11课 文章分类(组件化开发) Thinkphp5商城第四季
目录 思路: 控制器里 扩展类里: 视图层: 思路: 控制器查出所有数据后调用扩展类里的无限级分类 public function catetree($cateRes) 方法. 把排序好的数据传给视图 ...
- 一个开源Delphi分类组件推荐网页
https://github.com/Fr0sT-Brutal/awesome-delphi
- jquery easyui的应用-1
下载地址是: www.jeasyui.com/download 当前版本是1.6.7 是由 jquery ui 扩展而来的. 像jquery ui, bootstrap, jquery easyui三 ...
- Easy UI 入门
Easy UI常用于企业级开发的UI和后台开发的UI,比较重. 以下组件中的加载方式,属性和事件,方法和组件种类并不全,只是作为参考和入门学习. 1.Draggable(拖动)组件 不依赖其他组件 1 ...
- accordion(分类)组件
一.依赖于 Panel(面板)组件 二.class加载方式 <div id="box" class="easyui-accordion" style=&q ...
随机推荐
- jsp连接MySQL操作GIS地图数据,实现添加point的功能
index_map.jsp中的代码: <%@ page language="java" pageEncoding="utf-8"%> <%@ ...
- 工作流activiti-03数据查询(流程定义 流程实例 代办任务) 以及个人小练习
在做数据查询的时候通过调用api来查询数据是相当的简单 对分页也进行了封装listPage(0, 4) ;listPage:分页查询 0:表示起始位置,4:表示查询长度 但是公司的框架封装了分页数据 ...
- 修改MYSQL最大连接数的2种方法
mysql默认最大连接数是100,增加加默认MYSQL连接数的方法有两个 方法一:进入MYSQL安装目录 打开MYSQL配置文件 my.ini(windows) 或 my.cnf(linux环境)查找 ...
- 百度touch的手势框架,touch.js
今天,随便搜搜看到了一个新的手势库,也许能让我为现在使用者的hammer.js的手势库带来的烦恼而消除. 它是百度团队开发的,现在由百度云Clouda进行维护. 官网 http://touch.c ...
- 【回忆1314】第一次用AngularJS
1.创建指令的4种方式(ECMA) var appModule = angular.module('app', []); appModule.directive('hello', function() ...
- linux磁盘空间用满的处理方法
linux下空间满可能有两种情况 可以通过命令 df -h 查看磁盘空间占用,实际上是查看磁盘块占用的文件(block) df -i 查看索引节点的占用(Inodes) 磁盘块和索引节点其中之一满 ...
- string标准库的使用
string s; s.empty() 如果 s 为空串,则返回 true,否则返回 false. s.size() 返回 s 中字符的个数 s[n] 返回 s 中位置为 n 的字符,位置从 开始计数 ...
- MLlib 卡方检验
1.卡方检验理论 1.1. 简介 总体的分布函数完全未知或只知形式.但不知其参数的情况,为了推断总体的某些未知特性,提出某些关于总体的假设.我们要根据样本对所提出的假设作出是接受,还是拒绝的决策.假 ...
- MongoDB insert/update/one2many案例
以博文与评论为例,博文有标题内容,对应多个评论,评论有评论人.评论内容等. ()插入一条博文: db.blog.insert( {','title':'this is blog title1','co ...
- Android 把从网络获取的图片缓存到内存中
1:activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/androi ...