收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 15576|回复: 51

【原创】jQuery.Switchable 1.0

[复制链接]
发表于 2010-3-14 18:39:47 | 显示全部楼层 |阅读模式
jQuery.Switchable是一款整合了Tabs、Slide、Scrollable等常见UI组件的jQuery插件。它有简单易用的API、可灵活配置的Configuration,支持自定义Effect,支持自主开发Plugin。

jQuery.Switchable能实现什么样的效果?看图:
Tabs
tabs.png

Slide
slide.png

Scrollable
scrollable.png

Horizontal Accordion
Horizontal-Accordion.png

Taobao.com
taobao.com.png


下面是构建jQuery.Switchable的基本格式:
  1. $("trigger-container-selector").switchable("panel-selector", {
  2. triggerType: "mouse", // or click
  3. effect: "default",
  4. circular: false
  5. });
复制代码


更多介绍,请查看http://ilikejquery.com/switchable/

评分

参与人数 1威望 +1 收起 理由
cloudgamer + 1 谢谢分享

查看全部评分

发表于 2010-3-15 09:48:23 | 显示全部楼层
非常的强大以及实用,我肯定第一个来支持了。
回复 支持 反对

使用道具 举报

发表于 2010-3-15 09:57:24 | 显示全部楼层
为何引入jQuery?独立组件不好?
回复 支持 反对

使用道具 举报

发表于 2010-3-15 10:10:11 | 显示全部楼层
挺不错的,先支持一个````
回复 支持 反对

使用道具 举报

发表于 2010-3-15 13:54:21 | 显示全部楼层
很好,喜欢
回复 支持 反对

使用道具 举报

发表于 2010-3-15 13:55:05 | 显示全部楼层
弓坚贞不屈!
回复 支持 反对

使用道具 举报

发表于 2010-3-15 17:29:21 | 显示全部楼层
呵呵,非常地强大~
回复 支持 反对

使用道具 举报

发表于 2010-3-15 19:58:05 | 显示全部楼层
给的网址无法访问,能打个包吗
回复 支持 反对

使用道具 举报

 楼主| 发表于 2010-3-15 21:14:48 | 显示全部楼层

回复 8# tmulmt 的帖子

能打开啊
回复 支持 反对

使用道具 举报

发表于 2010-3-16 07:09:09 | 显示全部楼层
jquery很好啊,必竟现在很多都在用,赞下LZ!
回复 支持 反对

使用道具 举报

发表于 2010-3-16 08:42:34 | 显示全部楼层
感觉Scrollable这个用蓝色的圆点表示当前,用灰色表示非当前好些。你的刚好相反了。
回复 支持 反对

使用道具 举报

发表于 2010-3-16 09:34:18 | 显示全部楼层
很好..很强大...

[此著名广告位 招租]
回复 支持 反对

使用道具 举报

发表于 2010-3-16 11:10:56 | 显示全部楼层
挺不错的.很强
回复 支持 反对

使用道具 举报

发表于 2010-3-16 20:05:26 | 显示全部楼层
LZ的东西很不错
回复 支持 反对

使用道具 举报

 楼主| 发表于 2010-3-16 21:43:38 | 显示全部楼层
原帖由 [i]MorpheusZeng 于 2010-3-16 08:42 发表
感觉Scrollable这个用蓝色的圆点表示当前,用灰色表示非当前好些。你的刚好相反了。


用的迅雷上的图片,刚开始我也是你这种想法,后来想通了:
蓝色,类似链接色,就是说可以点击
灰色,灰度,不能点击

感谢LS所有人的支持
回复 支持 反对

使用道具 举报

发表于 2010-3-17 11:48:16 | 显示全部楼层
报告一个BUG,采用 effect: "fade",在由第5个回到第一个时,第一个页面为空白了。
原因我也正在查。IE8 Maxthon 1.6.7
回复 支持 反对

使用道具 举报

 楼主| 发表于 2010-3-17 16:58:08 | 显示全部楼层

回复 16# njutliu 的帖子

你的话语中有“第5个”,我想你说的应该是http://ilikejquery.com/switchable/demos/slide/plugin.html上的例子吧,而且你是直接把scroll换成了fade

carousel插件通常情况下是和scrollable配合的,因为其他的效果没必要用这个插件(看不出效果)。
你看看http://ilikejquery.com/switchable/demos/scrollable/plugin.html这里的Demo就知道是怎么回事了
回复 支持 反对

使用道具 举报

发表于 2010-3-17 17:51:47 | 显示全部楼层
提示: 作者被禁止或删除。
回复 支持 反对

使用道具 举报

发表于 2010-3-17 17:53:37 | 显示全部楼层

很好很强大

很好很强大
回复 支持 反对

使用道具 举报

发表于 2010-3-18 09:10:11 | 显示全部楼层
还是有个通病:tabs不能自适应宽度。
回复 支持 反对

使用道具 举报

发表于 2010-3-18 09:32:02 | 显示全部楼层
顶一下,楼上什么时候来个TABS能自适应宽度的插件
回复 支持 反对

使用道具 举报

发表于 2010-3-18 11:30:41 | 显示全部楼层
比较综合,收藏一下,谢谢~
回复 支持 反对

使用道具 举报

发表于 2010-3-18 12:46:17 | 显示全部楼层
不错,支持一下
回复 支持 反对

使用道具 举报

发表于 2010-3-18 15:45:05 | 显示全部楼层
图片切换效果的,怎么在图片上加文字描述
回复 支持 反对

使用道具 举报

 楼主| 发表于 2010-3-18 17:59:51 | 显示全部楼层

回复 20# bmcsy & 24# minmiss 的帖子

你们俩的问题,都属CSS。我只是做个Demo说明下jQuery.Switchable能实现什么样子的效果

如果要把所有人的具体需求都做个Demo出来,那得做多少个Demo啊

[[i] 本帖最后由 jsw0528 于 2010-3-18 18:02 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2010-3-19 09:22:52 | 显示全部楼层
很强大的代码 支持一下
回复 支持 反对

使用道具 举报

发表于 2010-3-19 13:43:30 | 显示全部楼层
支持一下,谢谢楼主分享!
回复 支持 反对

使用道具 举报

发表于 2010-3-19 19:35:25 | 显示全部楼层
谢谢楼主分享!
回复 支持 反对

使用道具 举报

发表于 2010-3-21 12:37:17 | 显示全部楼层
谢谢了,已经下载研究了
回复 支持 反对

使用道具 举报

发表于 2010-3-22 11:00:55 | 显示全部楼层
Scrollable添加图片链接后就不滚动了, 请教如何解决?
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-8-5 13:48 , Processed in 0.149038 second(s), 15 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表