Menu

jQuery Tools：純粹的網頁內容展示型 UI

jQuery Tools 是一套非常優秀的 Web UI 庫，包括 Tab 容器，可摺疊容器，工具提示，浮動層以及可滾動容器等等，可以為你的站點帶來非同尋常的桌面般體驗，這套工具的主要作用是顯示內容，這是絕多多數站點最需 要的東西。這套令人驚異的 UI 庫只有 5.59K 大小，基於 MIT 和 GPL 兩種許可模式。


jQuery Tools. The missing UI library for the Web

和 別的 Web UI 庫不同，別的 UI 庫很多是面向行為的，如拖放，滾動，表格排序，可拖放窗口等等，它們更適合於 富 Web 應用，如 Email 客戶端，任務管理，圖片組織整理等。而 jQuery Tools 主要面向內容展示，因此更適用於單純的內容型網站。

jQuery Tools 使用也很簡便，只需幾行調用代碼即可，其官方站點包含大量演示和調用代碼可以參考。以下是該 UI 庫中包含的主要 UI 工具介紹。

 

jQuery Tools / Overlay

Overlay （浮動層）可以用來浮動在任何 HTML 對象的上方，在現代 Web 設計中，浮動層是一種非常有效的 UI 概念，可以用來

  1. 著重顯示你的產品。
  2. 顯示警示信息。
  3. 提示用戶輸入。
  4. 以燈箱風格瀏覽圖片庫。

jQuery Tools / Overlay 可以很輕鬆地處理上述各種情形和各種效果。

jQuery Tools / Tooltip

工具提示是 Web 上最實用的工具，Web 默認的提示工具太簡陋，jQuery Tools / Tooltip 會以一種非常漂亮的視覺效果顯示提示內容。


Tooltips in action

jQuery Tools / Tabs

Web 上最受歡迎的 UI 部件當屬 Tab 容器，如果沒有 Tab，我們的很多網頁不知要多麼混亂，所有用戶都熟悉 Tab 這種用戶友好的部件，jQuery Tools / Tab 非常好用，甚至可以使用瀏覽器的前進後退導航按鈕在 Tab 間前進或後退。


Tabs in action

jQuery Tools / Scrollable

jQuery Tools / Scrollable 可以在網頁中實行定製的，局部的滾動，在現代 Web 設計中，這幾乎是最受歡迎的一種技術，可以用在下面這些場合：

  • 產品目錄
  • 滾動新聞
  • 在表單中實現定製選擇框
  • 瀏覽圖片庫
  • 視頻播放列表
  • 各種站點導航


Scrollable in action

jQuery Tools / Flashembed

如今 JavaScript 真是越來越快了，所有瀏覽器都在 JavaScript 引擎上較量，我們會看到越來越多的基於 JavaScript 的 Web 部件面世，然而至少在當下， Flash 仍有其用武之地，比如播放視頻。

jQuery Tools / Flashembed 可以用來在網頁中加載 Flash 對象，雖然類似的工具比比皆是，但 Flashembed 絕對是其中最好用的一個。

demo演示地址：http://flowplayer.org/tools/demos/

本文來源：
中文翻譯來源：COMSHARP CMS 官方網站