jQuery Mobile Toolbar option() Method

Last Updated : 16 Jan, 2022

jQuery Mobile is an HTML5 based user interface system designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices. The rangeslider widget of jQuery Mobile is a double handle slider. The sliders have a min and a max value to be set and we can choose from the range in between min and max.

In this article, we are going to learn and implement jQuery Mobile Toolbar option() Method. With the help of option() method, we can get, set, and update one or more Toolbar options. We can also get all the options as key-value pairs using this method.

Syntax

1. We can get any option's value bypassing the option name in the option(optionName) method. optionName should be a string.

var positionOption = $(".gfg").toolbar("option", "position");

Parameter:

optionName: It is the input that we need to pass in form of a string for which we need to get the value.
Return type: Returns the value of the optionName we passed. The type depends on the optionName.

2. We can get all options with their values by just calling the option() method. We don't need to pass anything to the method. The value is returned as a key-value map.

var allOptions = $(".gfg").toolbar("option");

Parameter: We need to call the option method. Nothing should be passed as input.
Return type: We get the list of key-value pairs of all the options as optionName-optionValue.

3. To set or update any option, we pass the optionName and the value to the option(optionName, value) method. The Toolbar is updated accordingly.

$(".gfg").toolbar("option", "theme", 'b');

Parameter:

optionName: The name of the option that we need to set or update.
value: The value we need to set for the optionName.

Return type:

return: There is no return object as we are setting an option.

4. We can set multiple options at once by passing an array of key-value pairs. We need to call the option(options) method.

options: It is the map of the optionName-value pairs as input to set the options corresponding to the values passed, which is of the object type.

$(".gfg").toolbar("option", {theme: 'b', fullscreen: true});

CDN Links: Use the following CDN links for your jQuery Mobile project.

<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-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

Example: In the following example, we have first print the position of Toolbar using the option(optionName) get method. Then we have two buttons, first to set theme and second to print all the options as key-value pairs.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <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-1.11.1.min.js">
    </script>
    <script 
          src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
    </script>
</head>

<body>
    <div data-role="header" data-position="fixed" class="gfg">
        <h1>GeeksforGeeks</h1>
    </div>
    <div role="main" class="ui-content">
        <p>jQuery Mobile Toolbar option() Method</p>

        <button onclick="changeTheme()">Change Theme</button>
        <button onclick="printAllOptions()">Print All Options</button>
        
    </div>
    <script>
    $(document).ready(function() {
        var positionOption = $(".gfg").toolbar("option", "position");
        console.log("Theme Option: ",positionOption);
    });
    function changeTheme(){
        $(document).ready(function() {
            $(".gfg").toolbar("option", "theme", 'b');
        });
    }
    function printAllOptions(){
        $(document).ready(function() {
            var allOptions = $(".gfg").toolbar("option");
            console.log(allOptions);
        });
    }
    </script>
</body>

</html>

Output

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

jQuery Mobile Toolbar show() Method

manavsarkar07

Improve

Article Tags :

jQuery Mobile Toolbar option() Method

Similar Reads

Thank You!

What kind of Experience do you want to share?