JQuery Mobile in Hindi Transitions

First Page
Next Page

jQuery Mobile का उपयोग करके हम एक Page से दूसरे Place पर Transition बनाते है और इससे हम एक Page से दूसरे Navigation Page पर आसानी से जा सकते है.

इस transition Effects को User द्वारा भी Configure किया जा सकता है और यह Property की Values को बदलने की अनुमति देता है जो Specified Duration पर होती है.

jQuery Mobile के एक Framework के साथ बहुत से Page Transitions का इस्तेमाल किया जा सकता है सभी Page Transitions CSS पर आधारित है.

जब हम इसमें Ajax Navigation का उपयोग करते है उस समय Page Transitions से लिंक किए गए Pages और Form के Submissions के बीच काम करते हैं.

Transition Description
Fade Fade का असर Default Transition पर प्रभाव पड़ता है जो की Next Page पर Fade हो.
Pop Popup Next Page पर एक Window की तरह चलती है.
Flip हम Next Page पर वापस आने के लिए सामने से Flip करते है.
Turn Next Page पर जाने के लिए हम Turn का उपयोग करते है.
Flow Flow से हम Current Page को Avoid करके Next Page पर दिखाई देता है.
Slidefade Slidefade में हम Next Page से Right से Left को Slidefade करते है.
Slide Slides में हम Next Page से Right से Left को Slidefade करते है.
Slideup Next Page पर नीचे की ओर Slide करें.
Slidedown ऊपर से नीचे तक की और Next Page पर Slide करें.

Transition Effects जो की Reverse/Backward कार्यों का समर्थन करती हैं. अगर आप Page को Left से Right से Instead के Right से Left Slide करना पड़ता है और इस के लिए हम Value Reverse के साथ data-direction Attribute का उपयोग करते है.

For Example

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src="http://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 Website</h1>
         </div>
 
         <div data-role="main" class="ui-content">
            <p>Click on the link to see the slide effect 
            (slides to the next page from right to left).</p>
            <a href="#pagetwo" data-transition="slide">Slide 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 Website</h1>
         </div>

         <div data-role="main" class="ui-content">
            <p>Click on the link to see the slide effect REVERSED 
            (slides to the previous page from left to right).</p>
            <a href="#pageone" data-transition="slide" 
            data-direction="reverse">Slide to Page One (reversed)</a>
         </div>

         <div data-role="footer">
            <h1>Footer Text</h1>
         </div>
			
      </div>

   </body>
</html>

Output

jQuery Mobile Data Transition Effects

jQuery Mobile में data-transition Attribute का उपयोग किसी दिए गए Element के अन्दर Link के Transition को Configure करने के लिए किया जाता है और किसी दूसरे Links के लिए Transition Effects से Unaffected रहते हैं.

For Example

<!DOCTYPE html> 
<html> 
<head> 
   <title>jQuery Mobile Data Transition Effects</title> 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
   <script src="http://code.jquery.com/jquery-2.1.3.js"></script>
   <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>	
</head> 
<body> 
<div id="page1" data-role="page">
        <div data-role="header">	
           <h1>jQuery Mobile Tutorial</h1>
        </div>        
        <div data-role="content">	
           jQuery Mobile Tutorials (page1)
           <p><a href="#page2" data-transition="flip">Visit Page 2</a></p>
          <!-- flip transition -->
        </div>
    </div>    
    <div id="page2" data-role="page">
        <div data-role="header">	
           <h1>jQuery Mobile Tutorial</h1>
        </div>        
        <div data-role="content">	
           jQuery Mobile Tutorials (page2)
           <p><a href="#page1">Visit page 1</a></p>
        </div>
   </div>  

</body>
</html>

Output

jQuery Mobile Transition effects

<!DOCTYPE html> 
<html> 
   <head> 
      <title>jQuery Mobile Page Transitions Effects</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
      <script src="http://code.jquery.com/jquery-2.1.3.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>	
   </head> 
<body> 
   <div id="page1" data-role="page">
      <div data-role="header">	
         <h1>jQuery Mobile Tutorial</h1>
      </div>        
   
      <div role="main" class="ui-content">
	      <a href="demoPage.html" data-role="button" 
         data-transition="pop"data-inline="true">pop</a>  
      
	      <a href="demoPage.html" data-role="button" 
         data-transition="turn" data-inline="true">turn</a> 
      
	      <a href="demoPage.html" data-role="button" 
         data-transition="slide" data-inline="true">slide</a>
      
         <a href="demoPage.html" data-role="button" 
         data-transition="slideup" data-inline="true">slideup</a>  
      
	      <a href="demoPage.html" data-role="button"
         data-transition="slidedown" data-inline="true">slidedown</a> 
      
	      <a href="demoPage.html" data-role="button" 
         data-transition="slidefade" data-inline="true">slidefade</a>
           
         <a href="demoPage.html" data-role="button" 
         data-transition="flip" data-inline="true">flip</a>
      
         <a href="demoPage.html" data-role="button"
         data-transition="flow" data-inline="true">flow</a>
      
	  </div>
  </div>

</body>
</html>

Output

First Page
Next Page