Working with JQuery UI themes



Hello dear readers! Welcome back to another edition of our tutorial on JQuery. In this tutorial post, we are going to be discussing about how to create a theme using JQuery.

Its a very short tutorial, make sure to read through carefully and ask your questions where necessary.

JQuery possess two different styling themes, each with different colors for buttons, content blocks, bars, etc.

Syntax

The following below is the syntax for JQuery theming -

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

Example

The following is a simple example which illustrates how to create a theme using JQuery -

<html>
     <head>
          <title>jQuery Example</title>

          <meta  name = "viewport"  content = "width = device-with,  initial-scale = 1">            <link  
               href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css "
                    rel = "stylesheet">

          <script  type = "text/javascript"   
               src = "https//code.jquery.com/jquery-1.11.3.min.js">                
          </script>  

          <script  type = "text/javascript"   
               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 = "header">
                    <h1>Web design tutorialz</h1>
               </div>

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

                    <p>Text link</p>
                    <a  href = "#">A Standard Text Link</a>
                    <a  href = "#"  class = "ui-btn">Link Button</a>
                    <p>A List View:</p>

                    <ul  data-role = "listview"  data-autodividers = "true"  data-inset = "true">
                         <li><a  href = "#">Android</a></li>
                         <li><a  href = "#">IOS</a></li>
                    </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 = "slider">
                         <option  value = "on">On</option>
                         <option  value = "of"  selected>Off</option>
                    </select>

               </div>

               <div  data-role = "footer">
                    <h1>Web design tutorialz</h1>
               </div>
          </div>
     </body>
</html>

You can try the above code out to see the result for yourselves.


Let us take a look at the second example -

<html>
     <head>
          <title>jQuery Example</title>

          <meta  name = "viewport"  content = "width = device-with,  initial-scale = 1">            <link  
               href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css "
                    rel = "stylesheet">

          <script  type = "text/javascript"   
               src = "https//code.jquery.com/jquery-1.11.3.min.js">                
          </script>  

          <script  type = "text/javascript"   
               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 = "b">
               <div  data-role = "header">
                    <h1>Web design tutorialz</h1>
               </div>

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

                    <p>Text link</p>
                    <a  href = "#">A Standard Text Link</a>
                    <a  href = "#"  class = "ui-btn">Link Button</a>
                    <p>A List View:</p>

                    <ul  data-role = "listview"  data-autodividers = "true"  data-inset = "true">
                         <li><a  href = "#">Android</a></li>
                         <li><a  href = "#">IOS</a></li>
                    </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 = "slider">
                         <option  value = "on">On</option>
                         <option  value = "of"  selected>Off</option>
                    </select>

               </div>

               <div  data-role = "footer">
                    <h1>Web design tutorialz</h1>
               </div>
          </div>
     </body>
</html>

You can try the above code out to see the result for yourselves.


Alright guys! This is where we are rounding up for this tutorial post. In our next tutorial guide, we are going to be discussing about the jQuery Utility Methods.

Do feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.