jQWidgets jqxRibbon initContent 属性

简介

jQWidgets jqxRibbon 是一个常用的UI库，提供了高度自定义的Ribbon菜单UI组件，通过 initContent 属性，可以在组件初始化时设置内容，达到更好的定制化效果。

语法

$('#jqxRibbon').jqxRibbon({
  initContent: function () {
    // 在此处设置需要展示的内容
    return [{
      type: 'panel',
      label: '面板1',
      initContent: function () {
        return $('<div>这是第一个面板的内容</div>');
      }
    }];
  }
});

参数说明

type

• 类型：String（必选）
• 说明：指定展示的类型，目前支持 'panel'，表示展示面板

label

• 类型：String（必选）
• 说明：指定面板对应的标签名，用于在 UI 上展示

initContent

• 类型：Function（必选）
• 说明：返回一个表示面板内容的 HTML 元素

示例

HTML

<div id="jqxRibbon"></div>

JS

$('#jqxRibbon').jqxRibbon({
  initContent: function () {
    // 创建两个面板，以及按钮组件
    var panels = [{
      type: 'panel',
      label: '面板1',
      initContent: function () {
        return $('<div>这是第一个面板的内容</div>');
      }
    }, {
      type: 'panel',
      label: '面板2',
      initContent: function () {
        return $('<div>这是第二个面板的内容</div>');
      }
    }];

    var button = $('<div>按钮</div>');
    button.on('click', function () {
      // 切换展示的面板
      $('#jqxRibbon').jqxRibbon('selectAt', 1);
    });

    // 返回包括两个面板以及按钮的元素
    return [panels, button];
  }
});

结语

jQWidgets jqxRibbon 的 initContent 属性可以帮助开发者更好地控制 Ribbon 菜单的展示内容。熟练掌握 initContent，可以让 Ribbon 菜单更加灵活、智能、易于使用。