Open In App

jQuery Mobile Toolbar backBtnText Option

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 16 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads