手风琴模块的行为

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

通过修改 Accordion 模块的一些行为,我们可以改变它的功能 .. 比如设置它的动画效果 .. 持续的时间 .. 触发切换内容的方式等等 ..

先找到初始化手风琴模块的这行 JavaScript .. 在这个 accordion 方法里面 .. 先给它一个对象作为它的参数 ..

在这个对象里,可以设置一下 accordion 模块的行为还有对应的值 .. 先添加一个 exclusive .. 唯一 .. 默认它的值是 true.. 也就是我们在一个手风琴里只能打开它里面的其中的一部分 .. 如果你想打开多个部分的内容,可以把这个行为的值设置成 false .. 保存 ..

现在,我们就可以同时打开手风琴里的多个部分的内容 ..

触发切换显示内容的是点击这个标题的动作 .. 我们也可以把这个点击事件,换成其它的,回到编辑器 .. 在这个对象里,再添加一个 on .. 它的值默认是 click ,也就是点击事件 .. 这里我们换成 mouseover .. 保存 ..

现在,当我们把鼠标放在标题上的时候,就会触发切换内容的动作 .. 切换显示内容的时候有个动画效果 .. 这个动画效果还有持续的时间我们也可以去配置一下 .. 比如我想让这个动画更快一些 .. 回到编辑器 .. 这里添加一个 duration 这个行为 .. 它的值默认是 500 毫秒 .. 就是半秒钟的时间 .. 这里改成 100 ..

现在这个切换内容的动画效果完成的时间会缩短很多 .. 另外还有一些行为 .. 你可以参考 Semantic UI 的 Accordion 模块的文档 ..

$('.ui.accordion').accordion({
exclusive: false,
on: 'mouseover',
duration: 100
});

手风琴模块的行为《 Semantic UI 模块 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点