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 make Basic toolbars using jQuery Mobile?
The well-known and extensively used mobile UI framework jQuery Mobile provides a wide range of capabilities and components to build mobile-friendly and responsive web applications. Having simple and intuitive navigation is one of the key components of a successful user interface. Any mobile UI that provides rapid access to frequently used actions and menus must have toolbars. In this post, we'll go through two distinct methods for building fundamental toolbars with jQuery Mobile.
A web-based tool called jQuery Mobile is used to create responsive content that can be viewed on all cell phones, tablets, as well as personal computers. With jQuery Mobile, we'll create simple toolbars in this article.
Toolbar widget in JQuery
Elements that come before or after the content of the page are headers and footers. One can improve headers and footers using the toolbar widget.
In this article, we will go through two approaches with the jQuery UI mobile toolbar widget −
Approaches
To make a basic toolbar using jQuery Mobile we can follow the two methods −
Making a basic toolbar utilizing an unordered list with jQuery mobile.
Making a basic toolbar utilizing a fieldset with jQuery mobile in the footer.
Let us look into both approaches −
Approach 1
Make a basic toolbar utilizing an unordered list with jQuery mobile.
jQuery Mobile's "header" component in "fixed" position is the first method for building a simple toolbar. This approach is simple and easy to implement, that utilizes an unordered list with data-role as the toolbar, and lists to add options.
Algorithm
To make a basic toolbar utilizing jQuery Mobile, follow these steps −
Step 1 − Include all jQuery scripts and stylesheets to execute code with jQuery.
Step 2 − Set data-role as header, and data-iconpos as fixed for the div section.
Step 3 − Add data-role as a toolbar in the unordered list.
Step 4 − Add options in the list that have to be shown in the toolbar.
Step 5 − Add data-role = “content” for adding content in the body section of the page.
Example
<!DOCTYPE html>
<html>
<head>
<title>Basic Toolbar with jQuery UI</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
</head>
<body>
<div data-role="header" data-position="fixed">
<ul data-role="toolbar" data-iconpos="notext">
<li><a href="#" data-icon="home">Home</a></li>
<li><a href="#" data-icon="search">Services</a></li>
<li><a href="#" data-icon="plus">About</a></li>
<li><a href="#" data-icon="info">Contact</a></li>
</ul>
</div>
<div data-role="content">
<p>Content goes here</p>
</div>
</body>
</html>
Approach 2: Make a basic toolbar utilizing a fieldset with jQuery mobile in the footer
Utilize the fieldset tag with horizontal data type for the layout and add the options with the help of the button tag. Place the toolbar in the footer section so utilize a <div> with data-role as the footer.
Algorithm
To make a basic toolbar utilizing jQuery Mobile, follow these steps −
Step 1 − For adding a basic toolbar utilizing a fieldset add all jQuery scripts and stylesheets to execute code with jQuery.
Step 2 − In a div tag set data-role as header, and add content to the header section.
Step 3 − In a div tag set data-role as content, and add content to the content section.
Step 4 − In a div tag set data-role as footer, and add fieldset in it.
Step 5 − Create a tag fieldset with horizontal data-type.
Step 6 − Create the button tag for the option in the toolbar.
Example
<!DOCTYPE html>
<html>
<head>
<title>Basic Toolbar with jQuery UI</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.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!--Add header content-->
<div data-role="header" data-position="fixed">
<h1>Title Of Page</h1>
</div>
<!--Add statements to the main content part-->
<div data-role="content">
<p>Body Content goes here</p>
</div>
<!--Add toolbar to the footer section-->
<div data-role="footer" data-position="fixed">
<!--Add fieldset for the toolbar under the data-role as footer-->
<fieldset data-type="horizontal">
<!--Add buttons for teh options in the toolbar-->
<button data-icon="home">Home</button>
<button data-icon="search">Services</button>
<button data-icon="plus">About</button>
<button data-icon="info">Contact</button>
</fieldset>
</div>
</body>
</html>
Conclusion
In this article, we covered two methods for utilizing jQuery Mobile to build simple toolbars. In the first method, an unordered list with the data-role set as a toolbar is utilized, and in the second method, a fieldset with a horizontal data-type is utilized. These strategies offer a quick way to introduce menus as well as navigation choices to a mobile user interface (UI). Developers may quickly build simple toolbars for their jQuery Mobile-based web applications by following the instructions in this post and utilizing the provided example code.
28 Views
