Javascript Tab 导航插件 (23个)

Jquery插件

1.jQuery UI Tabs

这个tab脚本已经绑定在jqueryUI库里，它有很多的配置项，比如你可以配置出可以滚动的tab，tab嵌套等等。

2. jQuery idTabs

idTabs可以让你在网页中轻松地加入tab页，而且它还可以对它进行无穷无尽扩展。

Mootools插件

3.MooTabs

Mootabs是mootools1.1实现的一个微型插件，可以通过ajax来加载tab。

4.Pluggable MooTools Tabs

5.Sliding Tabs

Sliding Tabs也是基于mootools1.1实现的，如果你是在使用mootools1.2你应该看看下面这个。

6.Perspective Tabs

Perspective Tabs是一款简易的mootools插件，它可以再小空间里放下很多tab卡，而且可以滑动。

7.MorphTabs

仅支持mootools1.2+。

8.Accessible Ajax Tabs with MooTools

基于其他JS框架实现的tab

9.Yetii

10.DOMTab

11. JavaScript Tabifier

12.dhtmlxTabber

13.Tabtastic

14.Kollermedia Tab Menu

15.Ajax Project – Tabbed Page Interface

16.XP Style Tab Panes

17.Ajax Tabs Content Script from Dynamic Dr

18.DD Tab Menu from Dynamic Drive

19.DOM dynamic Tabs

20.Tab Pane

21.SimpleTabs by Komrade

22.Yahoo UI Library: TabView

23.Advanced Tabs from EXT JS

赞 (0)

相关推荐

  • jquery scrollTop方法根据滚动像素显示隐藏顶部导航条

    本文使用jquery的scrollTop方法监视页面垂直滚动像素,并根据像素隐藏或者显示顶部的导航条. 效果预览网址:http://www.keleyi.com/keleyi/phtml/scrolloversee.htm scrollTop的介绍: 语法 $(selector).scrollTop(offset) 参数 offset 描述 可选.规定相对滚动条顶部的偏移,以像素计. 定义和用法 scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置. scroll top offse

  • 关于Blog顶部的滚动导航条代码

    不少朋友通过各种方式问我要 Blog 顶部的滚动导航菜单的代码.其实也没什么特别的,但既然有需求,我就还是把这部分代码整理出来,供大家参考. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http

  • jQuery 顶部导航跟随滚动条滚动固定浮动在顶部

    jQuery 顶部导航跟随滚动条滚动固定浮动在顶部

      复制代码 代码如下: <section> <article class="left"> <p> </p> <ul> <li><a href="http://freejs.net/article_jquerywenzi_149.html" title="Ajax 动态加载内容">Ajax 动态加载内容</a></li> <li>

  • 导航跟随滚动条置顶移动示例代码

    导航跟随滚动条置顶移动示例代码

    复制代码 代码如下: #topmenu{position:absolute;top:100px;background:#4b4a4a;width:100%;margin:0 auto;clear:both;overflow:hidden;z-index:998;left:0} <script type="text/javascript"> jQuery(document).ready(function() { var topmenu = jQuery("#topm

  • 随窗体滑动的小插件sticky源码

    复制代码 代码如下: $.fn.stickyfloat = function(options, lockBottom) {                var $obj                 = this;                var parentPaddingTop     = parseInt($obj.parent().css('padding-top'));                var startOffset         = $obj.parent()

  • sencha touch 模仿tabpanel导航栏TabBar的实例代码

    sencha touch 模仿tabpanel导航栏TabBar的实例代码

    基于sencha touch 2.2所写 代码: 复制代码 代码如下: /**模仿tabpanel导航栏*/Ext.define('ux.TabBar', {    alternateClassName: 'tabBar',    extend: 'Ext.Toolbar',    xtype: 'tabBar',    config: {        docked: 'bottom',        cls: 'navToolbar',        layout: {           

  • 推荐三种简洁的Tab导航（网页选项卡）简析

    在网页中应用选项卡可以使网页显得更紧凑,结合AJAX技术可以使页面在有限的空间内展现更多的内容.本文主要介绍几种简洁的选项卡效果的实现(不涉及滑动门和AJAX),附有实例,无图片,兼容性较好,方便大家直接使用. 第一种形式: 通过更换显示样式实现,这种很常见,就不多说了. 复制代码 代码如下: <div id="tabs0">  <ul class="menu0" id="menu0">    <li onclick

  • 使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法

    使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法

    sticky组件,通常应用于导航条或者工具栏,当网页在某一区域滚动的时候,将导航条或工具栏这类元素固定在页面顶部或底部,方便用户快速进行这类元素提供的操作. 在这篇文章Sticky组件的改进实现提供了一个改进版的sticky组件,并将演示效果应用到了自己的博客.有了类似sticky的这种简单组件,我们就可以在利用它开发更丰富的效果,比如本文要介绍的tab导航和滚动导航.实现简单,演示效果如下: tab导航(对应tab-sticky.html): 滚动导航(对应nav-scroll-sticky.

  • JS幻灯片可循环播放可平滑旋转带滚动导航(自写)

    JS幻灯片可循环播放可平滑旋转带滚动导航(自写)

    最近在帮别人改一些东西,在网上找了好久,但是没有相同的,自己改了下,拿出来分享下: 先展示下效果把:  index.html 页面展示代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:

  • 基于Jquery的$.cookie()实现跨越页面tabs导航实现代码

    ---------tabs.js----------------- 复制代码 代码如下: $(function(){ //init seleted tab var on= $.cookie('current_tab'); if(on!="" && !isNaN(on)) { $(".nav li").eq(on).addClass("on").siblings().removeClass(); } //default tab el

  • 非常不错的三种简洁的Tab导航（网页选项卡）简析

    在网页中应用选项卡可以使网页显得更紧凑,结合AJAX技术可以使页面在有限的空间内展现更多的内容.本文主要介绍几种简洁的选项卡效果的实现(不涉及滑动门和AJAX),附有实例,无图片,兼容性较好,方便大家直接使用. 第一种形式: 通过更换显示样式实现,这种很常见,就不多说了. 复制代码 代码如下: <div id="tabs0"> <ul class="menu0" id="menu0">   <li onclick=&

随机推荐