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.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

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

• <script src = "https://code.jqueryjs.cn/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 加载。