web.develop

Die Sliding Doors-Technik ist inzwischen sehr beliebt bei der ansprechenden grafischen Darstellung von Tabs auf Webseiten. Allerdings ist die Anzahl und Benennung normalerweise statisch und wird bereits serverseitig generiert.

Mr. Havoc zeigt nun in einem Tutorial, wie man mit Hilfe von JavaScript clientseitig neue Tabs hinzufügen und auch wieder entfernen kann. Dabei wird der den Tabs zugeordnete Inhalt dynamisch nachgeladen.

• Easy to implement Dynamic CSS Tabs. The user can add and remove tabs (and content) without refreshing the page.
• The ability to specify default open tabs
• The ability for the website owner to specify which tabs can and cannot be closed after they are opened
• The ability to assign a different color to each tab. This makes it easier to ‘group’ tabs with similar content.
• Ajax Preloading Goodness. When a tab is opened, the contents of the tab’s panel are loaded with ajax. You can open a tab while the user is focused on a different tab. The newly opened tab will preload it’s content in the background and wait for the user to click the new tab when he or she is ready to.
• Tab Events. Each tab can have it’s own javascript code that will be triggered when a certain event happens. Such as Open, Close, Blur and Focus.
• Tested to work with Firefox 1.0, 1.5 and IE 6

(via Jens Grochtdreis)