請確保您的游標放在頁面上要插入 Widget 的位置。
上次更新時間
2026年4月30日
了解如何使用 jQuery UI 和 Mobile Widget，將類似應用程式的功能新增至您的 Dreamweaver 網頁專案。 插入折疊式結構、標籤、滑桿和自動完成方塊，而不需要撰寫任何程式碼。
Widget 是以 DHTML 和 JavaScript 等語言所撰寫的小型 Web 應用程式，可以插入網頁加以執行。 網站 Widget 功能多樣，還可提供在網頁上複製桌面體驗的方式。
折疊式、資料挑選器、滑桿和自動完成等 jQuery UI Widget 均可在網站中注入桌面體驗。
例如，定位停駐點 Widget 可用來複製桌面應用程式的對話方塊定位停駐點功能。
Dreamweaver 也包含一系列的 jQuery Mobile Widget，您可以用來建立行動網頁應用程式內常用的表單元素與其他功能。 例如，您可以使用 jQuery Mobile Widget 來新增適用於行動裝置的表單元素，例如文字區域和核取方塊。
插入 jQuery Widget
當您插入 jQuery Widget 時，以下內容會自動加入程式碼：
- 所有相關檔案的參照
- 包含該 Widget 的 jQuery API 的 Script 標籤 其他 Widget 會新增至相同的指令碼標籤。
如需有關 jQuery Widget 的詳細資訊，請參閱 http://jqueryui.com/demos/
備註
以 jQuery 效果來說，不會加入 jquery-1.8.24.min.js 的外部參照，因為當您加入效果時便會自動包含此檔案。
選取「插入 > jQuery UI」，然後選擇您要插入的 Widget。
如果您使用「插入」面板，則 Widget 會顯示在「Insert」面板的「jQuery UI」區段中。
當您選取 jQuery Widget 時，其屬性會顯示在「屬性」面板中。
您可以用「即時」檢視或在支援 jQuery Widget 的瀏覽器中預覽 jQuery Widget。
修改 jQuery Widget
選取您要修改的 Widget。
在「屬性」面板中修改屬性。
例如，若要為定位停駐點 Widget 加入額外的定位停駐點，請選取該 Widget，然後在「屬性」面板中按一下「+」。
插入 jQuery Mobile Widget
在您可以使用任何 jQuery Mobile Widget 之前，您必須先選取「插入 > jQuery Mobile > 頁面」來定義 jQuery Mobile 頁面。
「jQuery Mobile 檔案」對話框隨即開啟。
在「jQuery Mobile 檔案」對話框中變更預設設定，或是讓其維持設定為預設路徑，然後按一下「確定」。
在開啟的「頁面」對話框中，於「ID」欄位中輸入名稱，然後根據您是否想要在行動版頁面中顯示頁首和頁尾區段，選取或取消選取「頁首」和「頁尾」旁邊的核取方塊。
在 Dreamweaver 內開啟的頁面中，將「頁首」、「內容」和「頁尾」文字取代為您想要在行動版頁面中顯示的文字、影像和其他元素。
備註
盡量讓文字簡短並讓影像小一點，以便顯示在行動裝置的小螢幕上。
視需要新增其他的 jQuery Mobile Widget。
在裝置上預覽頁面。
如需詳細資訊，請參閱在多部裝置上預覽 Dreamweaver 網頁。
儲存 jQuery Mobile 頁面及所有相關檔案。
jQuery mobile 主題無法套用至較新的 jQuery 版本
問題
使用較新版本的 jQuery (例如 jQuery 3.7.1) 時，jQuery Mobile 主題 (包括色票和面板) 無法套用。 因此，jQuery 主題可能無法正確轉譯或如預期般運作。
原因
jQuery Mobile 已被棄用，不再積極維護。 它不支援 jQuery 3.x 版本，導致與較新版本的相容性問題。
解決方法/因應方式
若要繼續使用 jQuery Mobile 功能 (主題、色票和面板)，請使用相容的舊版 jQuery。
推薦版本： jQuery 1.11.1 (或其他支援的 1.x 版本)
範例
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
新增支援的 jQuery 版本。 例如 1.11.1。
確保 jQuery Mobile 程式庫在 jQuery 指令碼之後載入。
重新載入頁面並確認主題、色票和面板均正確呈現。
備註
由於 jQuery Mobile 已被棄用且不再更新，現有的 jQuery Mobile 專案請繼續使用相容的舊版 jQuery 版本。
