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>
- <style type="text/css">
- #home{
- position:relative
- }
- #firstpage{
- position:absolute; bottom:0;
- }
- </style>
- <script type="text/javascript">//<![CDATA[
- $(document).on('pageinit', '#home', function(){
- $(document).on ('click','#firstbutton', function () {
- $.mobile.changePage('#firstpage', {
- transition: 'slideup',
- changeHash: true,
- role: 'dialog'
- });
- $('#firstpage').position({
- my: 'right bottom',
- at: 'right top',
- of: $('#home'),
- offset: '0 5',
- collision: 'flip flip',
- using: function (pos1) {
- // OK, we got a position once inside the pos1 variable,
- // let's position it again this time without collision detection.
- $(this).position({
- my: 'right bottom',
- at: 'right top',
- of: $('#home'),
- offset: '0 5',
- collision: 'none none',
- using: function(pos2) {
- var hpos = 'right';
- var vpos = 'bottom';
- // Check to see if it was flipped horizontal
- if (pos1.left != pos2.left) {
- /* It was flipped horizontally so position is now
- my: 'left bottom',
- at: 'left top'
- */
- hpos = 'left';
- }
- // Check to see if it was flipped vertical
- if (pos1.top != pos2.top) {
- /* It was flipped vertically */
- vpos = 'top';
- }
- // Figure out the right and bottom css properties
- var right = $(window).width() - pos1.left - $(this).outerWidth(true);
- var bottom = $(window).height() - pos1.top - $(this).outerHeight(true);
- // Set the horizontal position
- if (hpos == 'right') {
- $(this).css({left: '', right: right});
- } else {
- $(this).css({left: pos1.left, right: ''});
- }
- // Set the vertical position
- if (vpos == 'bottom') {
- $(this).css({top: '', bottom: bottom});
- } else {
- $(this).css({top: pos1.top, bottom: ''});
- }
- }
- });
- }
- });
- });
- $(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(){
- var myPos = [$(window).width() / 2 - 300, 300];
- $(document).on ('click','#secondbutton', function () {
- $.mobile.changePage('#secondpage', {
- transition: 'slideup',
- changeHash: true,
- position: myPos,
- role: 'dialog'
- });
- $('secondpage').dialog('option', 'position', 'right');
- });
- $(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="firstpage" data-theme="a" style="background:black;">
- <div data-role="content">
- <a href="#" id="first" data-role="button" data-icon="false" style="color: white; background:red;">first</a>
- <a href="#" id="second" data-role="button" data-icon="false" style="color: white; background:red;">second</a>
- </div>
- </div>
- <div data-role="dialog" id="secondpage" data-theme="a">
- <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="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 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