Skip to content

Instantly share code, notes, and snippets.

@mlynch

mlynch/app.html

Created March 19, 2012 03:53
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save mlynch/2093897 to your computer and use it in GitHub Desktop.
Save mlynch/2093897 to your computer and use it in GitHub Desktop.
Download ZIP
Simple linked pages
Raw
app.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css"
/>
<style>
/* App custom styles */
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js">
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h3>
Page 1
</h3>
</div>
<div data-role="content">
<a data-role="button" href="#page2">
Go to Page 2
</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h3>
Page 2
</h3>
<a data-role="button" data-direction="reverse" data-rel="back"
href="#page2" data-icon="arrow-l" data-iconpos="left">
Back
</a>
</div>
<div data-role="content">
</div>
</div>
<script>
//App custom javascript
</script>
</body>
</html>
@FitsumM
Copy link

FitsumM commented Oct 26, 2013

Hi Mlynch, I am trying to do something similar what you did here. In my JQuery UI designer I have added a few components. I also added a button at the bottom named it "Continue" when I click on continue I wanted to land on second page I created.So this what I coded inside my index.html

           <script>
               $(document).ready(function () {
                   $.mobile.changePage('Home.html');
               });
            </script>
        </div>

        <div data-role="content">
            <a data-role="button" href="#page2"> </a>
                <script>
                    $(document).ready(function () {
                        $.mobile.changePage('Home2.html');
                    });
            </script>

        </div>

The button "Continue" is on page1 Upon click I wanted to go to page2. but when I test this it loads page1 and it goes to page2 before the button "continue" clicked.

Would you help me on this?

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment