JQuery Mobile in Hindi Popup

First Page
Next Page

Popup को Create करने के लिये हम Popup Contents के साथ एक Div में data-role="popup" के Attribute को जोड़ते है.

फिर Popup Div में Id को Set करने के लिये Href Set के साथ एक Link बनाते है और Link को Tap किए जाने पर Popup को Open करने के लिए और Framework को बताने के लिए Attribute data-rel="popup" को Add करते है.

jQuery Mobile में Popup पर एक छोटी सी Window है जो Foreground में अचानक से आती है. इसका उपयोग Text, Images और Data को Display करने के लिये किया जाता है.

jQuery Mobile PopUp Widget

jQuery Mobile में Popup Widget को एक Div Container के अन्दर Attribute data-role="popup" का उपयोग करके बनाया जाता है. यह एक Popup को बनाता है और उसमें Content को Display करता है.

For Example

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset="utf-8">
      <title>PopUp Widget Example</title> 
      <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0;">
      <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 data-role="page" id="demoPage">

         <div data-role="header">
            <h1>jQuery Mobile PopUp Widget</h1>
         </div> 

         <div data-role="content">
            <div role="main" class="ui-content"> 
               <a href="#demoPopUp" data-rel="popup" data-role="button"
               data-inline="true">Click to Open Popup</a>

               <div data-role="popup" id="demoPopUp">
                  <p>A Basic Popup with No Enhancement</p>
               </div>
            </div>

            <small>Click on the Button to Open Popup </small>
         </div>


         <div data-role="footer">
            <h3>jQuery Mobile PopUp Widget</h3>
         </div>		
      </div>
   </body>
</html>

Output

PopUp Widget with Menus

Checkbox का उपयोग करके एक Default Standard Flip Switch को बनाया गया है और या Input में Rounded Corners करके लेकिन Users के पास यह Option data-corners="false" होता है.

For Example

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset="utf-8">
      <title>PopUp Widget Menus and Nested Menu</title> 
      <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0;">
      <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 data-role="page" id="demoPage">

         <div data-role="header">
            <h1>jQuery Mobile PopUp</h1>
         </div> 

         <div data-role="content">
            <div role="main" class="ui-content"> 

               <a href="#simpleMenu" data-rel="popup" data-role="button"
               data-inline="true">Simple Menu</a>  <!-- Menu 1 Button-->

               <a href="#nestedMenu" data-rel="popup" data-role="button"
               data-inline="true">Nested menu</a> <!-- Menu 2 Button-->

               <!-- Simple PopUp Menu -->
               <div data-role="popup" id="simpleMenu" data-theme="a">
                  <ul data-role="listview" data-inset="true" 
                     style="width:220px;" data-theme="b">
                     <li data-role="divider" data-theme="a">EDIT</li>
                     <li><a href="#">Cut</a></li>
                     <li><a href="#">Copy</a></li>
                     <li><a href="#">Paste</a></li>
                  </ul>
               </div>

               <!-- Nested Popup Menu-->
               <div data-role="popup" id="nestedMenu" data-theme="none">
                  <div data-role="collapsible-set"  data-collapsed-icon="plus" 
                     data-expanded-icon="minus" style="width:200px;">

                     <div data-role="collapsible" data-inset="false">
                        <h2>Planets</h2>
                        <ul data-role="listview">
                           <li><a href="#">Earth</a></li>
                           <li><a href="#">Mars</a></li>
                           <li><a href="#">Jupiter</a></li>
                           <li><a href="#">Saturn</a></li>
                        </ul>
                     </div><

                     <div data-role="collapsible" data-inset="false">
                        <h2>Countries</h2>
                        <ul data-role="listview">
                           <li><a href="../dialog.html" data-rel="dialog">USA</a></li>
                           <li><a href="../dialog.html" data-rel="dialog">India</a></li>
                           <li><a href="../dialog.html" data-rel="dialog">Russia</a></li>
                           <li><a href="../dialog.html" data-rel="dialog">Germany</a></li>
                        </ul>
                     </div>< 


                  </div>< 
               </div>< 

            </div>

            <small>Click on the Button to Open Popup </small>
         </div>


         <div data-role="footer">  
            <h3>PopUp Widget Menus and Nested Menu</h3>
         </div>		
      </div>
   </body>
</html>

Output

First Page
Next Page