Last Update May 4, 2021: We improved the overall article.
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.
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 , & 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.
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.
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.
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.
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:
Single Page Full Screen
Now that we have a page, let’s add a page for each of our photos.
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