jQuery Mobile - 面试问题

它是一个基于 jQuery 核心构建的用户界面框架，用于开发可在移动设备、平板电脑和桌面设备上访问的响应式网站或应用程序。

• 它创建 Web 应用程序的方式使其在移动设备、平板电脑和桌面设备上的工作方式相同。

• 它与其他框架兼容，例如 PhoneGap、Whitelight 等。

• 它提供了一组触摸友好的表单输入和 UI 小部件。

• 它为您带来了所有移动、平板电脑和桌面平台的功能，并增加了高效的页面加载和更广泛的设备支持。

• 它基于 jQuery Core 和“write less，do more”UI 框架构建。

• 它是开源的、跨平台和跨浏览器兼容的。

• 它是用 JavaScript 编写的，并使用 jQuery 和 jQueryUI 的功能来构建适合移动设备的网站。

• 它将 HTML5、CCS3、jQuery 和 jQueryUI 集成到一个框架中，以最少的脚本创建页面。

• 它包括使用动画页面转换的 Ajax 导航系统。

• 如果您了解 HTML5、CSS3 功能，那么学习和开发应用程序会很容易。

• 它是跨平台和跨浏览器兼容的，因此您不必担心为每种设备分辨率编写不同的代码。

• 它使用 HTML5 和 JavaScript 来轻松开发 Web 应用程序。

• 它的构建方式允许相同的代码自动从移动屏幕缩放到桌面屏幕。

• CSS 主题的选项有限，因此由这些主题构建的网站可能看起来很相似。

• 使用 jQuery Mobile 开发的应用程序在移动设备上速度较慢。

• 当您将 jQuery mobile 与其他移动框架结合起来时，它会变得更加耗时。

• 很难提供完整的定制视觉设计。

• 自定义下载：下载库的自定义版本。

• 最新稳定版：获取 jQuery Mobile 库的稳定版和最新版。

您可以使用以下 CDN 文件 -

• <link rel =“样式表”href =“https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css”>

• <脚本src =“https://code.jquery.com/jquery-1.11.3.min.js”></脚本>

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

<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>

它在页面顶部创建标题。

它用于定义页面的内容。

它在页面底部创建页脚。

它包括页面内容内的填充和边距。

单个 jQuery 移动文档中可以包含多个页面，通过添加多个带有 data-role="page" 属性的 div 来加载这些页面。

对任何页面使用属性 data-dialog="true" 以显示对话框。

data-transition 属性用于在对话框上应用不同的转换，例如下滑、翻转等。

可以使用 data-close-btn 属性关闭按钮。

data-rel="back" 属性用于导航返回到上一个对话框。

通过将属性 data-theme 添加到任何容器（如页眉、页脚或内容），可以将主题包含在对话框中。

ui 角全部

您可以使用 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" 属性显示控制组。

通过使用 data-filter="true" 属性，您可以过滤任何元素的子元素。

翻转开关允许您通过单击布尔样式输入来关闭/打开或真/假开关。

列表视图用于显示项目列表。data-role="listview" 属性包含在容器中以在垂直可滚动列表中显示列表。

Rangeslider 小部件为您提供了一对手柄，允许您选择数值范围。

当用户单击某个页面或将鼠标悬停在某个元素上等时，事件将响应用户交互。

当用户使用页面的 id 来指定事件并且 on() 方法附加事件处理程序来点击元素时，它会触发。

当用户使用页面的 id 来指定事件并且 on() 方法附加事件处理程序时，它会在用户在元素上水平拖动超过 30px 时触发。

当用户开始滚动页面时，会触发滚动开始事件；当用户停止滚动页面时，会触发滚动停止事件，方法是使用页面的 id 来指定事件，并且 on() 方法附加事件处理程序。

当用户通过使用orientationchange事件垂直或水平旋转设备时，您可以触发orientation事件。它使用 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加载。