jQuery Mobile Toolbar option()方法

jQuery Mobile是一个基于HTML5的用户界面系统，旨在制作可在所有智能手机、平板电脑和桌面设备上使用的响应式网站和应用程序。jQuery Mobile的rangeslider widget是一个双柄滑块。滑块有一个最小值和一个最大值需要设置，我们可以从最小和最大之间的范围中选择。

在这篇文章中，我们将学习和实现jQuery Mobile Toolbar option() 方法。在option()方法的帮助下，我们可以获得，设置，和更新一个或多个工具栏选项。我们也可以用这个方法获得所有选项的键值对。

语法

1.我们可以在option(optionName )方法中绕过选项名称获得任何选项的值。optionName应该是一个字符串。

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

参数:

optionName。这是我们需要以字符串形式传递的输入，我们需要得到它的值。
return。返回我们传递的optionName的值。其类型取决于optionName。

2.我们可以通过调用option()方法来获得所有选项和它们的值。我们不需要向该方法传递任何东西。该值会以键值映射的形式返回。

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

parameter：我们需要调用选项方法。没有任何东西应该作为输入被传递。
return。我们得到所有选项的键值对列表，作为optionName-optionValue。

3.为了设置或更新任何选项，我们将选项名称和值传递给option(optionName, value)方法。工具栏会相应地被更新。

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

参数:

optionName。我们需要设置或更新的选项的名称。
value : 我们需要为optionName设置的值。

返回:

返回。没有返回对象，因为我们正在设置一个选项。

4.我们可以通过传递一个键值对数组来一次设置多个选项。我们需要调用option(options)方法。

options :它是选项名-值对的映射，作为输入来设置与传递的值相对应的选项，它是对象类型的。

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

CDN链接。为你的jQuery Mobile项目使用以下CDN链接。

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

例子:在下面的例子中，我们首先使用option(optionName) 获取方法打印了Toolbar的位置。然后我们有两个按钮，第一个是设置主题，第二个是打印所有选项的键值对。

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