Thursday, February 6, 2014

Working on Jquery Mobile

Jquery Mobile:

Jquery is a touch optimized web framework which is used to create web applications. The jquery Mobile framework is compatible with other mobile application framework and platforms like Phonegap, Worklight etc.

working on it:

There are basically three components which are used in it.

1. HTML
2. CSS
3. JQUERY

Jquery Mobile works on following os:

ios
android
windows
blackberry
Obadda
web os
symbian
Mee go

Examples of its coding:

<!DOCTYPE html>
<html>
    <head>
       <title>Page Title</title>
       <meta name="viewport" content="initial-scale=1, user-scalable=no, width=device-width">
       <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
    </head>
 
    <body>
        <div data-role="page" id="first" data-theme="a">
            <div data-role="header" data-position="fixed">
                <h1>Page Header 1</h1>
            </div><!-- /header -->
 
            <div data-role="content">
                <p>Hello, world!</p>
                <a href="#second" data-role="button" data-inline="true" data-transition="flip">Go to second page</a>
            </div><!-- /content -->
 
            <div data-role="footer" data-position="fixed">
                <h4>Page Footer 1</h4>
            </div><!-- /footer -->
        </div><!-- /page -->
 
        <div data-role="page" id="second" data-theme="b" data-add-back-btn="true">
            <div data-role="header" data-position="fixed">
                <h1>Page Header 2</h1>
            </div><!-- /header -->
 
            <div data-role="content">
                <p>Page content goes here.</p>
            </div><!-- /content -->
 
            <div data-role="footer" data-position="fixed">
                <h4>Page Footer 2</h4>
            </div><!-- /footer -->
        </div><!-- /page -->
 
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
    </body>
</html>



No comments:

Post a Comment