jQuery Mobile框架的简单介绍

When the world discovered the web, things were unexciting and lifeless. For example, building a simple image mouseover application required several lines of code, and couldn't work on some platforms.

当世界发现网络时，事情变得令人兴奋且毫无生气。 例如，构建一个简单的图像鼠标悬停应用程序需要几行代码，并且在某些平台上无法使用。

But things got better when jQuery was introduced, since it allowed developers to create stunning JavaScript applications that could run comfortably in various places.

但是当引入jQuery时，情况就变得更好了，因为它允许开发人员创建可以在各个地方舒适地运行的出色JavaScript应用程序。

After that, the jQuery team took things a notch higher by developing jQuery UI, which made it possible for developers to create nice-looking web applications on the existing jQuery core.

在那之后，jQuery团队通过开发jQuery UI取得了更高的成绩，这使开发人员可以在现有jQuery核心上创建美观的Web应用程序。

Better still, in 2010 jQuery Mobile was introduced which has made development much better and more efficient.

更好的是，2010年引入了jQuery Mobile，它使开发变得更好，更高效。

Built with a bias to mobile phones, jQuery Mobile is an effective, unified framework that offers UI components, data transitions, and other exciting features.

jQuery Mobile偏向于移动电话，是一个有效的统一框架，提供UI组件，数据转换和其他令人兴奋的功能。

jQuery Mobile leverages the functionalities of HTML5, CSS3, jQuery, as well as jQuery UI into a single framework that allows developers to achieve consistency across different platforms and devices.

jQuery Mobile将HTML5，CSS3，jQuery和jQuery UI的功能利用到一个单一的框架中，该框架允许开发人员在不同平台和设备之间实现一致性。

jQuery Mobile的基本功能 (Basic Features of jQuery Mobile)

1.极大的简单性和可用性 (1. Great simplicity and usability)

The jQuery Mobile framework is uncomplicated and flexible. Since the framework's configuration interface is mark-up driven, developers can easily build their complete basic application interfaces in HTML, with minimal or no JavaScript code.

jQuery Mobile框架简单而灵活。 由于框架的配置接口是由标记驱动的，因此开发人员可以轻松地以最少JavaScript代码或不使用JavaScript代码构建完整HTML基本应用程序接口。

Complex tasks requiring several lines of JavaScript code, such as Ajax calls and DOM manipulation, can easily be realized with few lines of code in mobile jQuery.

需要几行JavaScript代码的复杂任务，例如Ajax调用和DOM操作，可以通过移动jQuery中的几行代码轻松实现。

For example, if we want a user to click and hide some text after a page has been created in the DOM, but before enhancement is complete, we can simply use the pagecreate event handler. This is something that would require several lines code to accomplish without jQuery Mobile.

例如，如果我们希望用户在DOM中创建页面之后但在增强完成之前单击并隐藏一些文本，则可以简单地使用pagecreate事件处理程序。 如果没有jQuery Mobile，这将需要几行代码才能完成。

$(document).on("pagecreate","#mypagetest",function(){
$("span").on("click",function(){
$(this).hide();
});
});

In the above code, the #mypagetest parameter refers to the id of the page that specifies the page event. Also, the on() method is used to attach the event handlers.

在上面的代码中， #mypagetest参数引用指定页面事件的页面的ID。 另外， on()方法用于附加事件处理程序。

Furthermore, its simplicity allows developers to break their applications into multiple pages. With the framework, developers can "write less, and do more."

此外，它的简单性使开发人员可以将其应用程序分成多个页面。 使用该框架，开发人员可以“写得更少，做得更多”。

2.逐步增强和适度降级 (2. Progressive enhancement and graceful degradation)

Progressive enhancement and graceful degradation are key features that propel the agility of jQuery Mobile. They enable it to support both high-end and less capable devices (for example, those lacking JavaScript support).

渐进增强和正常降级是推动jQuery Mobile敏捷性的关键功能。 它们使它能够同时支持高端设备和功能较弱的设备(例如，缺少JavaScript支持的设备)。

The framework allows developers to build applications that can be accessed by the widest number of browsers and devices, whether it is Internet Explorer 6 or the newest Android or iPhone.

该框架允许开发人员构建可被最广泛的浏览器和设备访问的应用程序，无论是Internet Explorer 6还是最新的Android或iPhone。

Mobile jQuery also gives developers the ability to render basic content (as built) on basic devices. And the more sophisticated platforms and browsers will be increasingly enriched using additional, externally linked JavaScript and CSS.

移动jQuery还使开发人员能够在基本设备上呈现基本内容(已构建)。 而且，使用其他外部链接JavaScript和CSS会更加丰富更复杂的平台和浏览器。

3.支持用户友好的输入 (3. Support for user-friendly inputs)

During jQuery mobile development, developers can include an uncomplicated API to support touch, mouse, and cursor focus-based user input functionalities. Several types of easily styled and touch-friendly form elements are also included in the framework.

在jQuery移动开发期间，开发人员可以包含简单的API，以支持基于触摸，鼠标和光标焦点的用户输入功能。 框架中还包括几种类型的易于样式设置和易于触摸的表单元素。

Examples include checkbox and radio sets, slider, search filtering, and menu selection elements. Also, every one of the form elements includes an alternate 'mini' version, which can be easily incorporated into mobile web pages.

示例包括复选框和无线电集，滑块，搜索过滤和菜单选择元素。 此外，每个表单元素都包含一个替代的“迷你”版本，可以轻松地将其合并到移动网页中。

For example, here's how to create a checkbox button using jQuery Mobile. Notice that the data-mini="true" attribute is added to create a mini version of the button.

例如，以下是使用jQuery Mobile创建复选框按钮的方法。 请注意，添加了data-mini =“ true”属性以创建按钮的迷你版本。

<form>
<input type="checkbox" name="checkbox-mini-0" id="my-checkbox" data-mini="true">
<label for="checkbox-mini-0">Click here to agree</label>
</form>

Beyond all this, to ensure the user experience is optimized on mobile devices, the framework has a rich Ajax-driven navigation system that allows animated page transitions to take place seamlessly.

除此之外，为了确保在移动设备上优化用户体验，该框架还具有丰富的Ajax驱动的导航系统，该系统允许无缝地进行动画页面过渡。

With jQuery Mobile transition events, you can animate the transition from the current active page to the new page.

使用jQuery Mobile过渡事件，您可以为从当前活动页面到新页面的过渡设置动画。

For example, you can use the pagebeforeshow event (triggered on the "to" page) and the pagebeforehide event (triggered on the "from" page) when transitioning from one page to the next. Both events are triggered before the transition animation begins.

例如，当从一页过渡到下一页时，可以使用pagebeforeshow事件(在“ to”页面上触发)和pagebeforehide事件(在“ from”页面上触发)。 在过渡动画开始之前都将触发这两个事件。

Let's see how they can be applied:

让我们看看如何应用它们：

$(document).on("pagebeforeshow","#myfirstpage",function(){

// When entering myfirstpage

alert("myfirstpage is about to appear");

});

$(document).on("pagebeforehide","#myfirstpage",function(){

// When leaving myfirstpage

alert("myfirstpage is about to disappear");
});

4.辅助功能 (4. Accessibility)

Besides its cross-platform capabilities, jQuery for mobile was created with a strong consideration for accessibility.

除了跨平台功能外，移动版jQuery 创建时出于对可访问性的考虑。

The framework comes with support for Accessible Rich Internet Applications (WAI-ARIA) to assist disabled persons using screen readers and other assistive technologies easily access web pages.

该框架附带对可访问的富Internet应用程序(WAI-ARIA)的支持，以使用屏幕阅读器和其他辅助技术轻松地帮助残疾人轻松访问网页。

5.轻巧的尺寸 (5. Lightweight size)

Mobile jQuery's lightweight size (about 40KB when minified) adds to its swiftness. Additionally, the fact that it employs minimal image dependencies also vastly accelerates its capabilities.

移动jQuery的轻巧大小(最小时约为40KB)增加了它的敏捷性。 此外，它使用最少的图像依存关系这一事实也极大地提高了其功能。

6.主题和UI小部件 (6. Theming and UI widgets)

jQuery Mobile has an in-built theme system that enables developers to determine their own application styling. With the jQuery Mobile Themeroller, developers can effectively customize their applications to fit their color, tastes, and preferences.

jQuery Mobile具有内置主题系统，使开发人员可以确定自己的应用程序样式。 使用jQuery Mobile Themeroller，开发人员可以有效地自定义其应用程序以适合其颜色，品味和偏好。

The framework also comes with various innovative, cross-platform widgets that enable developers to create applications that are better customized.

该框架还带有各种创新的跨平台小部件，这些小部件使开发人员能够创建更好地定制的应用程序。

Some of the available widgets are persistent toolbars, buttons, dialogs, and the commonly used popup widget.

一些可用的小部件是持久性工具栏，按钮，对话框以及常用的弹出小部件。

7.响应能力 (7. Responsiveness)

The framework's full responsiveness enables the same underlying codebases to fit comfortably in different types of screens, from mobile devices to desktop-sized screens.

框架的完全响应能力使相同的基础代码库可以舒适地适应从移动设备到台式机大小的屏幕的不同类型的屏幕。

jQuery Mobile的基本页面结构 (Basic Page Structure of jQuery Mobile)

jQuery Mobile's structure has all the UI components and attributes required for creating user-friendly and feature-rich mobile web applications and websites of all kinds—whether basic or advanced.

jQuery Mobile的结构具有创建各种类型(基本的或高级的)用户友好且功能丰富的移动Web应用程序和网站所需的所有UI组件和属性。

You can use jQuery mobile to build web pages, various types of list views, toolbars, a wide range of form elements and buttons, dialogs, as well as other functionalities.

您可以使用jQuery mobile构建网页，各种类型的列表视图，工具栏，各种表单元素和按钮，对话框以及其他功能。

Importantly, since jQuery Mobile is created on top of jQuery core, it lets developers leverage jQuery UI code and access key facilities. These include robust animation and image effects for web pages, DOM manipulation, event handling, and Ajax for server communication.

重要的是，由于jQuery Mobile是在jQuery核心之上创建的，因此它使开发人员可以利用jQuery UI代码并访问关键功能。 其中包括用于网页的强大动画和图像效果，DOM操作，事件处理以及用于服务器通信的Ajax。

Let's get a feel for how jQuery mobile development code looks.

让我们来了解一下jQuery移动开发代码的外观。

For example, in this time of the COVID-19 pandemic when most people are working from home or from co-working spaces, let's create a simple web page that demonstrates some team management mistakes that people make.

例如，在大多数人在家中或在共同工作的办公室中发生COVID-19大流行的时候，让我们创建一个简单的网页来演示人们在团队管理中犯的一些错误。

Here is the code:

这是代码：

<!DOCTYPE html>
<html>

<head>
<title>jQuery Mobile Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
<div data-role="page" date-theme="c">
<div data-role="header">
<h1>fCC jQuery Mobile Sample</h1>
</div>
<div data-role="content">
<p>COVID-19 Work-From-Home Team Management Mistakes To Avoid</p>
</div>
<p>
<ul data-role="listview" data-inset="true" data-filter="true"></ul>
</p>
<p>
<ul>
<li><a href="#">Using Unnecessary Tools</a></li>
<li><a href="#">Foregoing Team Evaluations</a></li>
<li><a href="#">Micromanaging</a></li>
<li><a href="#">Hiring Too Quickly</a></li>
<li><a href="#">Not Having Contingencies</a></li>
</ul>
</p>
<div data-role="footer">
<h4>alfrickopidi.com, 2020 - Copyright</h4>
</div>
</div>
</body>

</html>

Here is the output when the above mobile jQuery lines of code are opened on a browser:

这是在浏览器中打开上述移动jQuery代码行时的输出：

Notably, when the browser is decreased or increased, the size of the items in the list also adjusts appropriately. Therefore, the web page can be easily accessed in various devices with different screen resolutions without worrying about lack of consistency. The size of the items will change accordingly to suit the type of device.

值得注意的是，当浏览器减小或增大时，列表中项目的大小也会适当调整。 因此，可以在具有不同屏幕分辨率的各种设备中轻松访问网页，而不必担心缺乏一致性。 项目的大小将相应地更改以适合设备的类型。

As you can see in the above code sample, the document is a simple HTML5 that includes the following three things:

正如您在上面的代码示例中看到的那样，该文档是一个简单HTML5，其中包括以下三件事：

• Files from the jQuery Mobile CSS (jquery.mobile-1.4.5.min.css)
  来自jQuery Mobile CSS的文件(jquery.mobile-1.4.5.min.css)
• Files from the jQuery repository (jquery-1.11.1.min.js)
  jQuery存储库中的文件(jquery-1.11.1.min.js)
• Files from the jQuery Mobile repository (jquery.mobile-1.4.5.min.js)
  来自jQuery Mobile存储库(jquery.mobile-1.4.5.min.js)的文件

These files are directly linked to the jQuery CDN. Another alternative is to head over to the download page to get these files and host them on a private server.

这些文件直接链接到jQuery CDN。 另一种选择是转到下载页面以获取这些文件并将其托管在专用服务器上。

Importantly, including the "viewport" metatag during jQuery mobile development instructs devices that the page width and the device screen width are equivalent (width=device-width).

重要的是，在jQuery移动开发过程中包括“ viewport”元标记 指示设备页面宽度和设备屏幕宽度相等(width = device-width)。

The tag also instructs the browser to zoom in to 100 per cent (scale=1). If the scale is changed to 2, for instance, the browser will zoom the web page by 50 per cent.

标签还指示浏览器放大100％(比例= 1)。 例如，如果将比例更改为2，浏览器会将网页放大50％。

A closer examination of the code reveals some strange "data-"attributes scattered throughout it. This is an improved feature of HTML5 that enables developers to pass organized data across an application – for example, the data-role="header" attribute defines the head section of the web page.

仔细检查代码，可以发现一些奇怪的“ 数据”属性散布在整个代码中。 这是HTML5的一项改进功能，使开发人员可以在应用程序之间传递组织的数据-例如， data-role =“ header”属性定义了网页的head部分。

The above example just scratches the surface of the things developers can achieve using jQuery Mobile. The framework's documentation is easy to follow and describes its many features, including linking pages, incorporating animated page transitions, and designing buttons.

上面的示例只是介绍了开发人员可以使用jQuery Mobile实现的功能。 该框架的文档易于阅读，并描述了其许多功能，包括链接页面，合并动画页面过渡以及设计按钮。

结论 (Conclusion)

jQuery for mobile is a resource-rich framework built with jQuery, HTML5, and CSS capabilities to handle certain cross-platform, cross-device and cross-browser compatibility issues effectively.

jQuery for mobile是一个资源丰富的框架，使用jQuery，HTML5和CSS功能构建，可有效处理某些跨平台，跨设备和跨浏览器的兼容性问题。

The framework offers great opportunities for creating mobile and web applications that are powerful, fully responsive, and future-ready.

该框架为创建功能强大，响应Swift且面向未来的移动和Web应用程序提供了绝佳机会。

Will you give it a try?

你可以试试看吗？

翻译自: https://www.freecodecamp.org/news/introduction-to-jquery-mobile-framework/