Recently I was surfing the web for the best AJAX and CSS based tabs, menus for one of my project. In the process,I found some really good resources from fellow developers and thought to share the same with you all.
As you are aware that there are countless resources available on every topic in the world of internet but only a handful of them are utility types. As a result it is really hard at times to find the right resource from millions of websites which really suits our need.
Keeping this predicament of my fellow developers in mind, I came up with this list which will really prove to be helpful to all of you.
Keeping this predicament of my fellow developers in mind, I came up with this list which will really prove to be helpful to all of you.
Here is the list of examples are arranged randomly, show some love and Digg it if you really like it :)
AJAX Tabs (Rails Redux):
Description: The purpose of doing Tabs in Ajax is not just to do something in Ajax. The context for which this is used is not for novelty. In this demo we are using Ajax to load information that does not need to be retrieved every time the user pulls the record. The methods used here are to yield absolute control over where the content comes from, what conditions trigger action, and how the panes are presented. This is really meant to be used in an application because the javascript and css are heavy if you are only using them on one page. However if you consider them groundwork for using tabs throughout a larger application then they are pretty light compared to something like YUI.
Snippet Code for Simple AJAX Tabs with cool CSS Styles:
Hey folks over there, here I came up with simple Ajax Tabs, you guys can show case your valuable content using tabs scenario that to with Ajax. This is simple and elegant way of representing your content when your pages have tons of content to display. If you go through the code its simple and basic Ajax implementation, if you are a web-developer its easy to understand. In the example which I am attaching with this snippet article consists of index.html, ajax.js, tabs.css and lastly the content page named as contentpage1.html
Javascript Tabbar Component with rich API:
dhtmlxTabbar is a JavaScript tabbar control for creating dynamic tab-navigation interface. This control lets you add nice looking and powerful multiline* tab bar to your site or web application.
The control can be easily initialized on a web page that makes building of DHTML tabbed interface a breeze. Just assign any elements on your page (for example DIVs) to tabs of Tabbar, and it will automatically do all work for you - the component will switch these elements displaying them by clicking on corresponding tab (see sample code for easy and fast initialization at the bottom of this page).
The control can be easily initialized on a web page that makes building of DHTML tabbed interface a breeze. Just assign any elements on your page (for example DIVs) to tabs of Tabbar, and it will automatically do all work for you - the component will switch these elements displaying them by clicking on corresponding tab (see sample code for easy and fast initialization at the bottom of this page).
TabContainer - ASP.NET AJAX Control:
TabContainer is an ASP.NET AJAX Control which creates a set of Tabs that can be used to organize page content. A TabContainer is a host for a number of TabPanel controls.
Each TabPanel defines its HeaderText or HeaderTemplate as well as a ContentTemplate that defines its content. The most recent tab should remain selected after a postback, and the Enabled state of tabs should remain after a postback as well.
Control Tabs:
Unobtrusive CSS tabs for Prototype.js
This script uses the Prototype javascript framework. You must include version 1.5 in your pages before including this script. This library is known to work in recent versions of all major browsers (IE 6/7,FireFox,Safari,Opera).
Accessible, unobtrusive JavaScript Tabs with jQuery:
Here is a jQuery plugin that lets you create Javascript tabs very easily - once you assembled the HTML with just one line of JavaScript Code
Yahoo! UI Library: TabView
The TabView component is designed to enable developers to create navigate tabbed views of content. Check out the article on how to implement YUI tab view/menu interface.
Tabtastic (Non AJAX):
This library is a simple way to implement tabs on your page using CSS, a little JS, and semantic markup which degrades gracefully on browsers with CSS unavailable or disabled.
Not only is it easy to use and accessible for screen-readers, but it supports multiple (nested, even) tabsets on the same page and allows users to bookmark the page loading to a specific tab.
Not only is it easy to use and accessible for screen-readers, but it supports multiple (nested, even) tabsets on the same page and allows users to bookmark the page loading to a specific tab.
A Different approach for Tab Menu (Non AJAX):
If you want that the tabs are changing on click and not on mouseover -> then just change the onmouseover to onclick Of course you can set a link to each Menu Tab - just set the linkurl in the href and delete the onclick=”return false;” At the moment it’s not usable with disabled Javascript but i will fix this as soon i have time. If you want to activate the Tabs via Keyboard - just add an onfocus=”” with the same functions as the onmouseover in it. I’ve packed everything in 1 File - but you can also put the css in an external css file and the javascript in an external javascript file. There are a lot of other ways how you can do something like this but if you use more then one of these tabmenus, i think this is one of the best solutions.
DOMTab - Navigation tabs with CSS and DOMscripting (Non AJAX):
DOMtab is a JavaScript that turns a list of links connected to content sections into a tab interface. The script removes any “back to top” links in the section and automatically hides all but the first one when the page is loaded. You can use as many tabbed menus on the page as you want to. New: If the URL of the page links directly to one of the tabs it get automatically highlighted. You can define with an extra class if you want previous and next links or not. DOMtab uses Unobtrusive JavaScript and does not have any global functions or variables. This page uses DOMtab.
Ajax Project - Tabbed Page Interface:
Didn’t find what you want? Try our search
This project was inspired by forum contributor Nomadiq, based on an original CSS/Tab idea that can be found athttp://nontroppo.org/test/t ab1.html
There are quite a few Javascript implementations of tabbed interfaces out there on the web. How much better, though, to be able to change from pagetab to pagetab without a page refresh? Here’s an example of a tabbed interface using Ajax to load the new pages.
We are going to use the AHAH functions described in the Metatag Grabber project to implement the interface.
This project was inspired by forum contributor Nomadiq, based on an original CSS/Tab idea that can be found athttp://nontroppo.org/test/t ab1.html
There are quite a few Javascript implementations of tabbed interfaces out there on the web. How much better, though, to be able to change from pagetab to pagetab without a page refresh? Here’s an example of a tabbed interface using Ajax to load the new pages.
We are going to use the AHAH functions described in the Metatag Grabber project to implement the interface.
JavaScript Tabifier (Non AJAX):
Automatically create an HTML tab interface using plug-and-play JavaScript. Cool script which is very easy to implement with in no time. Must check it out.
DHTML Goodies: Tab Panes
Nothing much to say about this cool tab panes, as you all know DHTML Goodies always rocks. This site has got even support form section for all the examples they host and trust me their support form for each script is simply superb. So check out that site for other stuff too.
Ajax Tabs Content script:
This tab content script uses Ajax to let you display a selection of external content on your page inside a DIV and via CSS tabs! We got our inspiration for this script from Yahoo’s new homepage, which employs such a concept to show news in an organized fashion.
Tab Pane control (Non AJAX):
This Tab Pane control is fairly similar to the tab system Tim Scarfe created for developer-x.com and the basic idea is the same. That idea is to be able to use a normal XHTML document structure and if the browser supports DOM level 1 then the structure of the elements is slightly adjusted and a the className is changed for the tab pane container so that the css rules specially defined for the tab are applied.
Ajax Workshop 2: Building Tabbed Content
This workshop we will be building a tabbed content browser that’s Ajax powered. When ever a user clicks a tab the Ajax will communicate with the server and send back the appropriate data for that tab. We will start this workshop off with the XHTML and CSS for the tabbed content browser. We will need 3 main IDs (one for the container, one for the content area and one for the loading status) and 1 class (for the tabs).
The Zapatec Javascript Tabs Demos:
This is the AJAX Tabs demo. It uses the Zapatec AJAX Transport layer to transfer the tab contents dynamically and JSON to define the contents. It fetches Tab contents only when they are needed. This method lets you reuse HTML code. You can think of it as a client/server side include. You can easily create a Zapatec Tabs database-driven application using AJAX and JSON.
DOM Dynamic Tabs (Non AJAX):
source: wittysparks
Comments
Post a Comment