jQuery UI 主題滾輪


ThemeRoller 簡介

ThemeRoller 是一個 Web 應用程序,為 jQuery UI 設計和下載自訂主題提供了直覺的介面。您可以造訪 jQuery UI ThemeRoller 進行主題自訂。

jQuery UI ThemeRoller 是由波士頓的 Filament Group, Inc 設計和開發的。

9.png

ThemeRoller 介面

ThemeRoller 的介面分為不同面板,各面板分別是全域字體和圓角半徑設定、小工具容器樣式、可點擊元素的互動狀態,及覆蓋和陰影的各種樣式。這些面板允許配置各種 CSS 屬性,例如字體尺寸、顏色、粗細、背景顏色和紋理、邊框顏色、文字顏色、圖示顏色、圓角半徑,等等。

主題館(Gallery):預先設計主題

ThemeRoller 主題可以透過永久連結 URL 進行查看,它包含一些預先設計的主題可供選擇。主題館(Gallery)可以透過位於應用程式介面頂端的標籤列進行存取。從主題館(Gallery)中,您可以預覽和下載主題,甚至可以選擇一個主題,然後切換到 "Roll Your Own" 標籤頁進行調整。

下載主題

當您設計主題後,您可以下載主題以便在專案中進行使用。 ThemeRoller 在頂部有一個 "Download theme(下載主題)" 按鈕,可以產生一個 zip 壓縮包,包含了所有的主題相關檔案。下載檔案中的圖像是按照您的規格進行生成的,並保存為高品質的 PNG 檔案。

您的主題將包含圖片和 CSS,組成了 jQuery UI CSS 框架的自訂版本,包含了所有外掛程式的圖片和 CSS。

在專案中依照下載的主題

一旦下載了主題,解壓縮後,您將看到一個名為 themes 的資料夾。該資料夾包括了主題所需的 CSS 和圖像。複製主題資料夾到您的專案中,並在頁面中連結 themes/all.css 檔案。

建立自訂的"ThemeRoller-Ready" 元件

10.png

ThemeRoller 產生了jQuery UI CSS 框架的自訂版本,用於開發您自己的ThemeRoller-ready jQuery 組件。透過這個框架產生的類別被設計來提供通用的使用者介面的設計情況,包括狀態、圖示以及各種輔助類別。

如需了解更多 jQuery UI CSS 框架的開發信息,請查看 主題化 API 文件

ThemeRoller 連結