30款有用的jQuery tabs插件

2011年8月3日 由 yybean 留言 »

Using tabs just makes a lot of sense. Therefore a lot of websites on the Internet have tabbed content and you can throw jQuery into the mix for some nice transition and animation effects. If you’ve yet to build tab navigation with jQuery, there are 30 usefulJQuery Tabs tutorials and plugins to help you get going.

1. Animated Tabbed Content With jQuery

A lot of websites on the Internet have tabbed content now a days. The problem I find with most of them is that most of the time they can be quite dull. For my new looks I created a container which has the ability to switch content through tabs, but with an animation. This tutorial will show you how to create your own tabbed content step by step.
clip_image001

View Live Demo

2. Tab Navigation with Smooth Horizontal Sliding Using jQuery

In this tutorial I’ll show you how to create a navigation menu that slides horizontally. It begins with a set of “tabs” on the right side of a containing element. When clicked, a tab slides to the left to reveal a group of links. Click the tab again, and it slides back. While I’ve never had a need to build one of these for any of my own projects, quite a few people have asked if I would demonstrate how it might be done, so here goes.clip_image002

View Live Demo

3. jQuery UI Tabs with Next/Previous

Tabbed areas are lovely, but when you start getting to more than 3 or 4 different tabs, they start to get a little crowded and it makes sense to provide alternative navigation of them. I think it makes sense to supply universally located Next/Previous buttons, so without even moving your cursor you can click through each of them.
clip_image003

View Live Demo

4. Create a smooth tabbed menu in jQuery

Unlike other tutorials that make use of jQuery UI Library, we don’t want to spend our resources in loading a heavy library that has a lot of functions but it isn’t neccesary in some cases (like ours).
clip_image004

View Live Demo

5. jQuery ‘Tab Slide Out’ Plugin

A couple weeks ago, I made this pull out slider thing using jQuery. (people use them as ‘feedback’ tabs) I decided to try making it into a plugin for jQuery and here it is. Use it for creating a feedback form, contact info, or any content which is revealed using a sliding animation by clicking on a tab.
clip_image005

View Live Demo

6. jQuery Moving Tab and Sliding Content Tutorial

We learn how to create a moving tab slide content in this tutorial. Basically, the tab section simulate Lava Lamp Effect, and the content is using animate method to slide it. I have two tutorials that focus on that two effectsclip_image006

View Live Demo

7. jQuery Tabs

For this tutorial I have created two screencasts demonstrating how to quickly apply a dash of jQuery to different layouts of markup, which, if the markup is well designed, it will automatically degrade nicely without JavaScript enabled. In a future article we will cover default browser functionality (i.e. supporting back, forward and bookmark buttons) and saving tab states.clip_image007

View Live Demo

8. jQuery animated feedback tab thingy

I saw this little widget being used on a couple of sites lately, and decided to try building one myself. Turned out to be pretty simple using jQuery and some css foo.clip_image008

View Live Demo

9. Create Bounce out Vertical menu with jQuery

So here will create a simple bounce out vertical menu with the help of little bit css3 and jquery framework. Beautiful navigation menu can stand out your website from the crowd of creative navigations. That’s why we tried to create vertical menu which on mouse hover give a nice bounce out sliding effect. Lets begin..clip_image009

View Live Demo

10. jQuery Tabbed Interface / Tabbed Structure Menu Tutorial

Nowadays, a lot of websites are using tab based content as a way to save spaces in a webpage. I have seen a lot of wordpress websites using a tabbed interface for its category, posts, comments and random posts content. It’s a good “space-saver” and if used it correctly, it can boost your website usability as well. Right, first of all, we need to have the ideas and the design structure for this tabbed interface.clip_image010

View Live Demo

11. Lazy Loading jQuery Tabs with ASP.NET

This article looks at efficient use of jQuery tabs when displaying data. Specifically, it covers how to lazy-load data, so that it is only accessed and displayed if the tab is clicked.
clip_image011

View Live Demo

12. Simple jQuery tabs

This tutorial looks into creating a really simple tabbed interface using just plain HTML and CSS with the functionality and interface manipulated using jQuery. Tabbed interfaces are great for maximizing the amount of space you have on your site.clip_image012

View Live Demo

13. Jquery Tabbing, Create Tab using Jquery, Jquery Tabbing Made Easy

Jquery has really made life very easy for javascript programmers. Traditionally we used to create tabbing in a website page using javascript show /hide methods. But always used to stuck with browser compatibility bugs.clip_image013

View Live Demo

14. Organic Tabs

The purpose of this demo is to show a tabbed area where the content in tabbed panels are of different heights. When we switch between tabs, the content below is gently moved up or down to accomodate.clip_image014

View Live Demo

15. jQuery Sliding Tab Menu for Sidebar Tutorial

