jQuery Mobile UI Elements
The goal of the HTML5-based jQuery Mobile user interface framework is to make creating mobile web apps easier. It enables the rapid development of apps that appear and function uniformly across a range of compatible mobile devices by offering a collection of touch-friendly user interface widgets and an AJAX-powered navigation mechanism. jQuery Mobile UI Elements heavy use of HTML5 custom data-attributes is a fundamental component of its operation. Without requiring a lot of custom JavaScript, jQuery Mobile UI Elements effectively turns basic semantic markup into complex user interface elements by selecting elements based on these attributes at initialisation and then improving them by adding additional markup, new CSS classes, and event handlers.
An examination of certain jQuery Mobile UI Elements mobile-optimized user interface elements is provided here:
Lists ()
Lists formatted graphically using jQuery Mobile UI Elements can resemble native mobile application designs quite a bit.
Basic List View: The data-role=”listview” attribute can be used to the <ul> or <ol> element to convert any ordered or unordered list into a list view.
Interactive Lists (Buttons): List view elements are not interactive by default, except for interactive lists (buttons). List item markup must have anchor tags (<a>) in order to create tappable buttons. After that,jQuery Mobile UI Elements styles them as buttons.
List View Dividers: Listing Dividers Set the data-role=”list-divider” property on any <li> element to divide lists with section headings.
Nested Lists: jQuery Mobile UI Elements is capable of handling nested lists, which it converts into interactive views that let users “drill down” by pressing on specific items. In addition to handling URL mapping and page transitions for these nested views, the framework automatically includes a back button.
Advanced Features: More complex list features are also supported by the library, such as split buttons (two tappable sections in a single list item), count bubbles (by adding markup with the ui-li-count class), thumbnails, and icons (by including <img> tags, with ui-li-icon class for icons).
Updating Lists: Lists can be updated by using the $(“ul.twitter-feed” refresh method exposed by the listview widget for dynamically inserted or removed items.A list view that has already been initialised can be updated by calling listview(“refresh”).
Example:
<!DOCTYPE html>
<html>
<head>
<title>List View</title>
<link 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/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>Fruits List</h1></div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Fruits</li>
<li><a href="#">Apple</a></li>
<li><a href="#">Banana</a></li>
<li><a href="#">Cherry</a></li>
</ul>
</div>
</div>
</body>
</html>Output:
Fruits List
Fruits
Apple
Banana
CherryButtons ()
jQuery Mobile UI Elements customises anchor links and native form buttons (using <input> or <button> components) into stylised buttons.
Basic Buttons: The data-role=”button” property turns a link into a button.
Inline Buttons: Inline buttons adapt to their element’s width. You may make buttons as wide as their content by setting data-inline=”true” for each button.
Button Control Groups: Buttons can be grouped into a single bar by applying data-role=”controlgroup” to the container and surrounding the buttons in a contained element (such as a div>). These are automatically arranged in a vertical list. In the container, add data-type=”horizontal” to make them horizontal.
Button Icons: There are numerous pre-made icons included with jQuery Mobile UI Elements. You can use the data-icon attribute to provide an icon (e.g., “home”) and position it (e.g., “left” or “notext” to hide text). CSS lets you build custom icons.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Buttons</title>
<link 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/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>Buttons</h1></div>
<div data-role="content">
<a href="#" data-role="button" data-icon="home">Home</a>
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button">Yes</a>
<a href="#" data-role="button">No</a>
</div>
</div>
</div>
</body>
</html>Output:
Buttons
Home
Yes NoDialogs ()
You can display any valid jQuery Mobile website as a dialogue box.
Creating Dialogs: To open a page as a modal conversation, add the data-rel=”dialog” property to the link.
Appearance: This property tells jQuery Mobile UI Elements to add drop shadows, rounded corners, and margins to the page, making it appear to hover over the application.
Navigation: Due to their modal nature, dialogues are typically excluded from the browser’s history hash.
Manual Control: You can manually display an error dialogue by changing its contents and then programmatically causing a hidden button connected to the dialogue page to click.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Dialog</title>
<link 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/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- Main Page -->
<div data-role="page" id="mainPage">
<div data-role="header"><h1>Main Page</h1></div>
<div data-role="content">
<a href="#dialogPage" data-rel="dialog" data-role="button">Open Dialog</a>
</div>
</div>
<!-- Dialog Page -->
<div data-role="page" id="dialogPage">
<div data-role="header"><h1>Dialog</h1></div>
<div data-role="content">
<p>This is a simple dialog window.</p>
<a href="#mainPage" data-role="button" data-rel="back">Close</a>
</div>
</div>
</body>
</html>Output:
Main Page
Open DialogForms
For touch-enabled user interfaces, jQuery Mobile automatically improves native HTML form components.
Form Field Grouping: Visually arrange form components with data-role=”fieldcontain” in a fieldset or div.
AJAX Submission: jQuery Mobile uses AJAX to automatically process form submissions. To prevent this behaviour for a particular form, put data-ajax=”false” to the form tag.
Disabling Enhancement: Use the data-role=”none” property to stopjQuery Mobile UI Elements from improving a form element or the entire form.
Specific Form Elements
Checkboxes and Radio Buttons: Checkboxes and radio buttons have been improved to resemble buttons. Additionally, they can be grouped using data-role=”controlgroup” and data-type=”horizontal” into either vertical or horizontal control groups. These are managed by the checkboxradio widget.
Flip Toggle: A popular mobile user interface element that lets users switch between two values (such “on” and “off”). It is made by adding data-role=”slider” to a <select> element that has two alternatives. For this, the slider widget is used.
Input Fields and Textareas: By default, input fields and textareas are given visual improvements like shadows and rounded edges. Additionally, input fields can display the proper keyboards on mobile devices by utilising HTML5 type parameters (such as type=”number”). To avoid scrollbars, textareas automatically enlarge in height. For these, the textinput plugin is used.
Search Fields: These are input fields that have been decorated with a magnifying glass search icon that changes to a clear icon (“x”) as the user types. Applying type=”search” to an input field creates them.
Select Menus: jQuery Mobile UI Elements has the option of creating a custom-styled select widget or using the platform’s built-in one. You must use data-native-menu=”false” to enforce the custom style. Custom menus for selection accommodate numerous choices, disabled options, optgroup tags for grouping, and placeholders. Select menu management is done by the selectmenu widget.
Sliders: By moving a cursor across a range, users can choose a value from these items. Type=”range” and the min and max attributes are applied to an input field to generate them. They are operated by the slider mechanism.
The development of mobile web applications is greatly streamlined by these components, which are made to offer a unified and touch-friendly experience across a range of mobile devices.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Form Elements</title>
<link 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/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>Form Elements</h1></div>
<div data-role="content">
<form>
<label for="flip">Flip Toggle:</label>
<select id="flip" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
<label for="range">Slider:</label>
<input type="range" name="range" id="range" min="0" max="100" value="25">
<label for="search">Search Field:</label>
<input type="search" name="search" id="search">
<input type="submit" value="Submit" data-role="button">
</form>
</div>
</div>
</body>
</html>Output:
Form Elements
Flip Toggle:
Off
Slider:
30
Search Field:
SubmitConclusion
In conclusion, the development of touch-optimized mobile web applications is made easier with the help of the robust HTML5-based framework jQuery Mobile. Standard elements are transformed into rich, interactive UI components with minimum JavaScript by utilising semantic HTML and specific data-* properties. Features like stylised buttons, dialogue boxes, mobile-friendly form components, and improved list views assist developers in making apps that provide a consistent and native-like experience on a variety of devices. Because of its modular design, jQuery Mobile is a great option for creating accessible and responsive mobile web interfaces quickly and easily.