کد را در کلیپ برد کپی کنید
<!DOCTYPE html> <html> <head> <!-- Include meta tag to ensure proper rendering and touch zooming --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Include jQuery Mobile stylesheets --> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <!-- Include the jQuery library --> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <!-- Include the jQuery Mobile library --> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>Welcome To My Homepage</h1> </div> <div data-role="main" class="ui-content"> <p>Click on the link to see the flip effect.</p> <a href="#pagetwo" data-transition="flip">Flip to Page Two</a> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="header"> <h1>Welcome To My Homepage</h1> </div> <div data-role="main" class="ui-content"> <p>Click on the link to go back. <b>Note</b>: fade is default.</p> <a href="#pageone">Go back to Page One</a> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> </body> </html>
Welcome To My Homepage
Click on the link to see the flip effect.
Flip to Page Two
Footer Text
Welcome To My Homepage
Click on the link to go back.
Note
: fade is default.
Go back to Page One
Footer Text