NEWS: Total Picture Views: 147060 | Total Article Views: 155597 | Top 5 Most Popular Article: 1. Am I Stuck Algorithm with Becker Robot | 2. How to read a JSON and work with it | 3. PickUpThings with Becker Robot | 4. Encrypted Data GUI (Download .Zip) | 5. Create Wall and Things with Becker

JQuery Mobile Example HTML

Description:

JQuery Mobile Website Example

Code:

<html>
<head>
    <title>MobileApp</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="p1">
    <div data-role="header">
        <h1>MyMobileApp</h1>
        <div data-role="navbar">
            <ul>
                <li><a href="#p1" data-transition="flow" data-icon="home">Home</a></li>
                <li><a href="#p2" data-transition="turn" data-icon="phone">Contacts</a></li>
                <li><a href="#p3" data-transition="flip" data-icon="camera">PhotoGalary</a></li>
            </ul>
        </div>
    </div>
    <div data-role="main" class="ui-content">
        <h2>This is my first page</h2>
        <p>This is my first Mobile Web app</p>
    </div>
    <div data-role="footer">
        <h2>© Free Mobile App Developer 2015</h2>
    </div>

</div>

<div data-role="page" id="p2">
    <div data-role="header">
        <h1>MyMobileApp</h1>
        <div data-role="navbar">
            <ul>
                <li><a href="#p1" data-transition="flow" data-icon="home">Home</a></li>
                <li><a href="#p2" data-transition="turn" data-icon="phone">Contacts</a></li>
                <li><a href="#p3" data-transition="flip" data-icon="camera">PhotoGalary</a></li>
            </ul>
        </div>
    </div>
    <div data-role="main" class="ui-content">
        <ul>
            <li>
                <div data-role="collapsible">

                    <h3>John</h3>
                    <p>(647) 335 3646</p>

                </div>
            </li>
            <li>
                <div data-role="collapsible">
                    <h3>Prince</h3>
                    <p>(416) 335 3646</p>
                </div>
            </li>
            <li>
                <div data-role="collapsible">
                    <h3>Micelle</h3>
                    <p>(647) 533 6435</p>
                </div>
            </li>
            <ul>
    </div>
    <div data-role="footer">
        <h2>© Free Mobile App Developer 2015</h2>
    </div>

</div>
<div data-role="page" id="p3">
    <div data-role="header">
        <h1>MyMobileApp</h1>
        <div data-role="navbar">
            <ul>
                <li><a href="#p1" data-transition="flow" data-icon="home">Home</a></li>
                <li><a href="#p2" data-transition="turn" data-icon="phone">Contacts</a></li>
                <li><a href="#p3" data-transition="flip" data-icon="camera">PhotoGalary</a></li>
            </ul>
        </div>
    </div>
    <div data-role="main" class="ui-content">
        <h2>This is my third webpage</h2>
    </div>
    <div data-role="footer">
        <h2>© Free Mobile App Developer 2015</h2>
    </div>

</div>
</body>
</html>
Attachments: None

Tags: JQuery Mobile

Total Views: 1003

My name is Jean-Mathieu

I created this website so other people could enjoy finding useful stuff easier. If you have any question do not hesitate to contact me.

jean8mathieuCreated on 06/15/15


affiliate_link

Disclosure: We are a website that needs compensation to operate like any other website on the internet.
We may receive consideration for our reviews but we are totally unbiased and do not accept paid reviews or fake reviews claiming to be something they are not.