Saturday, 22 December 2012

JQuery Mobile basic part 2

by Unknown
Hi friends my name is Vishnu Sharma and in this article i m going through the basic of JQuery mobile.
so let get start..



Jquery mobile is a combination of JQuery plug-ins and widgets .that provide the cross platform API for creating mobile website and application.the jQuery mobile is similar in UI.By using jQuery mobile is also used for making computer application.
still Jquery is in AlPha version(not beta ).



when we download the Jquery mobile file from the Jquery site it consist of

a JavaScript file, a CSS file, and two  graphic file.

jQuery Mobile includes a small set of graphics for user interface elements. These
are simple, standardized icons for navigation.
we can download the entire jQuery Mobile package (the JavaScript library, the CSS,
and the graphics)
or
you can access them through the project’s CDN.(recommended)

How jQuery Mobile Works:-

              jQuery Mobile uses HTML 5 + CSS 3 features to enhance basic HTML markup to
create a consistent mobile experience across supported platforms. jQuery Mobile
 use the HTML 5 specification for custom data- attributes.
  jQuery Mobile selects elements based on their data- attributes and enhances them by inserting extra markup, adding new CSS classes, and applying event
handlers. This enables you to quickly write basic semantic markup and leave it to jQuery Mobile to transform your simple markup into complex user interface elements.
it support all the mobile phone..some of then are
1. IOS
2. Android
3. Windows mobile
4. MEGO
5. BlackBerry
6. Bade
Many more…

before starting the our programming in Jquery mobile .first the thing we require the following thing to know

What are required:-

Html 5
CSS 3
JavaScript
Jason
Text editor: espresso (Mac) or sublime text 2 (Mac/windows)

Create Your First jQuery Mobile Application:-

  So,we first with the Hello,World program in Jquery mobile. :D


<!DOCTYPE html>
<html>
<head>
<title>First Jquery mob</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/
jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js">
</script>
</head>
<body>
Hello,World
</body>
</html>


Setting up folders:-

          It is good particle to make a separate folder for blinding our project.
Now link the css and JavaScript file in the index.html file. Now we have to add the Jquery mobile. Open the website of Jquery mobile  à download
We have two option
1. we can add the link using CDN (recommended)
2.or  We can download the liberty
1. Or we can add the link using CDN (recommended)
(Place the CDN code in head tag)


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Jquery mobile </title>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
      <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script src="_/js/myscript.js"></script>
<link rel="stylesheet" href="_/css/mystyles.css" />
</head>
<body>
      Welcome to the Jquery mobile
</body>
</html>

2. We can download the liberty:-

Or u can download the Jquery mobile liberty
If we don’t have internet connection it is better to have libery
Open the website of Jquery mobile (Jquery mobile.com)  à download
And click zip file: Jquery.mobile.version.zip (which include image, javascript css folder).
Located the zip file and decompress the file to our working project folder.
Now we have to download the Jquery current release latest minified.
For that go to the docs.jquery.com/downloading_jquery
and download the minified file (right click the minified link and save it have javascript.js) or CDN .

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title> Jquery mobile </title>

<meta name="viewport" content="width=device-width,

initial-scale=1, maximum-scale=1" />
 
<script src="_/js/jquery.js"></script>
 
      <script src="_/js/jquery.mobile-1.1.0.min.js"></script>

</head>

<body>
      Welcome to the Jquery mobile
</body>

</html>

And save project file with extension index.html 

and open in your browser


0 comments:

Post a Comment