浙江 杭州

jQuery制作响应式选项卡代码-页面变小时tabs变accordion

系统分类: 网页特效 - jquery插件 - jQuery选项卡/Tabs 2016-07-13

人气6944

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这个插件提供了一种响应式的tabs选项卡功能,当显示屏幕变得足够小时,tabs选项卡就转变为accordion手风琴效果。

特点

  • 屏幕变小时会由tabs选项卡转换为accordion手风琴效果。
  • 使用javascript/jQuery技术进行转换。
  • 使用css来渲染桌面、平板和手机。
  • 在tab转换时有回调函数。
  • tabs能通过url打开。
  • tabs能自动旋转。
  • tabs能够折叠。
  • tabs能够基于窗口折叠。
  • 浏览器兼容性好,支持IE7+、 Chrome、Firefox、Safari和Opera。
  • 可在多种设备上使用它,电脑、平板和手机均可用。

使用方法

需要jQuery(jQuery最低版本要求为jQuery 1.7.0)

引入jquery.responsiveTabs.js文件。

引入responsive-tabs.css和style.css文件。

HTML结构

<ul>
    <li><a href="#tab-1"> .... </a></li>
    <li><a href="#tab-2"> .... </a></li>
    <li><a href="#tab-3"> .... </a></li>
    </ul> 

    <div id="tab-1"> ....... </div>
    <div id="tab-2"> ....... </div>
    <div id="tab-3"> ....... </div>
</div> 
                

使用jQuery调用插件

$('#responsiveTabsDemo').responsiveTabs({
    startCollapsed: 'accordion'
});
                

查看演示
下载资源:3
下载资源
错误提交:

格式:zip 大小:86.42KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-2004.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery制作响应式选项卡代码-页面变小时tabs变accordion

我当前G币余额:0 已下载次数:3

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有1 评论)