jQuery Mobile is a set of HTML5 based user system interaction widget toolbox used for various purposes build on top of jQuery. It is designed to build fast and responsive sites accessible to mobile, tabs, and desktops.
In this article, we will use the jQuery Mobile Toolbar backBtnTheme option. The Toolbar backBtnTheme option is used to set the color scheme for the back button of the toolbar. It accepts a single letter (a-z) which maps to a swatch in the theme.
Syntax:
Initialize the toolbar with the backBtnTheme option specified:
$( ".selector" ).toolbar({
backBtnTheme: "b"
});-
Get the backBtnTheme option, after initialization:
var backBtnTheme = $( ".selector" ) .toolbar( "option", "backBtnTheme" ); -
Set the backBtnTheme option, after initialization:
$( ".selector" ).toolbar( "option", "backBtnTheme", "b" );
CDN Links:
<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-2.1.3.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js”></script>
The below examples demonstrate the jQuery Mobile Toolbar backBtnTheme option.
Example 1: In this example we will initialize the toolbar without backBtnTheme specified.
<!DOCTYPE html> <html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script>
$(document).ready(function () {
$("#GFG2").toolbar({
addBackBtn: true,
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Toolbar backBtnTheme option</h3>
<div id="GFG" data-role="header">
<h1> Header Toolbar</h1>
</div>
<br>
<a href="#page2">Go to Page2</a>
</center>
</div>
<div data-role="page" id="page2">
<div id="GFG2" data-role="header">
<h1> Header Toolbar</h1>
</div>
<center>
<h2 style="color: green;">
What is GeeksforGeeks?
</h2>
<p style="padding: 0px 20px;">
GeeksforGeeks is a computer science
portal for geeks by geeks. Here
you can find articles on various
computer science topics like Data
Structures, Algorithms and many more.
</p>
</center>
</div>
</body>
</html>
|
Output:
Example 2: In this example we will initialize the toolbar with backBtnTheme specified to swatch “b”.
<!DOCTYPE html> <html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script>
$(document).ready(function () {
$("#GFG2").toolbar({
addBackBtn: true,
});
// Initialize backBtn's theme with swatch "b"
$("#GFG2").toolbar({
backBtnTheme: "b"
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<center>
<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Toolbar backBtnTheme option</h3>
<div id="GFG" data-role="header">
<h1> Header Toolbar</h1>
</div>
<br>
<a href="#page2">Go to Page2</a>
</center>
</div>
<div data-role="page" id="page2">
<div id="GFG2" data-role="header">
<h1> Header Toolbar</h1>
</div>
<center>
<h2 style="color: green;">
What is GeeksforGeeks?
</h2>
<p style="padding: 0px 20px;">
GeeksforGeeks is a computer science
portal for geeks by geeks. Here
you can find articles on various
computer science topics like Data
Structures, Algorithms and many more.
</p>
</center>
</div>
</body>
</html>
|
Output:
Reference: https://api.jquerymobile.com/toolbar/#option-backBtnTheme