jQuery Mobile Toolbar backBtnText Option
jQuery Mobile is a web technology used to create responsive web applications and websites which are accessible devices of different screen sizes. It is built on top of jQuery.
In this article, we will use the jQuery Mobile Toolbar backBtnText option. The backBtnText option accepts a string and works only if a back button is present on the header toolbar. You can add a back button to the header toolbar by using the toolbar’s addBackBtn option.
If the backBtnText is set to a string, the text of the back button will be set to that string.
Syntax:
$(".selector").toolbar({
backBtnText: "Previous Page"
});Get the backBtnText option:
var backBtnTxt = $( ".selector" )
.toolbar( "option", "backBtnText" );Set the backBtnText option:
$( ".selector" ).toolbar( "option", "backBtnTxt", "Previous" );
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>
Example: In this example, we will first add a back button to the header toolbar using the addBackBtn option and then set the backBtnText option to “Previous Page”.
HTML
<!DOCTYPE html><html lang="en"> <head> <title>Toolbar - backBtnText option</title> <link rel="stylesheet" href= <script src= </script> <script src= </script> <script> $(document).ready(function () { $("#divID2").toolbar({ addBackBtn: true, }); $( "#divID2" ).toolbar({ backBtnText: "Previous Page" }); }); </script> </head> <body> <div data-role="page" id="page1"> <center> <h2 style="color:green;">GeeksforGeeks</h2> <h3>Toolbar backBtnText option</h3> <div id="divID" 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="divID2" 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-backBtnText
Please Login to comment...