JQuery Mobile in Hindi Buttons

First Page
Next Page

jQuery Mobile Automatically Button पर Click करता है और Button Type के Elements के साथ Document या किसी भी अन्य Input Element के साथ Submitted करता है.

jQuery Mobile में Buttons एक Core Widgets है और अन्य Plugins की एक Spacious Range के अन्दर उपयोग किया जाता है.

Buttons एक Markup Flexible होते है और इनको Links या Form Buttons से बनाया जा सकता है.

JQuery Mobile में Buttons का उपयोग Document को Submit, Reset, Button और Image के रूप में किया जाता है.

jQuery Mobile Button Widgets

<!DOCTYPE html> 
<html> 
   <head> 
      <title>jQuery Mobile Button Widgets</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" data-theme="b">
         <div data-role="header">
            <h1>Jquery Mobile Tutorial</h1>
         </div>        
         <div data-role="content">      
            <button>Normal Button</button> 
            <input type="submit" value="Submit Button" />
            <input type="reset" value=" Reset Button" />
            <input type="button" value="Input Button" />
         </div>
      </div>

   </body>
</html>

Output

jQuery Mobile Handling Button Events

जब हम Button पर Click करते है तो उस समय एक Default Action होता है और Button Click होने पर फौरन Default Action पर Performed करता है.

<!DOCTYPE html> 
<html> 
   <head> 
      <title>jQuery Mobile Handling Button Events</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>
      <script type="text/javascript">
        $(document).bind("pageinit", function() {           
            $('button, #btn1').bind("tap", function() {
                $.mobile.changePage("#mypage2");    
            })
        });
      </script> 		
   </head> 
   <body> 
      <div id="page1" data-role="page" data-theme="a">
         <div data-role="header">
            <h1>jQuery Mobile Tutorial</h1>
         </div>        
         <div data-role="content">      
            <button>Demo Button</button>
            <button id="btn1" data-role="button">Click Here to Navigate to Page 2</button>
         </div>
      </div>
      <div id="mypage2" data-role="page" data-theme="b">
         <div data-role="header">
            <h1>jQuery Mobile Tutorial</h1>
         </div>        
         <div data-role="content">
            This is Page 2
            <a href="#" data-role="button" data-rel="back">Back to Original Page</a>
         </div>
      </div> 

   </body>
</html>

Output

First Page
Next Page