Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="ISO-8859-1">
- <title>Insert title here</title>
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
- <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
- <script type="text/javascript">//<![CDATA[
- $(document).on('pageinit', '#home', function(){
- $(document).on ('click','#firstbutton', function () {
- $.mobile.changePage('#firstbutton', {
- transition: 'slideup',
- changeHash: true,
- position: {
- my: 'top',
- at: 'top',
- of: $('#home')
- },
- role: 'dialog'
- });
- });
- $(document).on('click','#first',function () {
- window.location.href = "#first";
- });
- $(document).on('click','#second',function () {
- window.location.href = "#second";
- });
- });//]]>
- </script>
- <script type="text/javascript">//<![CDATA[
- $(document).on('pageinit', '#home', function(){
- $(document).on ('click','#secondbutton', function () {
- $.mobile.changePage('#secondbutton', {
- transition: 'slideup',
- changeHash: true,
- position: {
- my: 'top',
- at: 'top',
- of: $('#home')
- },
- role: 'dialog'
- });
- });
- $(document).on('click','#third',function () {
- window.location.href = "#third";
- });
- $(document).on('click','#fourth',function () {
- window.location.href = "#fourth";
- });
- });//]]>
- </script>
- </head>
- <body>
- <div data-role="page" id="home">
- <div data-role="footer" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" data-theme="c">
- <div data-role="navbar" data-theme="c">
- <ul>
- <li>
- <button id="firstbutton" data-corners="false" data-theme="c">first button</button>
- </li>
- <li>
- <button id="secondbutton" data-corners="false" data-theme="c">second button</button>
- </li>
- </ul>
- </div>
- </div>
- </div>
- <div data-role="dialog" id="firstbutton" data-theme="c">
- <div data-role="content">
- <a href="#" id="first" data-role="button" data-icon="false" style="color: White; background:green;">first</a>
- <a href="#" id="second" data-role="button" data-icon="false" style="color: White; background:green;">second</a>
- </div>
- </div>
- <div data-role="dialog" id="secondbutton" data-theme="c">
- <div data-role="content">
- <a href="#" id="third" data-role="button" data-icon="false" style="color: White; background:green;">third</a>
- <a href="#" id="fourth" data-role="button" data-icon="false" style="color: White; background:green;">fourth</a>
- </div>
- </div>
- <div data-role="page" id="first" data-theme="c" data-transition="slideup">
- <div data-role="content" style="text-align: center;" data-theme="c" data-inline="true">
- <div>
- <input type="text" id="second" placeholder="first page">
- <div class="ui-grid-a">
- <div class="ui-block-a">
- <div data-role="fieldcontain" align="right">
- <a style="width:25%" data-role="button" id="first" href="#">first</a>
- </div>
- </div>
- <div class="ui-block-b">
- <div data-role="fieldcontain" align="left">
- <a style="width:25%" data-role="button" id="esecond" href="#">second</a>
- </div>
- </div>
- </div>
- <div class="ui-grid-c">
- <div class="ui-block-a">
- <a href="#" data-role="button" data-icon="false" style="color: White; background:green;">first</a>
- </div>
- <div class="ui-block-b">
- <a href="#" data-role="button" data-icon="false" style="color: Black; background:yellow;">second</a>
- </div>
- <div class="ui-block-c">
- <a href="#" data-role="button" data-icon="false" style="color: white; background:black;">third</a>
- </div>
- <div class="ui-block-d">
- <a href="#" data-role="button" data-icon="false" style="color: White; background:red;">fourth</a>
- </div>
- </div>
- </div>
- <div data-role="page" id="home">
- <div data-role="footer" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" data-theme="c">
- <div data-role="navbar" data-theme="c">
- <ul>
- <li>
- <button id="firstbutton" data-corners="false" data-theme="c">first button</button>
- </li>
- <li>
- <button id="secondbutton" data-corners="false" data-theme="c">second button</button>
- </li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div data-role="page" id="second" data-theme="c" data-transition="slideup">
- <div data-role="header" ></div>
- <div data-role="content" style="text-align: center;" data-theme="c" data-inline="true">
- <div>
- <input type="text" id="second" placeholder="Second Page">
- <div class="ui-grid-a">
- <div class="ui-block-a">
- <div data-role="fieldcontain" align="right">
- <a style="width:25%" data-role="button" id="first" href="#">first</a>
- </div>
- </div>
- <div class="ui-block-b">
- <div data-role="fieldcontain" align="left">
- <a style="width:25%" data-role="button" id="esecond" href="#">second</a>
- </div>
- </div>
- </div>
- <div class="ui-grid-c">
- <div class="ui-block-a">
- <a href="#" data-role="button" data-icon="false" style="color: White; background:green;">first</a>
- </div>
- <div class="ui-block-b">
- <a href="#" data-role="button" data-icon="false" style="color: Black; background:yellow;">second</a>
- </div>
- <div class="ui-block-c">
- <a href="#" data-role="button" data-icon="false" style="color: white; background:black;">third</a>
- </div>
- <div class="ui-block-d">
- <a href="#" data-role="button" data-icon="false" style="color: White; background:red;">fourth</a>
- </div>
- </div>
- </div>
- <div data-role="page" id="home">
- <div data-role="footer" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" data-theme="c">
- <div data-role="navbar" data-theme="c">
- <ul>
- <li>
- <button id="firstbutton" data-corners="false" data-theme="c">first button</button>
- </li>
- <li>
- <button id="secondbutton" data-corners="false" data-theme="c">second button</button>
- </li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div data-role="page" id="third" data-theme="c" data-transition="slideup">
- <div data-role="content" style="text-align: center;" data-theme="c" data-inline="true">
- <div>
- <input type="text" id="second" placeholder="third page">
- <div class="ui-grid-a">
- <div class="ui-block-a">
- <div data-role="fieldcontain" align="right">
- <a style="width:25%" data-role="button" id="first" href="#">first</a>
- </div>
- </div>
- <div class="ui-block-b">
- <div data-role="fieldcontain" align="left">
- <a style="width:25%" data-role="button" id="esecond" href="#">second</a>
- </div>
- </div>
- </div>
- <div class="ui-grid-c">
- <div class="ui-block-a">
- <a href="#" data-role="button" data-icon="false" style="color: White; background:green;">first</a>
- </div>
- <div class="ui-block-b">
- <a href="#" data-role="button" data-icon="false" style="color: Black; background:yellow;">second</a>
- </div>
- <div class="ui-block-c">
- <a href="#" data-role="button" data-icon="false" style="color: white; background:black;">third</a>
- </div>
- <div class="ui-block-d">
- <a href="#" data-role="button" data-icon="false" style="color: White; background:red;">fourth</a>
- </div>
- </div>
- </div>
- <div data-role="page" id="home">
- <div data-role="footer" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" data-theme="c">
- <div data-role="navbar" data-theme="c">
- <ul>
- <li>
- <button id="firstbutton" data-corners="false" data-theme="c">first button</button>
- </li>
- <li>
- <button id="secondbutton" data-corners="false" data-theme="c">second button</button>
- </li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div data-role="page" id="fourth" data-theme="c" data-transition="slideup">
- <div data-role="content" style="text-align: center;" data-theme="c" data-inline="true">
- <div>
- <input type="text" id="second" placeholder="fourth page">
- <div class="ui-grid-a">
- <div class="ui-block-a">
- <div data-role="fieldcontain" align="right">
- <a style="width:25%" data-role="button" id="first" href="#">first</a>
- </div>
- </div>
- <div class="ui-block-b">
- <div data-role="fieldcontain" align="left">
- <a style="width:25%" data-role="button" id="esecond" href="#">second</a>
- </div>
- </div>
- </div>
- <div class="ui-grid-c">
- <div class="ui-block-a">
- <a href="#" data-role="button" data-icon="false" style="color: White; background:green;">first</a>
- </div>
- <div class="ui-block-b">
- <a href="#" data-role="button" data-icon="false" style="color: Black; background:yellow;">second</a>
- </div>
- <div class="ui-block-c">
- <a href="#" data-role="button" data-icon="false" style="color: white; background:black;">third</a>
- </div>
- <div class="ui-block-d">
- <a href="#" data-role="button" data-icon="false" style="color: White; background:red;">fourth</a>
- </div>
- </div>
- </div>
- <div data-role="page" id="home">
- <div data-role="footer" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" data-theme="c">
- <div data-role="navbar" data-theme="c">
- <ul>
- <li>
- <button id="firstbutton" data-corners="false" data-theme="c">first button</button>
- </li>
- <li>
- <button id="secondbutton" data-corners="false" data-theme="c">second button</button>
- </li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement