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.
Here is the list of examples are arranged randomly, show some love and Digg it if you really like it :)
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
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.
Unobtrusive CSS tabs for Prototype.js
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.
A Different approach for Tab Menu (Non AJAX):
Ajax Project - Tabbed Page Interface:
Didn’t find what you want? Try our search
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).
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):