Friday, May 15, 2020

Working with JQuery UI themes



Hello guys! Welcome to a new section of my tutorial on JQuery. In this tutorial am going to be discussing about how to create a theme using JQuery.

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

JQuery has two different styling themes. Each with different colors for buttons, content blocks, bars, etc.

Syntax

Below is the syntax for JQuery theming -

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

Example

Below is a simple example which shows 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 now 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 wrapping it up with this tutorial guide on JQuery theming. In my next tutorial, we will be discussing about JQuery Utilities. Feel free to ask your questions where necessary. 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 available. Also subscribe to our newsletter to get our tutorials delivered directly to your emails on daily basis.

Thanks for reading and bye for now.
Share:

0 comments:

Post a Comment