Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Creating bottom-positioned icon selects using jQuery Mobile
Bottom-positioned icon selects in jQuery Mobile are enhanced dropdown menus where icons appear below the text in each option. These provide visual cues to users and offer a consistent mobile-optimized interface across different devices and platforms.
The jQuery Mobile selectmenu widget transforms standard HTML select elements into enhanced dropdowns with customizable icon positioning, native menu override capabilities, and responsive design features that adapt to various screen sizes.
Syntax
Following is the basic syntax for creating a bottom-positioned icon select
<select data-iconpos="bottom" data-native-menu="false"> <option value="value1" data-icon="iconname">Option Text</option> </select>
The key attributes are
data-iconpos="bottom"Positions icons below the option textdata-native-menu="false"Uses jQuery Mobile's enhanced menu instead of native browser dropdowndata-icon="iconname"Specifies the icon for each option
Basic Bottom-Positioned Icon Select
Following example demonstrates a simple bottom-positioned icon select with common navigation icons
<!DOCTYPE html>
<html>
<head>
<title>Bottom-Positioned Icon Select</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.1.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>Navigation Menu</h1>
</div>
<div role="main" class="ui-content">
<label for="nav-select">Choose a section:</label>
<select id="nav-select" data-iconpos="bottom" data-native-menu="false">
<option value="home" data-icon="home">Home</option>
<option value="about" data-icon="info">About Us</option>
<option value="services" data-icon="gear">Services</option>
<option value="contact" data-icon="mail">Contact</option>
</select>
</div>
</div>
</body>
</html>
The select menu displays options with icons positioned below the text, creating a visually appealing mobile-friendly interface.
Advanced Icon Select with Custom Styling
Following example shows a more advanced implementation with custom themes and additional styling
<!DOCTYPE html>
<html>
<head>
<title>Advanced Bottom Icon Select</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
.custom-select .ui-selectmenu-button {
background: linear-gradient(to bottom, #4a90e2, #357abd);
border: 1px solid #2a5a8a;
}
</style>
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header" data-theme="b">
<h1>Media Player Controls</h1>
</div>
<div role="main" class="ui-content">
<div class="custom-select">
<label for="media-select">Media Actions:</label>
<select id="media-select" data-iconpos="bottom" data-native-menu="false" data-theme="b">
<option value="play" data-icon="arrow-r">Play</option>
<option value="pause" data-icon="bars">Pause</option>
<option value="stop" data-icon="grid">Stop</option>
<option value="record" data-icon="recycle">Record</option>
<option value="volume" data-icon="audio">Volume</option>
</select>
</div>
<p id="selected-action" style="margin-top: 20px; font-weight: bold;">No action selected</p>
</div>
</div>
<script>
$(document).on("pagecreate", function() {
$("#media-select").selectmenu().on("change", function() {
var selectedText = $(this).find("option:selected").text();
$("#selected-action").text("Selected: " + selectedText);
});
});
</script>
</body>
</html>
This example includes custom styling, theme attributes, and JavaScript event handling to display the selected option.
Multiple Select with Bottom Icons
Following example demonstrates a multiple selection dropdown with bottom-positioned icons
<!DOCTYPE html>
<html>
<head>
<title>Multiple Bottom Icon Select</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.1.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>Feature Selection</h1>
</div>
<div role="main" class="ui-content">
<label for="features-select">Select Features:</label>
<select id="features-select" multiple data-iconpos="bottom" data-native-menu="false">
<option value="wifi" data-icon="cloud">WiFi</option>
<option value="gps" data-icon="location">GPS</option>
<option value="camera" data-icon="camera">Camera</option>
<option value="bluetooth" data-icon="power">Bluetooth</option>
<option value="storage" data-icon="grid">Storage</option>
</select>
</div>
</div>
</body>
</html>
The multiple attribute allows users to select multiple options from the dropdown, with each option displaying its icon below the text.
Key Attributes and Options
Following are the important attributes for bottom-positioned icon selects
| Attribute | Description | Values |
|---|---|---|
data-iconpos |
Controls icon position relative to text |
top, bottom, left, right, notext
|
data-native-menu |
Toggles between native and jQuery Mobile menu |
true, false
|
data-icon |
Specifies icon for individual options |
home, info, gear, mail, etc. |
data-theme |
Applies jQuery Mobile theme styling |
a, b, c, d, e
|
multiple |
Enables multiple option selection | Boolean attribute |
Alternative Implementation Methods
Using CSS-Only Dropdowns
Pure CSS dropdowns offer lightweight solutions with full customization control but require more manual styling for mobile responsiveness and may lack accessibility features.
Using Vanilla JavaScript
Custom JavaScript implementations provide maximum flexibility for dynamic content and advanced features but require more development time and cross-browser testing.
Using Bootstrap Dropdowns
Bootstrap dropdowns offer consistent styling across platforms with built-in responsive design but may not provide the same mobile-optimized experience as jQuery Mobile.
Browser Compatibility
jQuery Mobile selectmenu widgets work across all modern browsers including iOS Safari, Android Browser, Chrome Mobile, Firefox Mobile, and Internet Explorer 9+. The framework automatically handles touch events and provides fallbacks for older browsers.
Conclusion
Bottom-positioned icon selects in jQuery Mobile enhance user experience with visual cues and mobile-optimized interfaces. While they add framework overhead, they provide consistent cross-platform behavior, accessibility features, and responsive design that adapts to different screen sizes and orientations.
343 Views
