jQWidgets jqxRibbon popupCloseMode 属性介绍

jQWidgets 是一个基于 jQuery 的 UI 组件库，其中 jqxRibbon 是其中的一个组件，用于展示具有标签页的菜单和工具栏等。jqxRibbon 组件中的 popupCloseMode 属性用于设置关闭弹出窗口的方式。

语法

$('#jqxRibbon').jqxRibbon({
    popupCloseMode: 'none/auto'
});

取值说明

| 取值 | 说明 | | ------- | ------------------------------------------------------------ | | none | 当用户点击页面上其他位置时，弹出窗口不会关闭。 | | auto | 当用户点击页面上其他位置时，弹出窗口会自动关闭。默认值。 |

使用示例

$("#jqxRibbon").jqxRibbon({
    width: '100%',
    height: 100,
    popupCloseMode: 'none',
    animationType: 'none',
    initContent: function () {
        // 添加选项卡
        var home = $('<div style="padding:10px;"><span>Home</span></div>');
        var settings = $('<div style="padding:10px;"><span>Settings</span></div>');
        var help = $('<div style="padding:10px;"><span>Help</span></div>');
        $("#jqxRibbon").jqxRibbon('addAt', "Home", home, 0);
        $("#jqxRibbon").jqxRibbon('addAt', "Settings", settings, 1);
        $("#jqxRibbon").jqxRibbon('addAt', "Help", help, 2);
        // 添加菜单组
        var fileMenu = $('<div><ul><li>New</li><li>Open...</li><li>Save</li><li>Save As...</li><li>Close</li></ul></div>');
        var editMenu = $('<div><ul><li>Undo</li><li>Redo</li><li>Copy</li><li>Paste</li><li>Select All</li></ul></div>');
        $("#jqxRibbon").jqxRibbon('addAt', "File", fileMenu, 0, "120px");
        $("#jqxRibbon").jqxRibbon('addAt', "Edit", editMenu, 1, "120px");
        // 添加工具组
        var printButton = $('<div>Print</div>');
        $("#jqxRibbon").jqxRibbon('addTool', "Print", printButton, "110px");
        // 显示弹出窗口
        var popup = $("<div style='padding:10px;'>Popup Window</div>");
        $("#jqxRibbon").jqxRibbon('openPopup', 'File', popup, $("#jqxRibbon").jqxRibbon('getTool', "Print"));
    }
});

以上代码将在页面上添加一个 jqxRibbon 组件，并设置 popupCloseMode 为 'none'，即点击页面上其他位置时弹出窗口不会关闭。在 initContent 回调函数中添加了选项卡，菜单组，工具组等，并显示了一个弹出窗口。

参考链接

• jQWidgets jqxRibbon documentation
• jQWidgets jqxRibbon popupCloseMode property