Basic guide to understand jQuery Mobile Framework

Error: You must enable a payment gateway to use Easy Digital Downloads

Error: No checkout page has been configured. Visit Settings to set one.

Error: No checkout page has been configured. Visit Settings to set one.

Today, I’ll take you guys through the most happening technology - Mobile Responsive Framework (jQuery Mobile) around the world.

The topic is,

Basic guide to understand jQuery Mobile Framework

With which Techies find relaxed & feel comfortable. Especially Web Developers feel exceptionally relaxed while they code for a Mobile Website using jQuery Mobile.

understand jQuery Mobile Framework - PepFry

 

Developers are now in no confusion nor any kinda concerns with respect to Cross-platform & Cross Browser issues.

Guys, today I’d like to introduce you to a Technology that is taking the world of Internet on Mobile to the next Level. I’m speaking about the most versatile, Robust and Seamless Framework (Mobile Framework) jQuery Mobile. jQuery Mobile is a Unified HTML5 based User Interface System for all Major & Popular device Platforms.

It is built on the Rock solid jQuery!. jQuery Mobile supports almost every Device & Platform like Windows, iOS, Android, Blackberry, Bada, Palm OS, Symbian, Meego etc.

With the above introduction ending there, I’d like to walk you through a small & simple example where you start to understand the following pointers:

  •  What jQuery is all about & how is it coded
  •  What makes it that different from others
  •  What are the files required to execute a jQuery Mobile Mobile Website etc

In this tutorial,

I’m gonna create a Mobiles site having just single page using jQuery Mobile Framework. I’ll also let you know what are the files within the Framework you download. Not all the files inside the Framework is need to execute a jQuery Mobile Website. I’ll also tell you what is the simplest & easiest way to create a jQuery Mobile Website and also how to test it just with you Browser.

There are 2 major ways to go ahead Creating a jQuery Mobile Site.

1. Download the entire jQuery Framework from the jQuery mobile website consisting of Images, JavaScript and CSS files. You can host it to your server or save it on your local systems.

2. Copy the URL of the CDN hosted files. You will get all the path required for jQuery Mobile to get running. You’ll get the CDN hosted path for the JavaScript file, jQuery file, CSS file.

The first way of accomplishing it is as told below:

Step1: The very 1st thing what you might do is Download the jQuery Mobile Framework from the website.

Step2: Extract the zip file on to your local Drive. You’ll see many files and folders. You can see them in the below screenshot:

understand jQuery Mobile Framework - PepFry

Step3: Now that you have a clear view of all the files and folders inside the jQuery Mobile Framework.

1. Come out of the jQuery Mobile Framework folder

2. Create a new Project folder and name it of you choice or just name it as ‘JQMProject1′

3. Copy few files and folders from the jQuery Mobile Framework to your newly created project folder.

Those are as listed below:

  •  .CSS file
  •  .JS file
  •  Images folder
  •  Create a new .HTML file as well into the same JQMProject1 directory/folder what ever you call it as

Step4: Adding necessary files to the HTML file, so that you can go ahead and start coding jQuery Mobile pages of your desire.

  •  We’ll need to add 2 .JS file and a single .CSS file.

Open your .HTML file with the help of HTML Editor or any text editor. You can even use your Notepad application to edit. Just copy the below 3 lines of code to your .HTML file just below the <title></title> tag within your <head></head> tag.

Step5: Coding your jQuery Mobile Page.

  •  Open you .HTML file again with  your favorite editor
  •  Place the Cursor/Mouse pointer between the <body></body> tag
  •  Create a Division as shown below tag

Give it a ‘data-role‘ by name ‘page‘ and an ‘ID‘ by name ‘page1‘. See the below code.


So, that was the code broken into piece – so that you would understand it step by step.

Here is the full code all @ once:

The second way of accomplishing this task

You can copy this CDN hosted path. There will be no need for Images in your local system. Everything is hosted for you live. Just you need to copy and paste three URL’s and you are ready to code a jQuery Mobile Website.

What you have to do is:

Follow the same above process. While you include .JS file and .CSS files. Instead of local path – please copy and paste the path which I have listed below.

No that you are done with coding your ‘First jQuery Mobile Page‘ – Go ahead and test it on your browser.

 

To test this application. You can just re-size your browser. Make it small & big – you will see the response. OR Just visit my previous tutorial on ‘How to test responsive web apps for free

Any question – please write back to me, I’ll try to answer it asap. Hope to see your positive suggestions as well.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">