How to design form controls for mobiles using jQuery Mobile Square-UI Theme plugin ?

Photo of Namachila Namachila Send an email 6 days ago
0 0 3 minutes read

In this article, we will learn how to design the form controls for mobile-oriented applications using the jQuery Mobile Square-UI Theme plugin.

Prerequisite: Download the pre-compiled required library files from the given link and save it in your working folder for the following implementation.

Example 1:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content=
"width=device-width, initial-scale=1">
  
    <link rel="stylesheet" type="text/css" 
    href="css/jquery.mobile.squareui.css" />
  
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.4.0.min.js">
    </script>
</head>
  
<body>
    <h3>Example of buttons</h3>
    <div data-role="content" role="main">
        <fieldset class="ui-grid-a">
            <div class="ui-block-a">
                <button data-icon="flat-settings"
                    data-theme="a">
                    Button 1
                </button>
            </div>
            <div class="ui-block-b">
                <button data-icon="flat-new"
                    data-theme="b">
                    Button 2
                </button>
            </div>
            <div class="ui-block-a">
                <button data-icon="flat-man"
                    data-theme="c">
                    Button 3
                </button>
            </div>
            <div class="ui-block-b">
                <button data-icon="flat-mail"
                    data-theme="d">
                    Button 4
                </button>
            </div>
            <div class="ui-block-a">
                <button data-icon="flat-lock"
                    data-theme="e">
                    Button 5
                </button>
            </div>
            <div class="ui-block-b">
                <button data-icon="flat-menu"
                    data-theme="f">
                    Button 6
                </button>
            </div>
            <div class="ui-block-a">
                <button data-icon="flat-heart"
                    data-theme="g">
                    Button 7
                </button>
            </div>
        </fieldset>
    </div>
</body>
  
</html> 





















Output: 
 








Example 2:








HTML


















 






 




 



























<!DOCTYPE html> 


<html> 


  


<head> 


    <meta charset="utf-8" /> 


    <meta name="viewport" content= 


        "width=device-width,  


        initial-scale=1"> 


  


    <link rel="stylesheet" type="text/css" 


        href="css/jquery.mobile.squareui.css" /> 


  


    <script src="js/jquery.js"></script> 


    <script src= 


        "js/jquery.mobile-1.4.0.min.js"> 


    </script> 


  


    <style> 


        h3 { 


            padding: 15px; 


            margin: 0 auto; 


        } 


    </style> 


</head> 


  


<body> 


    <h3>Example of Checkboxes</h3> 


      <b>SELECT SUBJECTS</b> 


    <br> 


    <div data-role="fieldcontain"> 


        <fieldset data-role="controlgroup"> 


            <input type="checkbox" 


                name="checkbox-a" data-theme="c" 


                id="maths" checked="checked" /> 


                  


            <label for="maths">Maths</label> 


            <input type="checkbox" 


                name="checkbox-a" data-theme="c" 


                id="science" checked="checked" /> 


  


            <label for="science">Science</label> 


            <input type="checkbox" 


                name="checkbox-a" data-theme="c" 


                id="english" checked="checked" /> 


            <label for="english">English</label> 


        </fieldset> 


    </div> 


</body> 


  


</html> 












































Output:




Example 3:






HTML


















 






 




 



























<!DOCTYPE html> 


<html> 


  


<head> 


    <meta charset="utf-8" /> 


    <meta name="viewport" content= 


        "width=device-width,  


        initial-scale=1"> 


  


    <link rel="stylesheet" type="text/css" 


        href="css/jquery.mobile.squareui.css" /> 


  


    <script src="js/jquery.js"></script> 


  


    <script src= 


        "js/jquery.mobile-1.4.0.min.js"> 


    </script> 


  


    <style> 


        h3 { 


            padding: 15px; 


            margin: 0 auto; 


        } 


    </style> 


</head> 


  


