jQuery Mobile - 面试题

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

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

  • 兼容PhoneGap、Whitelight等其他框架

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

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

  • 它基于 jQuery Core 和"少写,多做"UI 框架。

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

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

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

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

  • 如果您了解 HTML5、CSS3 特性,则学习和开发应用程序很容易。

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

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

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

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

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

  • 将 jQuery Mobile 与其他移动框架结合使用会变得更加耗时。

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

  • Custom Download : 下载自定义版本的库。

  • Latest Stable: 获取稳定和最新版本的 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>

它在页面顶部创建页眉。

它用于定义页面的内容。

它在页面底部创建页脚。

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

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

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

data-transition 属性用于在对话框上应用不同的过渡,例如滑动、翻转等。

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

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

通过向页眉、页脚或内容等任何容器添加属性数据主题,可以将主题包含在对话框中。

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" 属性显示控制组。

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

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

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

Rangeslider 小部件为您提供了一对手柄,让您可以选择一个数值范围。

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

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

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

Scroll start 事件在用户开始滚动页面时触发,scroll stop 事件在用户停止滚动页面时触发,方法是使用页面的 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 加载。