6个出色的基于JQuery的Tab选项卡实例

今天在修整博客侧栏信息时,利用到了Tab选项卡方式,因为ZBlog封装的是JQuery库,所以很自然地就想到了IdTabs。顺便也找 来了不少优秀的Tab选项卡实例,在这里与大家分享一下。当然,最终我没有用到IdTabs以及如下任何一个实例,我只是很不服气的自己写了个小插件,尚 不完善,就不于此共享了。先来看看老外们出色的基于JQuery的各式Tab选项卡吧:

1. jQuery 选项卡界面 / 选项卡结构菜单教程
这种 类型的菜单在网页设计与开发中非常著名的。此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单。要非常留心此 演示哟,你一定会喜欢上它的。
演示 |  下载 |  介绍

2. jQuery目录导航插件
这个jQuery插件为我们提供了添加基于字母顺序的导航小部件到有序和无序列表的方法。一个在 列表之上的简易的(via CSS)导航条,向用户展示从A到Z的检索。通过从列表中选择一个字母来显示以此字母开头的所有元素。在可选字母上面显示的计数,是表明当你点击此字母的 时候会有多少项目被现实。除此之外还有其他的基本功能可供选择。
演示 |  下载 |  介绍

3. jQuery的Kwicks菜单
Kwicks起源于Mootools中的一个效果(相同名字),逐渐演变成一个高度可定制 的通用部件.
演示 |  下载 |  介绍

4. jQuery褪色菜单 -更换内容
CSS-tricks上很好的教程,讲解如何使用css和jQuery, 这次是他们教导如何使用 jquery使得菜单选项褪色。
演示 |  下 载 |  介绍

5. jQuery idTabs
idTabs是jQuery的插件。他能非常容易的为网站添加选项卡. 但是他也为无穷的可能性敞开大门。
演示 |  下载 |  介绍

6. jQuery + CSS创建顺畅的选显卡内容区
网页设计师设法把大量的信息浓缩在一个网页上而不失可用性是最大的挑战之 一。内容选项卡化是处理此类问题非常棒的方法,最近广泛被应用于博客。这是一篇非常棒的教程讲解,使用HTML建立一个小的选项卡信息盒,最后使用一些简 单js功能与jQuery库实现。
演示 |  下载 |  介绍

转载于:https://www.cnblogs.com/sallen/archive/2010/09/02/1815672.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
setTimeout(function(){ var n =0; var u,end,start,g,g2; var w0 = 50; var w1 = 10.4; var w2=52; var heightVal =$("div[data-page='profile1']").find(".row").eq(1).find(".number").attr("initial-value"); //150-140 var widthVal =$("div[data-page='profile1']").find(".row").eq(2).find(".number").attr("initial-value"); //550-300 /2.5 /10 保留最后一们小数 var ageVal = $("div[data-page='profile1']").find(".row").eq(0).find(".number").attr("initial-value"); //30-18 var mouVal=$("div[data-page='profil']") $('.ruler .main').eq(0).css({ '-webkit-transform':'translateX(-'+Math.ceil(parseInt(ageVal*w0))+'px)' }).attr('value',Math.ceil(ageVal*w0)); $('.ruler .main').eq(1).css({ '-webkit-transform':'translateX(-'+parseInt(heightVal*w1)+'px)' }).attr('value',heightVal*w1); $('.ruler .main').eq(2).css({ '-webkit-transform':'translateX(-'+parseInt(widthVal*w2)+'px)' }).attr('value',widthVal*w2); for( var i =0 ; i < $('.ruler').length; i++){ var liW = $('.ruler').eq(i).find("li").width(); var size = $('.ruler').eq(i).find('li').size(); } $('body').on('touchcancel,touchend,touchmove,touchstart',function(e){ e.preventDefault(); }) $('.selectize li').on('touchstart',function(){ $(this).addClass("hover").siblings("li").removeClass("hover"); }) $('.selectize li').on('touchsend',function(){ $(this).removeClass("hover"); }) $('.ruler ul').on("touchstart",function(e){ var initial = $(this).attr('data-initial'); e.stopPropagation(); v = parseInt($(this).parent(".main").attr('value')); if($(this).closest('.ruler').hasClass("ruler-weight")){ start = 0; end = '-1458'; g = 52; }else if($(this).closest('.ruler').hasClass("ruler-age")){ start = 0; end = '-1600'; g = 50; }else{ start = 0;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值