Skip to content
Related Articles

Related Articles

jQuery Mobile Toolbar backBtnText Option

View Discussion
Improve Article
Save Article
  • Last Updated : 31 Dec, 2021
View Discussion
Improve Article
Save Article

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 GeekforGeeks?
            </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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!