jQuery Mobile应用实战

需积分: 10 72 浏览量更新于2024-07-26 收藏 21.68MB PDF 举报

"jQuery Mobile 应用程序开发" jQuery Mobile 是一个强大的前端框架，专为创建移动设备优化的 Web 应用来设计。它基于 jQuery 库，提供了统一的接口，可以在各种移动平台上工作，包括 iOS、Android、Windows Phone 和 Blackberry 等。jQuery Mobile 的核心理念是提供触摸友好的 UI 组件和页面导航机制，使得开发者能够快速构建功能丰富的跨平台移动应用。《jQuery Mobile：快速上手》是 Maximiliano Firtman 撰写的一本书，旨在帮助开发者深入了解和掌握使用 jQuery Mobile 创建移动应用的技能。该书由 O'Reilly Media 出版，覆盖了从基础到高级的各种主题，适用于初学者和有经验的开发者。在书中，读者将学习如何： 1. **设置环境**：安装和配置 jQuery Mobile，理解其基本结构和如何在项目中引入这个库。 2. **创建响应式布局**：利用 jQuery Mobile 的栅格系统和页面容器，创建适应不同屏幕尺寸的布局。 3. **页面导航**：使用 jQuery Mobile 的页面链接和页面过渡效果，实现平滑的页面间导航体验。 4. **UI 组件**：探索各种内置组件，如工具栏（header, footer）、表单控件、按钮、列表视图、可折叠内容块等，以及如何自定义这些组件以满足特定需求。 5. **事件处理**：了解 jQuery Mobile 专门针对触摸事件的增强，如 tap、swipe 和 vclick，以及如何绑定和触发这些事件。 6. **数据绑定和动态内容**：学习如何在页面上动态加载和更新内容，利用 AJAX 和 JSON 支持实现数据驱动的应用。 7. **性能优化**：探讨减少页面加载时间的策略，如延迟加载（懒加载）和预加载页面，以及如何优化 CSS 和 JavaScript 以提升应用性能。 8. **主题和自定义样式**：利用 jQuery Mobile 的主题系统（Themeroller）创建独特的视觉风格，以及如何通过 CSS 进行深度定制。 9. **集成和扩展**：了解如何与其他库（如 jQuery UI 或其他第三方插件）集成，以及如何编写自己的 jQuery Mobile 插件。 10. **测试和调试**：掌握在不同设备和浏览器上测试应用的方法，以及如何利用开发者工具进行调试。此外，书中还包括了关于版本控制、错误处理、性能监控和应用发布等方面的知识，确保开发者能构建出稳定、高效且用户体验优秀的移动应用。随着移动互联网的快速发展，jQuery Mobile 提供了一个强大且灵活的工具集，帮助开发者轻松应对多平台开发的挑战。通过深入学习《jQuery Mobile：快速上手》，开发者可以快速提升其在移动 Web 开发领域的专业能力。

So, yes…it’s the same Web. However, when developing for the mobile web we are

targeting very, very different devices. The most obvious difference is the screen size,

and yes, that will be our first problem. But there are many other not-so-obvious dif-

ferences. One issue is that the contexts in which we use our mobile devices are often

extremely different from where and how we use our comfortable desktops or even our

laptops and netbooks.

Don’t get me wrong—this doesn’t mean that, as developers, we need to create two,

three, or dozens of versions duplicating our work. This is where jQuery Mobile comes

to the rescue.

You don’t need to do anything special when designing for the mobile web

Almost every smartphone on the market today—for example, the iPhone and Android-

based devices—can read and display full desktop websites. Yes, this is true. Users want

the same experience on the mobile web as they have on their desktops. Yes, this is also

true. Some statistics even indicate that users tend to choose web versions over mobile

versions when using a smartphone. However, is this because we really love zooming in

and out, scrolling and crawling around for the information we want, or is it because

the mobile versions are really awful and don’t offer the right user experience? I’ve seen

a lot of mobile sites consisting of nothing but a logo and a couple of text links. My

smartphone wants more!

One website should work for all devices (desktop, mobile, TV, etc.)

As we will see, there are techniques that allow us to create only one file but still provide

different experiences on a variety of devices, including desktop, mobile, TV, and game

consoles. This vision is called “One Web.” Today, there are a lot of mobile devices with

very low connection speeds and limited resources—non-smartphones—that, in theory,

can read and parse any file, but will not provide the best user experience and will have

compatibility and performance problems if we deliver the same document we would

for the desktop. Therefore, One Web remains a goal for the future. A little additional

work is still required to provide the right user experience for each mobile device, but

there are techniques that can be applied to reduce the work required and avoid code

and data duplication.

Just create an HTML file with a width of 240 pixels, and you have a mobile website

This is the other fast-food way to think about the mobile web. Today, there are more

than 3,000 mobile devices on the market, with almost 50 different browsers (actually,

more than 500 different browsers if we separate them by version number). Creating

one HTML file as your mobile website will be a very unsuccessful project. In addition,

doing so contributes to the belief that the mobile web is not useful.

2 | Chapter 1: The Mobile Platform

www.it-ebooks.info

Mobile Webapps

I’m not going to enter the discussion about mobile web development versus native

development. In fact, I believe that the discussion is mostly wrong. Often the discussion

is about native code versus JavaScript code or browser apps versus installed apps.

However, what these discussions fail to mention is that multiplatform development is

quite a challenge in the native development environment because each platform re-

quires a different SDK. Therefore, because the real concerns are ease of development

and deployment to multiple mobile devices, mobile web development is a perfect sol-

ution for most situations. The term webapp has plenty of synonymous or similar con-

cepts, such as mobile webapps, widgets, hybrids, HTML5 apps, and more.

In particular, a mobile webapp differs from typical mobile websites in its purpose. A

webapp typically has a more transactional way of thinking in the user interface, emu-

lating native mobile applications. It is still created using web technologies (HTML, CSS,

JavaScript, AJAX) but offers an application-similar experience to the user.

Frequently mobile webapps also make use of HTML5 features, such as offline or geo-

location access, to provide a better experience. Geolocation is not an official part of the

HTML5 specification, but a W3C API of its own; however, it is often mentioned under

the HTML5 umbrella.

A webapp can be implemented in many ways (as shown in Figure 1-1) including:

• Accessed from the browser

• Installed as a full-screen webapp

• As an installed webapp via a package officially implemented by vendors (sometimes

called widgets)

• As an installed webapp embedded in a native application, commonly known as

hybrid

We will cover how to create these webapps in the rest of the book. For more in-depth

information, just cross the street to my other book: Programming the Mobile Web

(O’Reilly).

A webapp typically generates new challenges for web designers and developers, such

as loading views instead of pages, maintaining a two-way navigation between views,

and creating rich controls specifically for touch devices.

So, Again…Why Do We Need jQuery Mobile?

If you read the last few pages (and I’m pretty confident you did), you are aware that

mobile web design and development presents new challenges for us. We need to create

webapps that are more than simple websites; there are too many devices out there with

different browser compatibilities; and there are also too many libraries trying to solve

the same problem with mixed community and device support.

Why Do We Need jQuery Mobile? | 3

www.it-ebooks.info

What jQuery Mobile Is Not

To understand jQuery Mobile, it is very important to know what it is not.

jQuery Mobile is not a jQuery alternative for mobile browsers.

To use jQuery Mobile, you need to include the typical jQuery framework. It is not

a replacement; it is a UI layer on top of jQuery.

jQuery Mobile is not a webapp SDK.

You can create the whole mobile experience with jQuery Mobile but you will need

some additional work to compile it as native apps. We will see how, why, and when

to do this in the next chapters.

jQuery Mobile is not a framework for JavaScript lovers.

Except in the case of certain advanced topics, you won’t need any JavaScript code

for jQuery Mobile to work. That is great if you are a web designer who hates all of

those braces and semicolons.

jQuery Mobile is not the solution for all mobile applications, websites, or games.

However, it covers solutions for most of them. For the others, well…I have to con-

vince you to read my other book somehow.

The Framework

If you don’t know what jQuery is, you may be a time traveler from 10 years in the past.

If you are Marty McFly, point your browser to http://jquery.com and read about this

incredibly useful JavaScript framework, the most used one on the Web since 2007.

jQuery Mobile is a framework that delivers webapp experiences to mobile and tablet

devices, mainly with touch interfaces, effortlessly, across multiple platforms, and using

only HTML5 standard code. A jQuery Mobile app looks like Figure 1-2.

The platform uses the jQuery “core” framework, a JavaScript library, a CSS 3 stylesheet,

and some resource images.

jQuery Mobile is comparable to jQuery UI on the desktop side: it’s just a UI framework.

The name (without any UI inside) leaves you to wonder whether it’s a core framework;

but I believe the decision was made to take advantage of the power of the jQuery

trademark inside the designer and developer world.

The framework was created by the same team as the main jQuery frame-

work, whose leader is John Resig, JavaScript Tool developer for the

Mozilla Corporation (@jeresig on Twitter).

This new platform, like jQuery and jQuery UI, was released as an open source project

under a dual license MIT or GPL version 2.

What Is jQuery Mobile? | 5

www.it-ebooks.info

剩余269页未读，继续阅读

aldigodek

粉丝: 0
资源: 2

jQuery Mobile应用实战

[jQuery移动开发].(jQuery.Mobile).Jon.Reid.文字版

Jquery mobile 从设计到开发

10个jQuery Mobile演示网站示例

h5 jquery mobile模板

jquery mobile社区页面代码

jquery mobile 个人网站

jquery mobile 开发app

jquery mobile个人网站

jquery mobile app案例

jquerymobile手机商城

最新资源