<body> 


    <h2>Example of Collapsible set</h2> 


  


    <div data-role="collapsible-set" 


        data-theme="b" data-content-theme="b"> 


  


        <div data-role="collapsible" 


            data-collapsed-icon="flat-time" 


            data-expanded-icon="flat-cross"


            data-collapsed="false"> 


            <h3>First Section</h3> 


  


            <p>content for first section </p> 


        </div> 


  


        <div data-role="collapsible" 


            data-collapsed-icon="flat-calendar" 


            data-expanded-icon="flat-cross"> 


            <h3>Second Section</h3> 


  


            <p>content for second section </p> 


        </div> 


  


        <div data-role="collapsible" 


            data-collapsed-icon="flat-settings" 


            data-expanded-icon="flat-cross"> 


            <h3>Third Section </h3> 


  


            <p>content for third section</p> 


        </div> 


    </div> 


</body> 


  


</html> 












































Output: 
 




Example 4:






HTML


















 






 




 



























<!DOCTYPE html> 


<html> 


  


<head> 


    <meta charset="utf-8" /> 


  


    <meta name="viewport" content= 


        "width=device-width,  


        initial-scale=1"> 


  


    <link rel="stylesheet" type="text/css"


        href="css/jquery.mobile.squareui.css" /> 


  


    <script src="js/jquery.js"></script> 


  


    <script src= 


        "js/jquery.mobile-1.4.0.min.js"> 


    </script> 


  


    <style> 


        h3 { 


            padding: 15px; 


            margin: 0 auto; 


        } 


    </style> 


</head> 


  


<body> 


    <h2>Example of Link</h2> 


    <div data-role="fieldcontain" id="divID"> 


        <div data-role="controlgroup" 


            data-type="horizontal"> 


            <a href="#" data-icon="flat-mail" 


                data-theme="a" data-iconpos="notext"


                data-role="button"> 


                Yes 


            </a> 


            <a href="#" data-icon="flat-camera" 


                data-theme="a" data-iconpos="notext"


                data-role="button"> 


                Yes 


            </a> 


            <a href="#" data-icon="flat-heart" 


                data-theme="a" data-iconpos="notext"


                data-role="button"> 


                Yes 


            </a> 


            <a href="#" data-icon="flat-eye" 


                data-theme="a" data-iconpos="notext"


                data-role="button"> 


                Yes 


            </a> 


        </div> 


    </div> 


</body> 


  


</html> 












































Output: 
 






Example 5:






HTML


















 






 




 



























<!DOCTYPE html> 


<html> 


  


<head> 


    <meta charset="utf-8" /> 


    <meta name="viewport" content= 


        "width=device-width,  


        initial-scale=1"> 


  


    <link rel="stylesheet" type="text/css"


        href="css/jquery.mobile.squareui.css" /> 


  


    <script src="js/jquery.js"></script> 


  


    <script src= 


        "js/jquery.mobile-1.4.0.min.js"> 


    </script> 


  


    <style> 


        h3 { 


            padding: 15px; 


            margin: 0 auto; 


        } 


    </style> 


</head> 


  


<body> 


    <h3>Example of List</h3> 


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


        <ul data-role="listview" data-inset="true"> 


            <li data-role="list-divider" 


                data-theme="a"> 


                You can give a List Header 


            </li> 


  


            <li> 


                This is list item 


            </li> 


  


            <li> 


                <a href="#"> 


                    This is list item with link 


                </a> 


            </li> 


        </ul> 


    </div> 


</body> 


  


</html> 












































Output: 
 




Example 6:






HTML


















 






 




 



























<!DOCTYPE html> 


<html> 


  


<head> 


    <meta charset="utf-8" /> 


    <meta name="viewport" content= 


        "width=device-width,  


        initial-scale=1"> 


  


    <link rel="stylesheet" type="text/css" 


        href="css/jquery.mobile.squareui.css" /> 


  


    <script src="js/jquery.js"></script> 


  


    <script src= 


        "js/jquery.mobile-1.4.0.min.js"> 


    </script> 


  


    <style> 


        h3 { 


            padding: 15px; 


            margin: 0 auto; 


        } 


    </style> 


</head> 


  


<body> 


    <h3>Example of Radio Buttons</h3> 


      SELECT GENDER <br> 


    <div data-role="fieldcontain"> 


        <fieldset data-role="controlgroup"> 


            <input type="radio" name="radio-choice-a"


                data-theme="c" id="radio1" 


                value="choice-1" checked="checked" /> 


            <label for="radio1">Male</label> 


  


            <input type="radio" name="radio-choice-a"


                data-theme="c" id="radio2"


                value="choice-2" /> 


            <label for="radio2">Female</label> 


        </fieldset> 


    </div> 


