JQuery Mobile in Hindi Themes

First Page
Next Page

Themes का उपयोग करके Buttons, Navbars, Blocks, Links आदि को बहुत Attractive बना सकते है.

jQuery Mobile मे Theme एक Framework है जो Toolbar, Content और Button Colors के 26 Set को Support करता है जिसको Swatch कहा जाता है.

jQuery Mobile आपको Two Independent Style Themes A और B Provide करता है.

jQuery Mobile Themes के पास Bars, Buttons, Content Blocks आदि के लिए अलग Colors होते है.

किसी भी Applications के लिये Custom Themes को बनाने के लिये Attribute data-theme का उपयोग किया जाता है.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery Mobile Themes Example</title>
      <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="pageone" data-theme="a">
         <div data-role="panel" id="panel1">
            <h2>This is a Header</h2>
            <p>You can close this board by squeezing the Esc key or by swiping.</p>
         </div>
         
         <div data-role="header">
            <h2>Header Tutorialsroot</h>
         </div>
         
         <div data-role="main" class="ui-content">
            <button class="ui-btn">Button</button>
            <p>Click on the button to open Panel.</p>
            <a href="#panel1" class="ui-btn ui-btn-inline">Open Panel</a>
            <p>List View:</p>
            <ul data-role="listview" data-autodividers="true">
               <li><a href="#">United States</a></li>
               <li><a href="#">China</a></li>
               <li><a href="#">Japan</a></li>
            </ul><br>
            <a href="#popup_menu" data-rel="popup" data-transition="slidedown" 
               class="ui-btn ui-btn-inline ui-icon-home ui-btn-icon-left ui-btn-a">
               Click to see menu items</a>
            
            <div data-role="popup" id = "popup_menu" data-theme="a">
               <ul data-role="listview">
                  <li data-role="list-divider">Select your choice</li>
                  <li><a href="#">United States</a></li>
                  <li><a href="#">Japan</a></li>
                  <li><a href="#">Australia</a></li>
                  <li><a href="#">China</a></li>
               </ul>
            </div>
         </div>
         
         <div data-role="footer">
            <h2>Copyright 2017. All Rights Reserved.Tutorialsroot.com</h2>
         </div>
      </div>
      
   </body>
</html>

Output

First Page
Next Page