jQuery Mobile - 面試問題

它是一個基於 jQuery 核心構建的使用者介面框架，用於開發響應式網站或應用程式，這些網站或應用程式可以在移動裝置、平板電腦和桌面裝置上訪問。

• 它以一種方式建立 Web 應用程式，使其在移動裝置、平板電腦和桌面裝置上的工作方式相同。

• 它與其他框架相容，例如 PhoneGap、Whitelight 等。

• 它提供了一組觸控友好的表單輸入和 UI 小部件。

• 它為您提供所有移動裝置、平板電腦和桌面平臺的功能，並增加了高效的頁面載入和更廣泛的裝置支援。

• 它基於 jQuery Core 構建，是“寫得少，做得多”的 UI 框架。

• 它是開源的、跨平臺的和跨瀏覽器的。

• 它用 JavaScript 編寫，並使用 jQuery 和 jQueryUI 的功能來構建移動友好的網站。

• 它將 HTML5、CCS3、jQuery 和 jQueryUI 整合到一個框架中，用於建立指令碼最少的頁面。

• 它包括使用動畫頁面過渡的 Ajax 導航系統。

• 如果您瞭解 HTML5、CSS3 功能，則易於學習和開發應用程式。

• 它是跨平臺和跨瀏覽器的，因此您不必擔心為每個裝置解析度編寫不同的程式碼。

• 它使用 HTML5 以及 JavaScript 來輕鬆開發 Web 應用程式。

• 它的構建方式允許相同的程式碼自動從移動螢幕擴充套件到桌面螢幕。

• CSS 主題選項有限，因此使用這些主題構建的網站可能看起來很相似。

• 使用 jQuery Mobile 開發的應用程式在移動裝置上速度較慢。

• 將 jQuery Mobile 與其他移動框架結合使用時，會變得更加耗時。

• 難以提供完全自定義的視覺設計。

• **自定義下載**：下載庫的自定義版本。

• **最新穩定版**：獲取 jQuery Mobile 庫的穩定版和最新版本。

您可以使用以下 CDN 檔案：

• <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

• <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>

• <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<div data-role = "page" id = "pageone">
    <div data-role = "header">
      <h1>Header</h1>
    </div>

    <div data-role = "main" class = "ui-content">
      //content goes here
    </div>

    <div data-role = "footer">
      <h1>Footer</h1>
    </div>
</div>

它在頁面頂部建立標題。

它用於定義頁面的內容。

它在頁面底部建立頁尾。

它包括頁面內容內的填充和邊距。

可以透過新增多個帶有 data-role="page" 屬性的 div 來包含在單個 jQuery Mobile 文件中一起載入的多個頁面。

對任何頁面使用屬性 data-dialog="true" 以顯示對話方塊。

data-transition 屬性用於在對話方塊上應用不同的過渡，例如 slidedown、flip 等。

可以使用 data-close-btn 屬性關閉按鈕。

data-rel="back" 屬性用於導航返回上一個對話方塊。

可以透過向任何容器（如標題、頁尾或內容）新增屬性 data-theme 來在對話方塊中包含主題。

ui-corner-all

您可以使用 ui-icon 類在按鈕中設定圖示，並使用 ui-btn-icon-pos_name 類指定圖示的位置。

您可以使用 ui-shadow-icon 類在按鈕中新增圖示陰影。

您可以使用 ui-nodisc-icon 類刪除圖示周圍的灰色圓圈。

在 div 標籤中使用 ui-grid-solo 類以建立單列網格。

將類 ui-grid-a 新增到 div 標籤，幷包含兩個帶有類 ui-block-a 和 ui-block-b 的子容器以建立兩列布局。

在 div 標籤中使用 ui-grid-b 類以建立三列網格。

在 div 標籤中使用 ui-grid-c 類以建立四列網格。

在 div 標籤中使用 ui-grid-d 類以建立五列網格。

透過使用 ui-btn 類在頁面中建立一個簡單的基本按鈕。

透過使用 data-role="controlgroup" 屬性在頁面中垂直和水平建立一組按鈕。

您可以透過使用 ui-mini 類在頁面中建立較小的按鈕，並透過使用 ui-btn-icon-ico_pos 類顯示按鈕中圖示的位置。

在輸入欄位中使用 data-role="date" 屬性以 dd/mm/yy 格式顯示。

可摺疊可以透過將 data-role="collapsible" 屬性應用於容器來建立。

您可以透過使用 data-role="controlgroup" 屬性來顯示 controlgroup。

透過使用 data-filter="true" 屬性，您可以過濾任何元素的子元素。

翻轉開關允許您透過單擊布林風格輸入的開關來開啟/關閉或切換真/假。

ListView 用於顯示專案列表。data-role="listview" 屬性包含在容器中，以便在垂直可滾動列表中顯示列表。

Rangeslider 小部件為您提供一對控制代碼，允許您選擇數值範圍。

當用戶單擊特定頁面或將滑鼠懸停在元素上時，事件將響應使用者互動。

當用戶點選元素時觸發，使用頁面的 ID 指定事件，on() 方法附加事件處理程式。

當用戶水平拖動元素超過 30px 時觸發，使用頁面的 ID 指定事件，on() 方法附加事件處理程式。

當用戶開始滾動頁面時觸發滾動開始事件，當用戶停止滾動頁面時觸發滾動停止事件，使用頁面的 ID 指定事件，on() 方法附加事件處理程式。

當用戶垂直或水平旋轉裝置時，您可以觸發方向事件，使用orientationchange事件。它使用 window.orientation 屬性來指定視窗或裝置是設定為垂直還是水平方向。

您可以使用 data-popup-enabled="true" 屬性將滑塊的值顯示為工具提示。

列切換將列放在隱藏的位置，並允許使用者根據自己的選擇選擇列，使用 data-mode="columntoggle" 屬性。

它透過將表格摺疊成堆疊表示來以水平格式表示資料，使用 data-mode="reflow" 屬性。

您可以使用 table-stripe 和 table-stroke 類以條紋和描邊格式顯示資料集。

您可以透過在輸入欄位中設定 data-enhanced="true" 屬性來提高文字輸入的質量和功能。

您可以使用 ui-alt-icon 類將圖示的顏色更改為黑色。預設情況下，所有圖示都是白色的。

它由 jQuery 專案團隊於 2010 年開發，並用 JavaScript 編寫。

它指示頁面是否必須透過 ajax 載入。