Create jQuery Mobile websites in dreamweaver

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’m gonna teach you to,

Create a Simple and effective jQuery Mobile Website.

jQuery Mobile website - PepFry

 

If you are not aware of what jQuery Mobile is, what are the files necessary to build a jQuery Mobile website. Please feel free to go through my previous tutorial which teaches you ‘Simple way to understand jQuery Mobile‘.

My previous tutorial teaches you the following:

  •  Downloading jQuery Mobile Framework from jQuery Mobile Website
  •  Copying necessary files out of the jQuery Mobile Framework after extraction
  •  Creating new Project folder for your project and getting set with you brand new jQuery Mobile Website
  •  Teaches you the different  ways in which you can go ahead and create a jQuery Mobile Website. They are like:
  •  Using the local copies of the files necessary
  •  Using the CDN hosted files

Once you have gone through that tutorial – you can come back here with confidence.

Anyways here is how a Mobile Website is created using jQuery Mobile Framework. In this tutorial – I’ll be creating a Website that would contain the following:

  •  Three jQuery Mobile Pages [Home, About, Contact]
  •  Each page will contain [Header, Content area, Footer]
  •  You will find Navigation section, that allows you to navigate through the pages
  •  You will also find [back button] on each of the next and previous pages except the First page

Here is the Step by Step procedure  to Create a jQuery Mobile Website:

Step1: Create an empty .HTML page with the help of  a HTML Editor. So that you get the Doc type, Meta tag etc needed.

Step2: Include the necessary files like, .JS files and .CSS file in the <head> section.

If you do not have HTML Editor, and if you do not have a HTML blank Template. Just copy and paste the following template to your HTML file.

Step3: We will need to create 3 pages. Copy and paste the following code between your <body> section.

The above code what you see is a jQuery Mobile Page. Similarly, we have to create 2 more. So that we’ll have our 3 Pages what we had planned for.

Here are the other two pages:

Page2:

 Page3:

So just copy and paste all the 3 page one below the other in you HTML Page and you are ready with you jQuery Mobile Website with 3 Pages which are also easily Navigate-able.

What we did?

  •  We created 3 jQuery Mobile Pages
  •  Provided with Navigation system
  •  Gave them Back button, so that you could also navigate back as well

So, guys you are all set with the Brand new jQuery Mobile Website. You can test it with your Browser or you can host your files to the Server and test it via your Mobile device.

Your final output should be exactly like the below screenshot. Else, you’ve done some mistake while copying the code.

create jquery mobile website tutorial PepFry

Hope you have understood how to create a simple jQuery Mobile Website. Great!

 

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="">