English 中文(简体)
jQuery Tutorial

jQuery DOM Manipulation

jQuery CSS Manipulation

jQuery Effects

jQuery Traversing

jQuery UI

jQuery References

jQuery Plugins

jQuery Useful Resources

Selected Reading

jQuery - Theming
  • 时间：2024-09-17

jQuery - Theming

Previous Page Next Page  

Jquery has two different stypng themes as A And B.Each with different colors for buttons, bars, content blocks, and so on.

The syntax of J query theming as shown below −

<span data-role = "page" data-theme = "a|b">

A Simple of A theming Example as shown below −

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <pnk 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/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>
      <span data-role = "page" id = "pageone" data-theme = "a">
        <span data-role = "header">
            <h1>Tutorials Point</h1>
         </span>

         <span data-role = "main" class = "ui-content">
			
            <p>Text pnk</p>
            <a href = "#">A Standard Text Link</a>
            <a href = "#" class = "ui-btn">Link Button</a>
            <p>A List View:</p>
				
            <ul data-role = "pstview" data-autospaniders = "true" data-inset = "true">
               <p><a href = "#">Android </a></p>
               <p><a href = "#">IOS</a></p>
            </ul>
				
            <label for = "fullname">Input Field:</label>
            <input type = "text" name = "fullname" id = "fullname" 
               placeholder = "Name..">    
            <label for = "switch">Toggle Switch:</label>
				
            <select name = "switch" id = "switch" data-role = "spder">
               <option value = "on">On</option>
               <option value = "off" selected>Off</option>
            </select>
				
         </span>

         <span data-role = "footer">
            <h1>Tutorials point</h1>
         </span>
      </span>
   </body>
</html>

This should produce following result −