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, neveropen 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!
