آموزش jQuery Mobile - انتقال دیالوگ Slidedown

جی کوئری موبایل - انتقال فرم از بالا به پایین در دیالوگ

شما می توانید با تنظیم صفت data-transition = "slidedown"، صفحه را از بالا به پایین با استفاده از جعبه دیالوگ (dialog box) کشیده شود.

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


<!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 slide page from top to 
            bottom using dialog box.</p>
            <a href = "#page2" data-transition = "slidedown">Page Two</a>
         </div>
         
         <div data-role = "footer">
            <h2>Footer</h2>
         </div>
      </div>

      <div data-role = "page" data-dialog = "true" 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>

انتقال صفحه Slidedown - درس قبلی

درس بعدی - انتقال صفحه Turn