jQuery Mobile is an excellent way to create web applications for mobile devices.
All you need to use the framework is some basic HTML knowledge. In addition, to that, because the framework is built on top of jQuery…you get all of the functionality of jQuery in a way that is easily accessible. In this short tutorial I’ll show you how easy it is to create a list based app with the framework in just a few minutes and hopefully encourage you to give it a try.

JavaScript Framework

What is the jQuery Mobile Framework?
jQuery mobile is a framework for developing web applications for touch optimized devices. A framework gives you a structure or methodology for doing something. In this case, for developing web applications.
Although you can use HTML and JavaScript to develope mobile optimized sites, you’ll quickly run into some serious problems…mainly that different devices and browsers treat your code differently. So you have to write a bunch of JavaScript to overcome device orientation and other issues. You also have to create styles for different things like list views, dialogs, toolbars, etc . jQuery mobile does all of that for you. It creates a code base that handles differences between devices with support for a large range of devicess.

So, let’s get started with a quick example. I’m going to build a quick app to show some photos.

First create a html page call index.html  Copy & paste the code blow

Here I will add jQuery mobile Framework data.[jquery.mobile-1.1.1.min.css],[jquery-1.7.1.min.js],[jquery.mobile-1.1.1.min.js]. i will add 3 file the file are also hosted on jQuery CDN . if you think it’s hosted on self host than download  jQuery mobile Framework . Now take a look this code here i will add Animal Apps, & you need to use the viewport tag to make sure your app shows up correctly on phones. Some devices pretend the page is 960 pixels wide, so you need to use this code somewhere between the section of your document.
meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1

I’ve also added a class of fullscreen toAnimal Photo.
img.fullscreen {
max-height: 100%;
max-width: 100%;
}
This is not a jQuery mobile class, but something I’ve added myself. I want the photos to display full screen, so eventually I’ll add some CSS for that.

Multiple Pages 
So far, we’ve built a single page app, if you want to create an app with multiple pages, you have to wrap each page with a tag and use the data-role=”page” and add an id so that we can link to that page.

JavaScript Framework

footer Section
 we’ll need a footer. I’m going to add a navigation with some dummy links to some other potential pages.
 I’ve added the data-position=”fixed” attribute to the footer. That places the footer at the bottom on mobile devices. Our footer looks good, but the links could look better. Let’s make them look like buttons on a mobile device.
Modify the

JavaScript Framework

we could really use some icons on the navbar links. jQuery mobile lets you easily add icons by adding a data-icon attribute to links. Modify your list items to read like this:
data-icon=”home”

Single Page Full Screen 
Now that we have a page, let’s add a page for each of our photos.

JavaScript Framework

The code is pretty similar to the Animal Photo list page with some important changes. There is not going to be a footer on these pages, since they will just display the photos. We added a header with a link back to the home page and you might notice a data-iconpos attribute on that link. You can control the position of the icons on buttons with this attribute or you can turn the buttons off altogether using notext as a value. The button on the header is linked to our photos page.

Our app is now ready take look this final full source page.or download full source myapps

 jQuery Mobile JavaScript Framework

Leave a Reply

avatar
  Subscribe  
Notify of