jQuery PlugIn – Switch Tab 滑动门插件

jQuery 是继prototype之后又一个优秀的JavaScript框架.
有多优秀? 这个就不介绍了, 搜索去吧!

jQuery 的 UI 插件也不错. 但用了下, 没有想像中的好用.
于是, 很久以前就一直想做一个适合自己的, 轻量级的UI插件. 但如果不是很有必要的话, 这样的代码到处都是, 为什么要自己写呢? 实在懒得动手了.
用了几次网上搜索来的代码后, 又很不爽, 因为很不灵活, 有点小小改动就很费劲. 看着UI插件的体积又望而生畏. 还是自己写吧!

周末花了半天时间, 把以前写滑动切换代码整理成了插件. 不敢独享. 大家一起来当当小白鼠吧!  ^_^
从混乱版本到现在的1.0版, 这个小插件也经历了十数次项目应用的考验了. 基本上每一次项目使用, 都会有一点点改进. 一来是为了自己方便, 二来也是在向JQuery的宗旨努力: WRITE LESS,DO MORE(写更少的代码,做更多的事情).
这里不多写了. 还不如看着例子自己改一下更容易.

示例不够清楚或者有其他改进建议, 欢迎多多提出.

插件及示例文件下载地址:[2009-08-04更新]
ks-switch
压缩包包含的文件:
jquery-1.2.6.pack.js 是需要调用到的JQ框架. 这个在SF/BI中是自带的. 当然, 你也可以到相关的网站去下载最新版.
ks-switch.js 是插件代码. 你也可以把它复制到其他地方以方便调用.
ks-switch.pack.js 是压缩版. 对速度有要求的话可以使用这个.
switch-demo.html 是示例页面.

参数说明:
 * defaultIndex  - 默认选中的标签索引从0开始
 * titOnClassName - 标签选中时的样式
 * titCell   - 自定义标题标签, 支持选择符
 * mainCell   - 自定义标题标签, 支持选择符
 * delayTime  - 延迟触发时间. 当这个时间小于切换动画效果时间时, 动画将被禁用
 * interTime  - 自动切换时间. 当这个时间大于0时, 标签将定时自动切换
 * trigger   - 滑动触发方式. 默认为click, 可选择mouseover
 * effect   - 切换动画. 默认不使用动画. 目前仅提供fade(淡出), slide(向下展开)两种
 * omitLinks - 是否忽略带链接标签,默认为否

补充说明:
1. JavaScript效果, 都是会影响页面的加载速度和渲染效率的, 是双刃剑, 不应过度使用
2. 若网页还使用了其他JS框架, 要注意避免冲突
3. 没有万能的 程序/框架/插件
4. 这个基于 jQuery 制作的插件, 是支持CSS选择符的. 掌握多一点的CSS知识会让你更容易使用这个插件
5. jQuery API 在线参考文档
6. 这个滑动门的基本原理,一般都是先隐藏全部再按需显示的;由于通过JS的隐藏,是需要等待页面加载完毕再开始的,所以,如果滑动门中内容较多,建议先用CSS进行隐藏,以免在加载过程中页面变形

版权声明:
作者:爱情守望者
链接:https://www.96172.com/jquery-plugin-switch-tab-sliding-plug-in.html
来源:麦氪搜 iMacso.com | 让您的Mac更有价值
文章版权归作者所有,未经允许请勿转载。
THE END
分享
二维码
打赏
< <上一篇
下一篇>>