Enter your Sign on user name and password.

Forgot password?
Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

What is jQuery Mobile?

  • You can preview a jQuery Mobile website used in another course at cmairscreate.com/jqm
  • jQuery Mobile is a mobile platform for creating web pages using HTML & CSS just like you would use for a full desktop version of a website
  • The jQuery mobile website comes with prebuilt themes, icons and page setups that are available for you to use to create your website
  • This platform is designed for mobile devices & is touch based
  • jQuery Mobile uses the jQuery library to create the framework, so full jQuery capabilities are available within this mobile version of the site
  • jQuery mobile pages are designed in a very different way than a regular web page
  • A jQuery mobile website uses only a single html page to create all of the pages within your mobile site
  • There are 5 prebuilt themes available for the various sections of the website, and you can customize additional themes as needed
  • This is a great way to produce a mobile version of your website that is completely touch compatible
  • Dreamweaver can assist you in building the basics for your jQuery mobile website
  • This chapter of lessons will give you a taste of working with jQuery Mobile, but we will not be completing an entire site as that will take too long, but this will familiarize you with the concept so you can explore jQuery Mobile further if you want to

What is jQuery Mobile?

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • jQuery Examples 0:51
    • Photo Gallery
    • Slideshow
  • Summary 5:29

Transcription: What is jQuery Mobile?

Welcome back to Educator.com.0000

I am very excited for this lesson, because I can introduce you to the concept of jQuery Mobile.0003

And jQuery Mobile is a very unique way to build web pages: instead of having all separate HTML pages, all of your pages are wrapped up into one, and it is a very unique interface designed specifically for mobile devices and the ability to touch your way around mobile devices.0011

So, it is a touch-based framework, and that framework is based on the very popular jQuery framework; so this is really a subset of jQuery, specifically created for mobile websites.0036

Let's take a look at some examples: I actually have four of them for you here.0052

This is a website created for my jQuery Mobile course; and what we have is a Travel Adventures website--and you are actually looking at this website in four separate browsers.0057

The jQuery Mobile platform is designed to work off the jQuery library; and what that means is: it is a Javascript library with all kinds of unique pieces to it that you can hook into for your websites.0071

And specifically, jQuery Mobile is incorporated into Dreamweaver.0089

This is a very exciting platform with regards to creating websites just for mobile; so let's take a look at what a jQuery website is.0095

Now, I want to show you, right here: this first one is in Google Chrome; and we know Google Chrome is a very up-to-date, modern browser--at this point in time, it is the most up-to-date, modern common browser.0106

And you can see that that this works just fine on a desktop, but it is designed to stay narrow; so I can certainly make this full-screen if I want, and it will still be fully functional, with hovers on everything; the icons work.0121

Notice, I have my little number count, so if I am going to go into Tours or Countries, I know how many...there is an arrow leading me into that part of the website.0138

And it is also designed for fingers; so you can see, it has a taller area to make it easier for you to put your finger on it.0150

But it is really not designed to be looked at in this manner: the idea is: it is designed to be viewed in a narrow-window device.0160

What happens if I click on any of these?--well, if I click Tours, you can see, my tours show up; if I click Countries (and I'll use this version--the Safari version), you can see, I get into the various countries.0171

It allows you to dig deeper into the website--just like a normal website--but it is all created using jQuery Mobile and one single HTML page.0187

Everything you are looking at is one page--which is kind of strange to think about.0199

I'll go ahead and click Book a Tour; you can see, we can even create forms within this framework.0204

I have buttons to go backwards and forwards.0210

Notice, on Internet Explorer (and this is Internet Explorer 8, a very old browser): this framework works on it.0214

But the big distinction is: my arrow images turn out square in I.E. 8 (instead of rounded in the more modern browsers); but everything works, which is really exciting.0223

This was our Countries; the Tours--I'll click on Book a Tour, so you can see that page; and on this side, I'll click on the About Us page.0237

And you can see, there are our various web pages.0247

Now, you can even use Twitter; I can click on this Twitter feed, and it should display some tweets.0252

Now, the idea behind this is: it is only displaying the latest tweets.0260

We have Like and Follow Us buttons within this area; we even have a slideshow; and what I am going to do is move some of this (let me close it), so that it isn't quite so overwhelming; and we'll put one of these in the middle, so I can show you the slideshow.0265

I think this is a fun feature: you can see, this auto-adjusts to the size of the window; and there are even plugins you can add to create full-fledges photo galleries.0284

I am moving into the Photo Gallery area; if I click on Europe, you can see I have quite a few different images here; and if I click on an image, what it does is move me into a nice slideshow.0297

I can go ahead and play the slideshow down in this area, and it will automatically advance the images through the slideshow.0311

If I want to stop that slideshow, I can simply stop it here, or I can advance through the images myself.0320

That is jQuery Mobile and a plugin in order to be able to work with slideshow features; and there are a variety of different plugins available.0329

The jQuery Mobile framework is a very exciting framework; Adobe is on the board for jQuery Mobile, as are quite a few other board members, and it is a framework that is continuing to evolve, but it is all based on the very popular framework of jQuery.0343

That is a jQuery Mobile website, a complete website that has quite a few extra features, and it has themes built in that are creating this color scheme; it is really a great framework.0363

Dreamweaver can help you build these pages; so that is what we are going to take a look at.0377

That is an overview of the jQuery Mobile framework.0383

I have allowed you to view a mobile website (notice, we are viewing it on the desktop) so you can see some of the features that are built into the jQuery Mobile framework.0388

Let's get started actually taking a look at a page created in jQuery Mobile.0399