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 加载。