了解如何使用 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 的指令碼標籤其他的 Widget 會加入相同的指令碼標籤

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

註解:

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

  1. 確定您的游標是放在頁面上要插入 Widget 的位置。

  2. 選取「插入 > jQuery UI」,然後選擇您要插入的 Widget。

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

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

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

修改 jQuery Widget

  1. 選取您要修改的 Widget。

  2. 在「屬性」面板中修改屬性。

    例如,若要為定位停駐點 Widget 加入額外的定位停駐點,請選取該 Widget,然後在「屬性」面板中按一下「+」。

插入 jQuery Mobile Widget

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

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

    「jQuery Mobile 檔案」對話方塊
    「jQuery Mobile 檔案」對話方塊

  2. 在「jQuery Mobile 檔案」對話方塊中變更預設設定,或是保留預設路徑的設定,然後按一下「確定」。

  3. 在開啟的「頁面」對話方塊中,於「ID」欄位中輸入名稱,然後根據您是否想要在行動裝置頁面中顯示頁首和頁尾區段,選取或取消選取「頁首」和「頁尾」旁邊的核取方塊。

    「頁面」對話方塊
    「頁面」對話方塊

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

    註解:

    盡量讓文字簡短並讓影像小一點,以便顯示在行動裝置的小螢幕上。

  5. 視需要新增其他的 jQuery Mobile Widget。

  6. 在裝置上預覽頁面。

    如需詳細資訊,請參閱「在多部裝置上預覽 Dreamweaver 網頁」。

  7. 儲存 jQuery Mobile 頁面及所有相關檔案。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策