آموزش jQuery Mobile - انتقال صفحه Flip

جی کوئری موبایل - انتقال صفحه با انعکاس

شما می توانید از ویژگی data-transition = "flip" استفاده کنید تا عناصر را از پشت به جلو به صفحه بعدی با انعکاس منتقل کنید.

مثال زیر استفاده از انعکاس صفحه را در چارچوب جی کوئری موبایل نشان می دهد.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <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 = "page1">
         <div data-role = "header">
            <h2>Header</h2>
         </div>
         
         <div data-role = "main" class = "ui-content">
            <p>Welcome to example.com!!! Click the link to flip the page.</p>
            <a href = "#page2" data-transition = "flip">Page Two</a>
         </div>
         
         <div data-role = "footer">
            <h2>Footer</h2>
         </div>
      </div>

      <div data-role = "page" id = "page2">
         <div data-role = "header">
            <h2>Header</h2>
         </div>

         <div data-role = "main" class = "ui-content">
            <p>Click the link to go page one.</p>
            <a href = "#page1">Page One</a>
         </div>

         <div data-role = "footer">
            <h2>Footer</h2>
         </div>
      </div>
   </body>
</html>

انتقال دیالوگ fade - درس قبلی

درس بعدی - انتقال دیالوگ Flip