jQuery.Huifold.js
已封装
H-ui.js 中已封装,无需单独下载。单独下载地址 jQuery.Huifold.js
jQuery.Huifold是一个用js编写的jQuery插件,实现折叠效果。
使用方法
1、jQuery.Huifold.js依赖jQuery或者zepto.js。
js调用
$("#Huifold-demo1").Huifold({
item: '.item',
titCell:'h4',
mainCell:'.info',
type:1,
trigger:'click',
className:"selected",
speed:"first",
});
$("#Huifold-demo2").Huifold({
item: '.item',
titCell:'h4',
mainCell:'.info',
type:2,
trigger:'click',
className:"selected",
speed:"first",
});
$("#Huifold-demo3").Huifold({
item: '.item',
titCell:'h4',
mainCell:'.info',
type:3,
trigger:'click',
className:"selected",
speed:"first",
openKeys: [0, 1]
});
$("#Huifold-demo4").Huifold({
item: '.item',
titCell:'h4',
mainCell:'.info',
type:1,
trigger:'mouseover',
className:"selected",
speed:"first",
});
$("#Huifold-demo5").Huifold({
item: '.item',
titCell:'h4',
mainCell:'.info',
type:2,
trigger:'mouseover',
className:"selected",
speed:"first",
});
$("#Huifold-demo6").Huifold({
item: '.item',
titCell:'h4',
mainCell:'.info',
type:3,
trigger:'mouseover',
className:"selected",
speed:"first",
});
demo效果
只打开一个,可以关闭
点击效果
标题
+
内容
很多内容
标题
+
可以是图片
标题
+
鼠标经过效果
标题
+
内容
很多内容
标题
+
可以是图片
标题
+
必须有一个打开
点击效果
标题
+
内容
很多内容
标题
+
可以是图片
标题
+
鼠标经过效果
标题
+
内容
很多内容
标题
+
可以是图片
标题
+
可打开多个
点击效果
标题
+
内容
很多内容
标题
+
可以是图片
标题
+
鼠标经过效果
标题
+
内容
很多内容
标题
+
可以是图片
标题
+
相关参数
属性
默认值
描述
备注
titCell
'.item .Huifold-header'
触发区域
操作区
mainCell
'.item .Huifold-body'
主体区域
type
1
只打开一个,可以全部关闭
1 只打开一个,可以全部关闭;2 必须有一个打开;3 可打开多个
trigger
"click"
触发事件
"click" | "mouseover"
className
"selected"
折叠后添加样式
speed
"normal"
速度
"slow" | "normal" | "fast"
openKeys
默认展开的数组下标