</body> 


  


</html> 












































Output: 
 




Example 7:






HTML


















 






 




 



























<!DOCTYPE html> 


<html> 


  


<head> 


    <meta charset="utf-8" /> 


  


    <meta name="viewport" content= 


        "width=device-width,  


        initial-scale=1"> 


  


    <link rel="stylesheet" type="text/css"


        href="css/jquery.mobile.squareui.css" /> 


  


    <script src="js/jquery.js"></script> 


  


    <script src= 


        "js/jquery.mobile-1.4.0.min.js"> 


    </script> 


  


    <style> 


        h3 { 


            padding: 15px; 


            margin: 0 auto; 


        } 


    </style> 


</head> 


  


<body> 


    <h2>Example of Select dropdown</h2> 


  


    <div id="divID"> 


        <select name="flipID" id="flipID"


            data-role="slider"> 


            <option value="on" selected>On</option> 


            <option value="off">Off</option> 


        </select> 


    </div> 


</body> 


  


</html> 












































Output:






Example 8:






HTML


















 






 




 



























<!DOCTYPE html> 


<html> 


  


<head> 


    <meta charset="utf-8" /> 


    <meta name="viewport" 


    content="width=device-width, initial-scale=1"> 


    <link rel="stylesheet" type="text/css"


        href="css/jquery.mobile.squareui.css" /> 


    <script src="js/jquery.js"></script> 


    <script src= 


        "js/jquery.mobile-1.4.0.min.js"> 


    </script> 


    <style> 


        h3{ 


         padding:15px; 


         margin: 0 auto; 


        } 


      </style> 


</head> 


  


<body> 


    <h2>Example of Select choice</h2>    


    <div data-role="fieldcontain" id="divID"> 


        <label for="country">Country:</label>  


        <select name="select-choice" id="select-choice-a" 


            data-native-menu="false" data-theme="a"> 


            <option value="india">India</option> 


            <option value="australia">Australia</option> 


            <option value="china">China</option> 


            <option value="japan">Japan</option> 


        </select> 


    </div> 


</body> 


  


</html>












































Output: 
 




Example 9:






HTML


















 






 




 



























<!DOCTYPE html> 


<html> 


  


<head> 


    <meta charset="utf-8" /> 


    <meta name="viewport" 


    content="width=device-width, initial-scale=1"> 


    <link rel="stylesheet" type="text/css"


        href="css/jquery.mobile.squareui.css" /> 


    <script src="js/jquery.js"></script> 


    <script src= 


        "js/jquery.mobile-1.4.0.min.js"> 


    </script> 


    <style> 


        h3{ 


         padding:15px; 


         margin: 0 auto; 


        } 


      </style> 


</head> 


  


<body> 


    <h2>Example of Slider</h2>     


    <div data-role="fieldcontain" id="divID"> 


        <input type="range" name="slider"


            value="50" min="0"


            max="100" data-highlight="true" /> 


    </div> 


</body> 


  


</html>












































Output: 
 






Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!




			
		


				

			

				

						
							Photo of Namachila
						
					Namachila
						
							
							Send an email
						
					6 days ago
0 0  3 minutes read 


		

					

		


		

		

		

		
	


	
	


		
		


								

						
							Photo of Namachila						
					

					
			


											
Namachila

						
				

									


							

			

		

		


	





			

			
			

			

	

				


					

						
Related Articles

					


					


					
							


								
			
								
Length of diagonals of a Rhombus using length of Side and vertex Angle


								
11 minutes ago
							


						
							


								
			
								
Program to Calculate the Perimeter of a Decagon


								
11 minutes ago
							


						
							


								
			
								
Efficient method to store a Lower Triangular Matrix using Column-major mapping


								
11 minutes ago
							


						
							


								
			
								
Check if quantities of 3 distinct colors can be converted to a single color by given merge-pair operations


								
11 minutes ago
							


						
					

				


				


		

		
	

		
Leave a Reply 
Your email address will not be published. Required fields are marked *
 
 



 


 


 


	

	

	



	


	




	

	
	
	






		

		
		
			
			Back to top button