jQuery Mobile 工具栏 option() 方法

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

在本文中，我们将学习和实现jQuery Mobile Toolbar option() 方法。借助option() 方法，我们可以获取、设置和更新一个或多个 Toolbar 选项。我们还可以使用此方法将所有选项作为键值对获取。

句法

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

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

范围：

• optionName：这是我们需要以字符串形式传递的输入，我们需要为其获取值。
• 返回类型：返回我们传递的 optionName 的值。类型取决于 optionName。

2. 我们可以通过调用 option() 方法来获取所有选项及其值。我们不需要向该方法传递任何内容。该值作为键值映射返回。

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

• 参数：我们需要调用选项方法。不应将任何内容作为输入传递。
• 返回类型：我们得到所有选项的键值对列表作为optionName-optionValue。

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

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

范围：

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

返回类型：

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

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

• options ：它是optionName-value对作为输入的映射，用于设置与传递的值对应的选项，它是对象类型。

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

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

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

HTML

  

    
    
    
    
    
    
    
    

  

    
        GeeksforGeeks
    
    
        jQuery Mobile Toolbar option() Method
  
        Change Theme
        Print All Options
          
    
    
    $(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);
        });
    }
    

  

输出

参考： https://api.jquerymobile.com/toolbar/#method-option