Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create Mini sized selects using jQuery Mobile
Overview
The jQuery provides the attributes with value by which the dropdown list is created without adding the external styling to the element. The mini sized selects with the help of jQuery mobile can also be created by setting the “data-mini” value as true. The dropdown list is created which helps to select the options from the list of given options.
Syntax
The simple HTML selects syntax is used in this to create a list −
<select> <option value=""></option> <option value=""></option> </select>
Content Delivery Network (CDN) Links
The given below links are used to import the functionality of jQuery mobile to our web page −
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
Algorithm
Step 1 − Create a HTML boilerplate code in any text editor VS Code, sublime, notepad, etc.
Step 2 − Insert the above given Content Delivery Network (CDN) links to the head tag of the code. The first CDN link is the styling link of jQuery mobile Cascading Style Sheet (CSS) which provides the styling to its component. The other two link the script link of jquery mobile which provides the functionality to the component.
Step 3 − Create a parent div container with the attribute “data-role”. Set the data-role attribute as “fieldcontain”.
Step 4 − Create a dropdown list with the select tag as mentioned in the above syntax. Add the data-mini attribute to it and set the data-mini attribute as true.
Step 5 − Insert the option tag and insert the data to it.
Step 6 − The mini sized selects with the help of jQuery are ready.
Example
In this example we had used two attributes which makes a mini sized ‘select’. The select is created simply with HTML. The select option is inserted inside the div container. The parent container is defined by the fieldcontain attributes value in the data-role attribute. The data-role attribute defines the current role for the element. To make the mini version of the selects the data-mini attribute is set to true. The data-mini attribute takes a Boolean value as value whether it can be True or False. The selected tag is inserted with the number of option tags with the inserted data in it which can be selected as per the user's choice.
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </script>
<title>Mini select Jquery</title>
</head>
<body>
<h1 style="text-align: center;">Mini Sized Selects jQuery Mobile</h1>
<div data-role="fieldcontain" style="width:20rem;margin: auto;">
<select data-mini="true">
<option>Option A</option>
<option>Option B</option>
<option>Option C</option>
<option>Option D</option>
</select>
</div>
</body>
</html>
Conclusion
Using the mini version of the selects dropdown list, it makes the font size, padding, margin slightly smaller then the as usual selects component in jQuery mobile. As we had linked the jQuery mobile Cascading Style Sheet (CSS) CDN link so it provides the styling to the component, which increase the look of the User Interface (UI).The mobile jQuery makes the selects responsive which can be viewed in any screen size whether it can be desktop, tablet, mobile etc.
143 Views
