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

jQuery Mobile - انتقال از پنجره ای در دیالوگ

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

مثال زیر استفاده از انتقال از پنجره ای در دیالوگ را در چارچوب jQuery Mobile توضیح می دهد.


<!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 the page from right 
            to left using dialog box.</p>
            <a href = "#page2" data-transition = "slide">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>

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

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