位置: 编程技术 - 正文
推荐整理分享JavaScript插件Tab选项卡效果(js插件大全),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:JavaScript插件编辑视频,JavaScript插件库,JavaScript插件库,JavaScript插件库,JavaScript插件开发教程,JavaScript插件下载,JavaScript插件编辑视频,JavaScript插件库,内容如对您有帮助,希望把文章链接给更多的朋友!
闲来无事,研究了一下JavaScript插件的写法,今天就将自己写的一个小插件记录下来。
本文介绍了此款插件的基本用法,实现的功能以及代码。
首先,来看看最终效果:
这是一款普通的Tab选项卡插件,下面来讲讲它实现了哪些功能:
1、支持不同鼠标事件触发选项卡切换效果; 2、支持不同切换效果的配置,例如淡入淡出/直接切换; 3、支持默认展示第几个选项卡的配置; 4、支持选项卡的自动切换效果。
例子很简单,需要用到的知识包括: 1、html、css的基础知识; 2、对this,prototype,new等关键词的理解。
简而言之,就是通过参数配置的形式来完成不同效果的展示。
下面先看一看如何使用:
1、$(".js-tab").etab();2、$(".js-tab").etab({ triggerType: "click", effect: "fade", invoke: 2, auto: });3、Tab.init($(".js-tab"));
本插件支持几种不同的初始化方式,代码很简单,类似于BootStrap插件的使用方法。下面奉上完整的代码:
index.html
最后将插件代码列出来,在代码里面已经写了很详细的注释:
如此看来,是不是很简单,一起来动手试试吧!
标签: js插件大全
本文链接地址:https://www.jiuchutong.com/biancheng/369786.html 转载请保留说明!友情链接: 武汉网站建设