Build your app with jQuery mobile
Hey guy in this tutorials i will how you guys how to build a hybrid mobileapp using jquery 1.4.5 demo, which is the stable version, Html5 and Cordova
plugins in some few steps, before we start lets know briefly know the following
: jQuery mobile,
: hybrid mobile app
: Cordova plugins
jQuery mobile is a friendly-touch user interface framework built base
on jQuery core that works across all tablet, mobile and desktop platforms
jQuery is is compatible with all popular and major desktop browsers, as well
as all popular major mobile phones platforms like,
- Andriod
- iOS
- Windows phone
- Blackberry
- WebOS
- Symbian
: Hybrid mobile app like other apps you will find on your mobile phone,
they install on your mobile phone device. you can also find them in app
stores, with them, u can even play games, read, engage your friend through
social media, take photos, track your, use GPS, and more
: A plugin is a package of injected code that allows the cordovawebview within
which the application renders to communicate with the native platform on which
it runs. also plugins provide access to mobile device and platform functionality
that is ordinarily unavailable to web based apps
Now let us get started, we are going to use jQuery java-scripts and css,
download those files below.
NOTE: do not modify or change name they, only if you know what you doing
Download here
After you downloaded the zip file (jquery1.4.5), create a new folder and name it myapp or
anything you wanna call it, create another one name www. inside the folder you just created
(myapp) and unzip the zip the file you just downloaded, it select all the
folder in it, copy or cut, and past them in to newly created folder . www which is in myapp folder
illustration how your directories will be
(myapp→www→your jqury folders goes here including index.html and other files)
page of your app.
they install on your mobile phone device. you can also find them in app
stores, with them, u can even play games, read, engage your friend through
social media, take photos, track your, use GPS, and more
: A plugin is a package of injected code that allows the cordovawebview within
which the application renders to communicate with the native platform on which
it runs. also plugins provide access to mobile device and platform functionality
that is ordinarily unavailable to web based apps
Now let us get started, we are going to use jQuery java-scripts and css,
download those files below.
NOTE: do not modify or change name they, only if you know what you doing
Download here
After you downloaded the zip file (jquery1.4.5), create a new folder and name it myapp or
anything you wanna call it, create another one name www. inside the folder you just created
(myapp) and unzip the zip the file you just downloaded, it select all the
folder in it, copy or cut, and past them in to newly created folder . www which is in myapp folder
illustration how your directories will be
(myapp→www→your jqury folders goes here including index.html and other files)
Creating an index.html file
This is where things will get interested
Now is to code an index.html file to display your app, and the index will be the homepage of your app.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>firstapp</title> </head> <body> <h1>myapp</h1> <p>this is the main content of your app, where u can put anything</p> </body> </html>
Explanation
Type this html code in any text editor and save as inedx.html (save it in myapp→www)Run it and this what you will see (photo below)
A jQuery mobile app must start witj an html5 doctype to take full advantage of all the
framework's features.
In the head, references to jQuery, jQuery mobile and mobile theme css are all required
to start things off.
Viewport meta tag
Note above that there is a meta viewport tag in the head to specify how the device
should display the page zoom level and dimensions. If this isn't set, many mobile device
will a virtual page width around 900 pixels and zoomed out ad=nd wide. By setting viewport
attributes to content="width=device, initial-scale=1", the width will be
set to the pixel width of the device screen.
ths app is not cool because didn't link the jQuery js and css, i will how to do that, make it beautiful
and more functionalities, but first let us know how to link js and css
css and js files are linked in the after the title tag in the html
CSS and JS file s are link in the head tag, aftre the title, if you did not change the directories this is how it will loook
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css"> <link rel="stylesheet" href="_assets/css/jqm-demos.css"> <script src="js/jquery.js"></script> <script src="_assets/js/index.js"></script> <script src="js/jquery.mobile-1.4.5.min.js"></script>After we link the CSS and JS files we can now set up the page container by adding the
a div page, like this
,inside the tag,each view or "page" on the mobile device is
identified with an element (usually a div) with the data-role="page"
attribute. Within the "page" container, any valid HTML markup can be
used, but for typical pages in jQuery Mobile, the immediate children
of a "page" are divs with, your code should look this,
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>firstapp</title> <link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css"> <link rel="stylesheet" href="_assets/css/jqm-demos.css"> <script src="js/jquery.js"></script> <script src="_assets/js/index.js"></script> <script src="js/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>myapp</h1> </div><!-- end of the header --> <img src="img/app.jpg"> <p>this is the main content of your app, where u can put anything</p> </div><!-- end of content--> </div><!--end of page--> </body> </html>Now you save it and refresh the page, and it will look this
IN the next i will show how to make button and linking of pages
Next is
No comments:
Write comments