`

关于Jquery Tab插件

阅读更多

关于Jquery Tab插件,比较流行的是jQuery UI Tabs,最近此插件也已经有了更新,地址为http://stilbuero.de/jquery/tabs_3/  ,目前国内很多网站也在使用此插件,希望大家有时间了试用一下。

今天突然发现了一个更加轻量级的,功能更加丰富的 Jquery Tab插件。先展示一下其功能;

1、简单配置一下就可以实现如下效果:

http://flowplayer.org/tools/demos/tabs/index.html

2、扩展CSS样式就可以定做自己的tabs

/* alternate colors: skin2 */ 
ul .skin2  a  {
    background-color: #89a ;        
    color: #fff  !important;
}
 
/* mouseover state */ 
ul .skin2  a :hover  {
    background-color: #678 ;
}
 
/* active tab */ 
ul .skin2  a .current  {
    background-color: #4F5C6A ;
    border-bottom: 2px  solid  #4F5C6A ;    
}
 
/* tab pane with background gradient */ 
div .skin2  div  {
    color: #fff ;
    background: #234  url( /img/global/gradient/h300.png)  repeat-x  scroll  0  -50px ;
    min-height: 200px ;
}

效果如下:

http://flowplayer.org/tools/demos/tabs/skins.html

3、只是浏览器的【前进】和【后退】

  Code
$( function () {     $( " ul.css-tabs " ).tabs( " div.css-panes > div " , {history:  true }); });
效果如下:

http://flowplayer.org/tools/demos/tabs/history.html

4.通过Ajax调用每个Tab的内容,只有第一次点击Tab按钮的时候 调用Tab页内容

使用非常简单,效果如下:

http://flowplayer.org/tools/demos/tabs/ajax.html

5、Tab向导,比如形成购物车订单过程

完善个人信息->修改购物车商品->查看订单

效果如下:http://flowplayer.org/tools/demos/tabs/wizard.html

此种功能特别有用。

6、其他的还有手风琴效果,自己发掘吧,显示地址如下:

http://flowplayer.org/tools/demos/tabs/accordion-horizontal.html

此插件的下载地址如下:

http://flowplayer.org/tools/download.html

jquery.tools.min.js是一个UI功能包,还包括其他的一个UI特效

Tooltip :很不错的提示功能插件

Scrollable :滚动效果插件

Overlay :很好用的遮罩层插件

Expose :背景变暗效果

 

分享到:
评论

相关推荐

    jquery tab插件(共七个)

    标题“jquery tab插件(共七个)”表明这是一个关于jQuery Tab插件的集合,包含了7种不同的实现方式或者风格各异的插件。这可能是为了满足开发者在不同场景下的需求,比如设计样式、交互效果或者性能优化等方面的选择...

    jquery tab插件

    使用jq写的关于tab切换的插件,使用面向对象组件化开发

    jQuery TAB插件

    jQuery TAB插件是一种广泛应用于网页开发中的轻量级组件,主要用于实现页面上的选项卡功能。这个插件使得用户可以通过简单的鼠标滑过、点击或者自动切换来浏览不同的内容区域,极大地提升了用户体验,尤其在处理大量...

    jquery tab 的几个插件

    本篇文章将详细探讨标题为“jquery tab 的几个插件”的主题,介绍其中包含的三个jQuery Tab插件,以及它们如何帮助开发者实现功能完善的Tab效果。 1. **jQuery UI Tabs** jQuery UI 是一个官方的jQuery扩展库,...

    idTabs v3.0 简单易用的jQuery的Tab插件

    综上所述,idTabs是一个强大的jQuery Tab插件,适合快速构建响应式的Tab界面。通过其简单的API和灵活的配置选项,开发者可以轻松地定制Tab组件,以满足各种项目需求。无论是初学者还是经验丰富的开发者,idTabs都是...

    jquery tab选项卡插件 轻量级tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等功能

    首先,让我们详细了解一下这个jQuery Tab插件的核心功能: 1. **鼠标滑过切换**:此功能允许用户只需将鼠标光标移动到选项卡上,就能无须点击即完成内容区域的切换。这种交互方式增强了用户的浏览体验,尤其在移动...

    jQuery Tab标签插件

    为了使用jQuery Tab插件,首先要在网页中引入jQuery库和插件的JS文件,然后通过JavaScript代码创建和配置标签页。例如: ```html <!DOCTYPE html> <script src="https://code.jquery....

    可多次使用的jQuery tab选项卡插件.zip

    它的易用性和灵活性使其成为开发者们的首选,而jQuery Tab插件则是基于这个库构建的。 该插件的核心功能包括: 1. **动态生成**:可以动态创建或删除选项卡,这使得在页面加载后或用户触发某些事件时添加或移除...

    Jquery Tab插件

    JQuery Tab插件是一种基于流行的JavaScript库JQuery实现的组件,它允许开发者在网页中创建功能丰富的选项卡式布局。这种布局方式可以有效地组织和展示大量内容,提高用户体验,尤其适用于那些需要展示多个独立区域但...

    jQuery Tab插件 cleverTabs,用于在Tab中显示iframe

    **jQuery Tab插件 cleverTabs** 是一款用于网页中创建多标签功能的JavaScript库,它特别之处在于能够在每个标签页中嵌入`iframe`元素,从而实现动态加载和展示不同的网页内容。这款插件基于广泛使用的jQuery框架,为...

    jquery动态添加tab内嵌ifream插件

    本篇文章将详细讲解如何利用jQuery实现动态添加Tab并内嵌iFrame插件,以及相关的核心知识点。 首先,我们需要理解Tab组件的基本原理。Tab组件通常用于在有限的空间内展示多个独立但相关的页面内容。用户可以通过...

    jquery Tab 选项卡插件

    6. **响应式设计**:现代的jQuery Tab插件往往具备响应式设计,自动适应不同设备的屏幕尺寸,确保在手机、平板和桌面电脑上的表现一致。 在使用jQuery Tab插件时,有以下几个关键步骤: 1. **引入资源**:首先,你...

    jQuery Tab插件附示例.rar

    jQuery Tab插件附示例,jQuery Address早期插件,网页上的Tab 选项卡插件,其实选项卡和滑动门只是在操作方式的不同,滑动门是鼠标滑过时切换内容,选项卡是在鼠标单击时切换 ,本款是在鼠标单击TAB各个卡头时切换...

    jQuery Tabs插件 (选项卡插件)

    1. **引入依赖**:首先,需要在页面中引入jQuery库和jQuery Tabs插件的JS文件,例如`<script src="jquery.js"></script>`和`<script src="jquery.tab.js"></script>`。 2. **HTML结构**:创建选项卡的HTML结构,...

    简易实用的jQuery Tab选项卡菜单插件

    在**描述**中提到,这款jQuery Tab插件具有以下特性: 1. **动画特效**:当用户点击菜单项时,上边框会有动画效果,这增加了视觉吸引力,使交互过程更加生动有趣。这种动画效果可能是通过CSS3的过渡(transition)...

    tab在底部的jquery tabs选项卡插件

    在这个项目中,"tab在底部的jquery tabs选项卡插件"是利用jQuery库实现的一种特殊的导航组件。 选项卡是一种常见的用户界面元素,用于组织和展示分段的内容。在这款插件中,选项卡被放置在页面的底部,这样的布局...

    jquery tab10套插件

    jQuery Tab插件则是jQuery应用中常见的组件,用于实现网页上的选项卡功能,这种功能通常用于将大量内容分组并以简洁的方式展示。下面我们将详细探讨“jquery tab10套插件”中的相关知识点。 首先,我们来看标题...

    最简单的jQuery实现的Tab插件

    本教程将探讨如何利用jQuery这一强大的JavaScript库,仅用6行代码实现一个基础的Tab插件。jQuery的易用性和灵活性使得创建交互式Tab变得轻而易举。 首先,我们需要了解jQuery的基本用法。jQuery是一个广泛使用的...

    jQuery Tab菜单菜单插件

    本项目是关于使用jQuery实现一个功能丰富的Tab菜单插件,旨在为用户提供直观、动态的导航体验。下面我们将深入探讨jQuery Tab菜单的相关知识点。 1. **jQuery基础**:首先,你需要了解jQuery的基本语法,如选择器...

Global site tag (gtag.js) - Google Analytics