`
阅读更多

说到选项卡,想必大家已经相当的熟悉了,也收藏了不少,但是今天还是要给新朋友介绍一些效果比较拉风的选项卡,供大家在日后 慢慢享用..

1) Easy Tabs 1.2 with autochange- 你可以设置成自动切换模式的Tab选项卡菜单
下载地址:1 2 3



2) Rotating jQuery tabs这个自动切换的Tab选项卡菜单效果非常酷,在切换的时候文字可以产生淡入淡出效果。

3) Slideshow Tab Content Script-”- 这个TAB选项卡菜单支持幻灯片的自动播放模式。 滑动门TAB选项卡菜单

4) Sliding Tabs- Sliding Tabs是一个mootools插件,它拥有一个非常漂亮的滑动效果。界面设计基本是模仿iTunes音乐商店和Panic的风格。


5) Coda-Slider-一个神奇的 jQuery Coda,界面设计简洁清新,滑动平稳。

6) Perspective tabs- 这个滑动门的前身是Sliding Tabs,使用mootools 创建,允许在有限的宽度里面拥有更多的Tab选项卡,也就是说,顶部的Tab是可以滚动的。 Ajax 的Tab选项卡内容块

7) Ajax Tabs Content Script- 这个一个多功能的Ajax Tab选项卡内容块,它可以让你在一个DIV层或是原来的HTML元素里面显示一个外在文件里面的内容。

拥有关闭能力的Tab选项卡菜单

8 ) Tab Panes-这是一个XP风格的Tabs,可以让你实时载入或关闭一个Tab选项卡。


9) Closeable Tabs Module- 这个也是可以关闭,但是没有发现打开功能。 绝对值得一看的一些Tab选项卡实例操作

10) Fabtabulous- 使用Prototype创建的一个简单Tab


11) JQuery TabContainer Theme-一个JQuery的Tab选项卡内容,切换的时候拥有淡出效果。

12) moo.fx Tab Accordion- 使用moo.fx创建,拥有手风琴效果的Tab选项卡内容切换。

13) MooTabs- MooTabs一个极小巧(3kb) 的Tabs,基于 MooTools. 主要是创建一个简单的导航 。

14) TabView component- The TabView component使用的是Yahoo的UI库,旨在让开发人员创建一个TAB导航的内容浏览。

15) Fancy Sliding Tab Menu- 基于script.aculo.us框架创建的一个非常酷的TAB效果。鼠标浮动在相应的Tab时,TAB成伸缩展示效果。

16) Control.Tabs- 一个简单的CSS tab选项卡切换 ,利用Prototype.js

17) Zapatec Ajax Tabs- 这个DEMO使用 Zapatec AJAX 传送内容到Tab层里面动态显示。 Ajax Tab选项卡切换效果 生成器1 15daysofjquery- jQuery Tabs 一个简单的表单让你可以轻松创建一个Tab选项卡切换效果。

高级Tab选项卡切换效果

19) Advanced Tabs 这个Tab控制完全使用javascript来演示: 自适应Tab大小, Tab 滚动, 为Tabs添加图标, 可使用Tab插件(上下文菜单)等等。


20) Floating window with tabs 这个脚本基于一个普通的CSS Tab选项卡. 使用和设置它都非常简单. 只需要放置你的HTML内容和调用一个javascript函数就能实现。

21) AJAX Tabs (Rails redux) 使用Ajax来载入内容的Tab选项卡切换。

22) Ajax Tabs Reloaded 利用Ajax,用户可以添加或者移除一个Tab内容块而不需要重新载入页面。

23) JQuery Nested Tab 纯CSS的Tab选项卡切换

24) Cross browser tabbed pages with embeded links 不需要javascript - 只用CSS - 并且是有效的,且支持大部分主流浏览器. 当鼠标悬浮在Tab上时,显示Tab内容区。


25) CSS Tabs这是一个不需要使用任何图像或Hack的CSS Tab选项卡菜单。

26) CSS-driven tabs

27) CSS-driven tabs 2 CSS Tabs- 基于 Joshua Kaufman版本设计的CSS Tab选项卡菜单

29) Hidden Tab menu 一个简单的显示和隐藏Tab内容区的选项卡菜单。

30) Inverted Sliding Doors tabs- 这是一个倒置的滑动门Tab选项卡切换,也就是说,Tab切换菜单在内容块的下面。

31) Updated Simple CSS Tabs- 这个二级层联的CSS Tab选项卡切换,也就是说,在一个CSS Tab内容块里面,还可以加入一个二级CSS Tab选项卡。

32) CSS Tabs with Submenus- 这个CSS TAB主要教你如何利用CSS和嵌套无序列表来实现切换效果。

33) Simplified CSS Tabs

34) Tabs- 使用CSS 创建的TAB选项卡切换显示. Ajax Tab选项卡切换效果 教程

35) Dynamic Ajax Tabs in 20 Lines 动态的Ajax Tab选项卡切换,只需要使用17行代码,当然,要基于Prototype Javascript 框架。


36) Building Tabbed Content 这个教程告诉你,如何AJAX实时载入内容的Tab选项卡。当用点击一个Tab时,将与服务器连接并传回相应的数据。

37) CSS Tabs- 一个强大的教你创何使用CSS来创建Tab选项卡 。

分享到:
评论

相关推荐

    横向和树形tab tab菜单

    在网页设计和开发中,"横向和树形tab菜单"是一种常见的用户界面元素,用于组织和展示大量信息。这种设计模式有效地利用空间,提供清晰的导航结构,帮助用户快速找到所需内容。以下是对这一主题的详细说明: 1. **...

    Tab2Shp 批量tab转shp工具

    《Tab2Shp:批量将TAB转换为SHP的实用工具详解》 在地理信息系统(GIS)领域,数据格式的转换是一项常见的任务。本文将详细阐述Tab2Shp工具的功能和使用方法,帮助用户理解如何批量将TAB格式的数据转换为SHP格式,...

    支持网页版的SSH 工具-Tabby介绍.docx

    支持网页版的SSH工具-Tabby介绍 Tabby是一个功能强大且易用的SSH工具,它提供了多平台支持、SFTP功能、炫酷的终端页面、插件支持等特性。下面是Tabby的详细介绍: 1. 多平台支持:Tabby提供了Windows、MacOS...

    Android垂直tab导航栏、左侧竖直tab导航栏

    在Android应用开发中,设计一个用户友好的界面是至关重要的,而Tab导航栏作为一种常见的界面元素,能够帮助用户轻松地在不同的内容区域之间切换。"Android垂直tab导航栏、左侧竖直tab导航栏"就是这样一个设计,它...

    纵向书签式Tab页

    【标题】:“纵向书签式Tab页”是一种创新的网页设计模式,它将传统的横向Tab页转换为垂直布局,提供了一种独特的用户交互体验。这种设计尤其适用于内容丰富的页面,可以更有效地利用屏幕空间,使用户能清晰地看到每...

    JavaScript实现tab栏切换效果

    JavaScript 实现的 Tab 切换效果是一种常见的网页交互设计,用于在不同的内容区域之间进行切换,通常用在页面顶部或侧边的导航菜单。在这个例子中,我们将详细讲解如何使用 JavaScript 和 CSS 实现这一功能。 首先...

    各种web的tab样式大全

    在Web开发中,Tab组件是一种常见的用户界面元素,它用于组织和展示大量信息,通过切换不同的选项卡,用户可以方便地在多个视图之间切换,而无需加载新的页面。本资源"各种web的tab样式大全"集合了多种Tab设计与实现...

    [QT]实现Tab键切换控件的两种方式及禁止Tab切换的简单方法

    在QT编程中,用户界面(UI)的交互性是至关重要的,Tab键的使用就是提升用户体验的一个关键元素。Tab键可以方便用户在不同控件之间快速切换,无需使用鼠标。本篇文章将深入探讨如何实现Tab键切换控件的两种方式以及...

    swing多tab页面板练习

    在Java的Swing库中,开发GUI应用程序时,我们经常需要用到多Tab的界面设计,这可以为用户提供清晰的模块划分,提高交互体验。本练习主要关注如何创建和管理多个Tab,利用`javax.swing.JTabbedPane`组件来实现这一...

    用CSS写的Tab滑动轮

    标题中的“用CSS写的Tab滑动轮”是指在网页设计中使用CSS来实现一种交互式的Tab切换效果。这种效果常见于各种网站,如导航菜单、内容展示等,它允许用户通过点击不同的Tab来切换显示不同的内容区域。CSS(Cascading ...

    ie tab插件 chrome

    IE Tab 这款插件对于Chrome的爱好者来说应该都不会感到陌生了。IE Tab插件的功能就是在Chrome浏览器中嵌入IE浏览器的内核,如果用户在用使用Chrome浏览过程中遇到只能兼容IE的网站,用户不需要从新在打开IE浏览器...

    13个css tab选项卡

    在网页设计中,CSS Tab选项卡是一种常见的交互元素,它允许用户通过点击不同的标签来查看或切换不同的内容区域。这种设计模式在很多网站上都能看到,例如设置面板、产品介绍等场景。本教程将深入探讨如何创建13种...

    Angular 动态添加 Tab 标签

    在 Angular 框架中,动态添加 Tab 标签是一种常见的需求,特别是在构建可扩展、模块化的应用时。本文将深入探讨如何利用 Angular 的 `ComponentFactoryResolver` 和其他核心服务来实现这一功能。 首先,我们需要...

    tabby macos 安装包

    Tabby是一款功能强大的终端模拟器,专为包括macOS在内的多种操作系统设计。它提供了一个现代化的界面,支持多种shell,并且具有高度可定制性,使用户能够根据个人需求调整终端的各项设置。在macOS上安装Tabby,可以...

    tab选项卡切换效果,tab选项卡内容宽度自适应

    在网页设计中,"tab选项卡切换效果"是一种常见的用户界面设计模式,它允许用户在有限的空间内查看和切换不同的内容区域。这种效果通常用于显示大量相关但互斥的信息,如产品详情、用户评论或者设置选项。在这个项目...

    彻底修复E4A编辑器tab崩溃插件

    在E4A开发过程中,编辑器的稳定性至关重要,但有时可能会遇到一些问题,比如“tab崩溃”现象。标题提到的“彻底修复E4A编辑器tab崩溃插件”就是为了解决这个特定问题而设计的。 在Windows 10操作系统中,有些用户在...

    bootstrap-closable-tab tab可关闭组件

    这包括一个`<ul>`元素作为Tab导航,每个`<li>`元素代表一个Tab,`<a>`元素用于链接到对应的Tab内容,以及一个可选的`<button>`元素作为关闭按钮。 2. **CSS 样式**:为了美观,我们可能需要定制CSS样式,使关闭按钮...

    MFC tab控件的美化

    在Microsoft Foundation Class (MFC)库中,Tab控件是一种常用元素,用于在单一界面内组织多个视图或对话框。在默认情况下,MFC的Tab控件可能看起来较为普通,但通过自定义绘制(OwnerDraw)技术,我们可以实现对Tab...

    Tab选项卡切换代码.zip

    在网页设计中,Tab选项卡是一种常见的用户界面元素,它允许用户在有限的空间内浏览多个相关的视图或内容。Tab选项卡切换代码是用于实现这一功能的JavaScript代码,通常结合HTML和CSS一起工作,以创建交互式的选项...

    同一页面多个Tab选项卡嵌套显示实例

    2. 内部Tab:在某个Tab的内容区域内,再次使用Tab结构创建子Tab,这些子Tab只在父Tab被选中时可见。 3. 事件处理:使用JavaScript或jQuery监听主Tab和子Tab的点击事件,根据用户选择更新内容区域。 4. 层级管理:...

Global site tag (gtag.js) - Google Analytics