Latest web development tutorials

jQuery UI ThemeRoller

ThemeRoller 簡介

ThemeRoller 是一個Web 應用程序,為jQuery UI 設計和下載自定義主題提供了直觀的界面。 您可以訪問jQuery UI ThemeRoller進行主題定制。

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

ThemeRoller logo

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" 組件

ThemeRoller Ready BannerThemeRoller Ready Banner

ThemeRoller 生成了一個jQuery UI CSS 框架的自定義版本,用於開發您自己的ThemeRoller-ready jQuery 組件。 通過這個框架生成的類被設計來提供通用的用戶界面的設計情況,包括狀態、圖標以及各種輔助類。

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

ThemeRoller 鏈接