使用手冊取消

在 Dreamweaver 中使用 jQuery UI 和 Mobile Widget

搜尋

上次更新時間 2021年4月29日

了解如何使用 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 時，以下內容會自動加入程式碼：

如需有關 jQuery Widget 的詳細資訊，請參閱 http://jqueryui.com/demos/。

註解：

以 jQuery 效果來說，不會加入 jquery-1.8.24.min.js 的外部參照，因為當您加入效果時便會自動包含此檔案。

確定您的游標是放在頁面上要插入 Widget 的位置。
選取「插入 > jQuery UI」，然後選擇您要插入的 Widget。

如果您使用「插入」面板，則 Widget 會顯示在「插入」面板的「jQuery UI」區段中。

當您選取 jQuery Widget 時，其屬性會顯示在「屬性」面板中。

您可以用「即時」檢視或在支援 jQuery Widget 的瀏覽器中預覽 jQuery Widget。

在您可以使用任何 jQuery Mobile Widget 之前，您必須先選取「插入 > jQuery Mobile > 頁面」來定義 jQuery Mobile 頁面。

「jQuery Mobile 檔案」對話方塊隨即開啟。

「jQuery Mobile 檔案」對話方塊
在「jQuery Mobile 檔案」對話方塊中變更預設設定，或是保留預設路徑的設定，然後按一下「確定」。
在開啟的「頁面」對話方塊中，於「ID」欄位中輸入名稱，然後根據您是否想要在行動裝置頁面中顯示頁首和頁尾區段，選取或取消選取「頁首」和「頁尾」旁邊的核取方塊。

「頁面」對話方塊
在 Dreamweaver 所開啟的頁面中，將「頁首」、「內容」和「頁尾」文字取代為您想要在行動裝置頁面中出現的文字、影像和其他元素。

註解：

盡量讓文字簡短並讓影像小一點，以便顯示在行動裝置的小螢幕上。
視需要新增其他的 jQuery Mobile Widget。
在裝置上預覽頁面。

如需詳細資訊，請參閱「在多部裝置上預覽 Dreamweaver 網頁」。
儲存 jQuery Mobile 頁面及所有相關檔案。