本節書摘來自異步社群《jquery ui開發指南》一書中的第1章，第1.4節，作者：【美】eric sarrion 譯者：羅晴明 ,包勇明更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
在前面的幾節中，我們知道了jquery ui是由不同的css和javascript檔案組成的。此外，有些檔案是壓縮過的，而有些卻沒有壓縮。是以問題就來了：要使用jquery ui，我們的html頁面中應該引入哪些檔案呢？
1.4.1 未壓縮檔案
未壓縮的檔案位于jquery ui安裝目錄（jqueryui）下的development-bundle目錄。
1．javascript檔案
ui目錄（位于development-bundle下）包含了javascript檔案。jquery.ui.core.js檔案包含了基本功能（必須引入），而其他的檔案需要時再引入。最終會有一個包含了所有javascript檔案的custom.js（例如，jquery-ui-1.8.16.custom.js）檔案，這樣就無須單獨引入每個檔案了。minified目錄（位于ui目錄下）包含了壓縮格式的相同檔案。
2．css檔案
themes目錄（位于development-bundle目錄下）包含了css檔案。它由多個目錄組成，每個目錄包含一個主題（比如，base、smoothness及ui-lightness目錄）。每個主題下有一個images目錄和其他的css檔案。
jquery.ui.core.css檔案包含了基本功能（必需的），而其他檔案需要時再引入。jquery.ui.theme.css檔案定義了主題自身的樣式（必需的）。
jquery.ui.base.css檔案包含了development-bundle目錄下除了jquery.ui.theme.css外的所有檔案。jquery.ui.all.css檔案包含了所有的檔案（即jquery.ui.base.css和jquery.ui.theme.css）。
最終，會有一個包含所有css檔案的custom.css（例如，jquery-ui-1.8.16.custom.css）檔案，而無須單獨引入每個檔案了（這一點對于jquery.ui.all.css也是一樣的，隻是jquery.ui.all.css通過css指令@import引入其他檔案，而custom.css把所有檔案的内容都包括在内了）。
3．引入未壓縮檔案的html頁面示例
我們想顯示一個包含兩個頁籤的簡單頁面。主要的javascript檔案是jquery.ui.tabs.js，主要的css檔案是jquery.ui.tabs.css。首頁面會引入以下基礎檔案：①
這裡的jquery.js檔案和jqueryui目錄位于同一層目錄級别。它是标準的jquery javascript檔案。
core.js檔案是必須引入的，tab.js檔案還需要引入依賴的widget.js（正如tab.js檔案中指出的）。②
core.css檔案是必須引入的，theme.css檔案也是必須引入的。tab.css檔案則包含了頁籤的詳細樣式定義。
既然已經搭建了頁面的基本子產品，我們再建立并标記兩個頁籤，并在每個頁籤裡面添加一些文字。下面的代碼緊接着之前引入基礎檔案的那部分代碼。
這段腳本的結果（一個包括兩個頁籤的頁面）如圖1-5所示。
1.4.2 壓縮檔案
使用壓縮檔案能減少html頁面的加載時間。
js目錄（位于jquery ui安裝目錄下面，這裡是jqueryui）包含了javascript檔案。這裡隻需要jquery-ui-1.8.16.custom.min.js檔案。目錄中的另外一個檔案是壓縮版本的jquery。
css目錄（位于jquery ui安裝目錄下面，這裡是jqueryui）包含了每個已安裝主題的子目錄（例如，smoothness和ui-lightness目錄）。
每個主題都包括了一個images目錄和一個會被引入到html頁面中的css檔案。這和最終的custom.css（比如，jquery.ui-1.8.16.custom.css）是一樣的，是個壓縮版本。
3．引入壓縮檔案的html示例頁面
我們想顯示一個有兩個頁籤的頁面（和之前的一樣）：
除了jquery.js檔案外，現在隻需要兩個檔案了：
jquery ui 的javascript全局檔案（jquery-ui-1.8.16.custom.min.js）；
與使用的樣式相關的整個jquery ui css檔案（smoothness/jquery-ui-1.8.16.custom.css，與smoothness主題相關的檔案）。
現在再添加與之前一樣的html代碼來建立、标記和填充頁籤：
結果和之前的是一樣的。