原文:37+ great ajax, css tab-based interfaces
翻譯: 帕蘭
在過去幾年中,web開發人員開發了許多ajax和css,tab選項卡切換為基礎的界面,成為一項非常有趣的技術,它讓我們用一種簡單的方式獲得信息,而不需要打開和關閉多個窗口。
在本文中,網頁設計花了許多時間來為你尋找最好的以tab選項卡切換為基礎的界面應用,這些tab選項卡切換應用包括使用純css和以ajax結合css實現的。
1) easy tabs 1.2 with autochange- 你可以設置成自動切換模式的tab選項卡菜單
4) sliding tabs- sliding tabs是一個mootools插件,它擁有一個非常漂亮的滑動效果。界面設計基本是模仿itunes音樂商店和panic的風格。
5) coda-slider-一個神奇的 jquery coda,界面設計簡潔清新,滑動平穩。
6) perspective tabs- 這個滑動門的前身是sliding tabs,使用mootools 創建,允許在有限的寬度里面擁有更多的tab選項卡,也就是說,頂部的tab是可以滾動的。
|||
7) ajax tabs content script- 這個一個多功能的ajax tab選項卡內容塊,它可以讓你在一個div層或是原來的html元素里面顯示一個外在文件里面的內容。
8 ) tab panes-這是一個xp風格的tabs,可以讓你實時載入或關閉一個tab選項卡。
9) closeable tabs module- 這個也是可以關閉,但是沒有發現打開功能。
10) fabtabulous- 使用prototype創建的一個簡單tab
11) jquery tabcontainer theme-一個jquery的tab選項卡內容,切換的時候擁有淡出效果。
12) moo.fx tab accordion- 使用moo.fx創建,擁有手風琴效果的tab選項卡內容切換。
13) mootabs- mootabs一個極小巧(3kb) 的tabs,基于 mootools. 主要是創建一個簡單的導航 。
|||
14) tabview component- the tabview component使用的是yahoo的ui庫,旨在讓開發人員創建一個tab導航的內容瀏覽。
15) fancy sliding tab menu- 基于script.aculo.us框架創建的一個非??岬膖ab效果。鼠標浮動在相應的tab時,tab成伸縮展示效果。
16) control.tabs- 一個簡單的css tab選項卡切換 ,利用prototype.js
17) zapatec ajax tabs- 這個demo使用 zapatec ajax 傳送內容到tab層里面動態顯示。
18) 15daysofjquery- jquery tabs 一個簡單的表單讓你可以輕松創建一個tab選項卡切換效果。
19) advanced tabs 這個tab控制完全使用javascript來演示: 自適應tab大小, tab 滾動, 為tabs添加圖標, 可使用tab插件(上下文菜單)等等。
20) floating window with tabs 這個腳本基于一個普通的css tab選項卡. 使用和設置它都非常簡單. 只需要放置你的html內容和調用一個javascript函數就能實現。
21) ajax tabs (rails redux) 使用ajax來載入內容的tab選項卡切換。
|||
22) ajax tabs reloaded 利用ajax,用戶可以添加或者移除一個tab內容塊而不需要重新載入頁面。
23) jquery nested tab
24) cross browser tabbed pages with embeded links 不需要javascript - 只用css - 并且是有效的,且支持大部分主流瀏覽器. 當鼠標懸浮在tab上時,顯示tab內容區。
25) css tabs這是一個不需要使用任何圖像或hack的css tab選項卡菜單。
26) css-driven tabs
29) hidden tab menu 一個簡單的顯示和隱藏tab內容區的選項卡菜單。
30) inverted sliding doors tabs- 這是一個倒置的滑動門tab選項卡切換,也就是說,tab切換菜單在內容塊的下面。
|||
31) updated simple css tabs- 這個二級層聯的css tab選項卡切換,也就是說,在一個css tab內容塊里面,還可以加入一個二級css tab選項卡。
32) css tabs with submenus- 這個css tab主要教你如何利用css和嵌套無序列表來實現切換效果。
33) simplified css tabs
35) dynamic ajax tabs in 20 lines 動態的ajax tab選項卡切換,只需要使用17行代碼,當然,要基于prototype javascript 框架。
新聞熱點
疑難解答
圖片精選