Skip to content
Related Articles

Related Articles

jQuery Mobile Toolbar backBtnTheme Option

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

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.

HTML




<!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:

jQuery Mobile Toolbar backBtnTheme Option

Example 2: In this example we will initialize the toolbar with backBtnTheme specified to swatch “b”.

HTML




<!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:

jQuery Mobile Toolbar backBtnTheme Option

Reference: https://api.jquerymobile.com/toolbar/#option-backBtnTheme


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!