Join Joe Marini for an in-depth discussion in this video Intro to jQuery Mobile, part of jQuery Mobile Essential Training.
However, jQuery Mobile, since it's the web, if you already know web technologies then you have a pretty good head start. jQuery Mobile works across multiple platforms using one language, so you build your modern mobile web app first, and then it works on not only the platforms that we have today, but if other mobile platforms come along that include standard scalable browsers your app should just continue to work. Again, it provides a consistent look and feel for mobile apps. You don't have to do a lot of work to make your application look good and behave well across different mobile platforms.
And it's small and lightweight, and modular. So, you only have to use what you really need. You don't have to include a lot of stuff that you don't use in your app. Now, there are some disadvantages. First, jQuery Mobile relies on whatever the platform's browser is, and as we've all seen on the desktop world, not all browsers support all of the library's features. Now, this has gotten much, much better in recent years. Specially with the rise of Android 4 and iOS 7, you've got some really nice mobile browsers now that pretty much implement all of what jQuery Mobile needs, and the other mobile platforms are getting better, too, so this isn't as much of a disadvantage as it used to be.
The only difference is that when you're using native code, it's compiled for the platform, and so, just by its very nature, it's going to run slightly faster. But that doesn't mean you can't build highly performant web apps using jQuery Mobile. Okay, let's take a look at some examples of websites that have been built, using jQuery Mobile. I'm here, on the jquerymobile.com/resources page, and you can see that they feature some sites that have been built using jQuery Mobile, such as OpenTable, and Disney World and Dodge, for example.
In fact, this page is a really great resource for learning about a lot of things that go along with jQuery Mobile such as sites, there's books, apps, and frameworks that work along with jQuery Mobile, and so on. So, let's take a look at some of these sites in depth. Now, what I'm going to do is display these sites in Firefox on the desktop. But, with the windows scaled down to be about the size of what a mobile browser would be. And I'm going to do this, again, so we don't have to install any simulators or development tools or anything like that.
So, let me just jump over to Firefox and scale the window down and we'll take a look at a few of these sites. Okay, so here in the Firefox browser, I've scaled the window down. And let's start out by looking at OpenTable. And you can see that this is the OpenTable site and it's showing me restaurants in San Francisco, California and I can do things like change number of people, I can change the day that I want, I can change the time that I want and you can see that it's updating the list as I make my changes. I can also click on the Menu up here.
All right, I get a nice little menu there, and you can see I can refine my search by rating and distance. But the point is, if you look at the way this application is laid out, it's really nice. Right, the styles are really well done, the application looks nice and native. All right, we have a pretty common list view here for choosing restaurants. So, this is a really nice looking site. Again, built using jQuery Mobile, and it's available at m.opentable.com, and that's this URL right here. Alright, let's take a look at another one.
Here's the website for Stanford University. And again, you can, just looking at this, you can see that this looks nicely designed for mobile devices. We have our list view here with various links. I can click on the news link for example, and get information about news going on around campus, I can go back to the main page, I can learn more about the contact directory, I can learn more about the various schools that they have. Alright? So again, nice job done by Stanford University to build a mobile optimized website using jQuery Mobile.
Alright, let's take a look at one more. This is the website for Dodge. And again, this is m.dodge.com. And you can see that they were able to implement a little side drawer menu just like you would using a native app. And I can get information about the various vehicles. I can get information about the various sales they have going on. Here's a little carousel that they built using jQuery mobile. So again, I mean, looking at this, if you didn't see that you were Lbar and you didn't know this was a Firefox browser on the desktop, it's kind of hard to distinguish this from a mobile application.
A native mobile application. You're getting some really nice carousel effect here. The performance feels pretty good. The layout is obviously been optimized for a mobile experience. This fix position toolbar right here. You can see it's not moving. And in fact, it's transparent. The content is kind of showing through it a little bit there. So, it's a really nice job. And it should give you an idea of what jQuery Mobile is capable of doing, just by building web apps. I mean, you don't have to build native apps to get really great experiences on mobile devices.
And that's what we're going to cover as we move through the rest of the course. So, now let's move on and look at some of jQuery's features.
- Building your first jQuery Mobile app
- Understanding the page architecture
- Using page transitions and dialog widgets
- Working with forms and controls
- Creating toolbars
- Working with list views
- Using jQuery Mobile's content formatting features
- Adding events to detect and respond to changes
- Configuring and customizing jQuery Mobile