This tutorial, we will be making a jQuery Sliding Tab Menu for sidebar. Previously, I made a tutorial about jQuery Tabbed Interface / Tabbed Structure Menu, if you have not read it yet, check it out. I’m using it for my sidebar at the moment. The differences between both tab menus are, the sliding direction and this time, we are using a little bit different HTML structure and massive change in jQuery script.clip_image015

View Live Demo

16. Make a custom tab interface with JQuery

First of all i would like to appologise i needed 4 days to write a new tutorial, that’s because i am working hard on developing a website from scratch to replace the wordpress.clip_image016

View Live Demo

17. Sweet AJAX Tabs With jQuery 1.4 & CSS3

Organizing the content of a page in a both intuitive and eye-catching manner, is a must in modern web design. One principle that has been around for some time is dividing text into tabs. This allows you to squeeze much more content in a seemingly limited space and provide a structured way of accessing it.clip_image017

View Live Demo

18. ‘Vertical Tabs’ for jQuery lovers!

Well, I was just wondering how to start this post and how to write words worth a thousand pictures. However, I believe giving a jQuery plugin a live try, worthes a thousands words. So, hover below and give Vertical Tabs a try.clip_image018

View Live Demo

19. Creating a Tabbed Wizard Interface in ASP.NET using jQuery Tabs

A tabbed interface saves UI space, by holding different categories of information in one window. Tabs also simplify navigation between different documents. jQuery has a very cool Tab Plugin. In this article, I will demonstrate how to integrate the Tab Plugin with ASP.NET Panels to create a Tabbed Wizard Interface.clip_image019

View Live Demo

20. Building a Better Blogroll: Dynamic Fun with SimplePie and jQuery

clip_image020

jQuery Tabs

A traditional blogroll is a simple list of other sites, often in the sidebar, that are related, owned by, or otherwise friendly to the home site. Blogrolls are a great idea and on-point with the spirit of blogging, but how is a casual reader to know if any of these sites are truly of interest? Let’s improve upon the concept of a blogroll by not just listing sites, but dynamically pulling recent headlines from them, and using some fun jQuery animation.

View Live Demo

21. Create a Slick Tabbed Content Area using CSS & jQuery

One of the biggest challenge to web designers is finding ways to place a lot of information on a page without losing usability. Tabbed content is a great way to handle this issue and has been widely used on blogs recently. Today we’re going to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally we’ll achieve the same thing using the jQuery library.
clip_image021

View Live Demo

22. jQuery To Fade Effects tabs

In this JQuery tutorial we will develop a program to make Fade Effect tabs
clip_image022

View Live Demo

23. jQuery Plugin – Feature List

I love the simplicity of using (and more important re-using) jQuery plugins. So I decided to release a plugin that came from my personal need – Feature List. This jQuery plugin enables simple and easy creation of an interactive “Featured Items” widget.
clip_image023

View Live Demo

24. JQuery EasyTabs Plugin

This plugin has been refactored and updated to version 2.0. It is completely backwards-compatible with previous versions, more versatile, and has some new features, including event-hooks and public methods.
clip_image024

View Live Demo

25. Fancy Sliding Form with jQuery

Today we are going to create a fancy sliding form that shows some validation feedback to the user after each step. This form saves a lot of space and is easy to access – it basically works like a slide show, just that we have fieldsets of a form instead of images.
clip_image025

View Live Demo

26. Create A Tabbed Interface Using jQuery

Creating tabbed interfaces suddenly becomes a piece-of-cake when using the Tabs function in the jQuery UI library. It can be utilized to create completely unique interfaces without having to be a coding God – using only one line of code!
clip_image026

View Live Demo

27. Tabify – Tabbed content with ease (jQuery plugin)

This Jquery plugin lets you easily create tabbed content. All you need is an ul-element with some li-elements and a couple of related content-divs. The major difference between Tabify and it’s competitors is it’s size.
clip_image027

View Live Demo

28. Tabbed Content with Navigation using jQuery UI

Since last 1 week we haven’t post any tutorial and we are really sorry for this. But today will post a tutorial on content slide with manual navigation using Tab function of jQuery UI library. Before getting started with tutorial we like you to check out the demo first. So there will be an image in your mind about whats really going on in this tutorial.
clip_image028

View Live Demo

29. How easy to create a slide tabbed box using jQuery

There are so many kinds of tabbed menu nowadays. Still I really like the sliding effect (such as in Coda website). Luckily, thank to jQuery, we could reassembly this effect and trust me it only takes a few minutes (I’m not such a hard-working developer to write something longer then that). As the main tutorial is about Javascript with jQuery, so I will just move quickly through the CSS.
clip_image029

View Live Demo

30. Simple Tabs w/ CSS & jQuery

I know there are quite a few tutorials out there that demonstrate how to create tabs with CSS & jQuery, but I decided to create my own as well. I’m not sure if the techniques are the same, but hopefully this tutorial will be easy to understand even for a beginner.
clip_image030

View Live Demo

 

英文原版(虽然这篇也是英文=_=|||)http://webdesign14.com/30-useful-jquery-tabs-tutorials/





发表评论