jQWidgets jqxExpander render() 方法

jqxExpander 是 jQWidgets 的一个模块，可在网页中快速创建一个可折叠的视图控件。render() 方法是 jqxExpander 对象的一个方法之一，用于在 DOM 中渲染 jqxExpander 控件。

使用方法

准备工作

在使用 render() 方法前，需要先引入 jQWidgets 的 CSS 和 JS 文件，具体方式如下：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqxwidgets@12.0.0/dist/jqx.base.css">
<script src="https://cdn.jsdelivr.net/npm/jqxwidgets@12.0.0/dist/jqxcore.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jqxwidgets@12.0.0/dist/jqxbuttons.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jqxwidgets@12.0.0/dist/jqxexpander.js"></script>

HTML 结构

在 HTML 文件中创建一个 DOM 元素作为 jqxExpander 控件的容器，例如：

<div id="expander"></div>

初始化 jqxExpander 对象

在 JS 文件中初始化 jqxExpander 对象，设置控件的属性值，例如：

var options = {
    width: '300px',
    height: 'auto',
    theme: 'light',
    toggleMode: 'none',
    showArrow: false,
    expanded: false,
    content: 'This is the content of the expander control.'
};
$('#expander').jqxExpander(options);

渲染 jqxExpander 控件

使用 render() 方法将 jqxExpander 控件渲染到 DOM 中，例如：

$('#expander').jqxExpander('render');

参数说明

render() 方法没有参数。

返回值说明

render() 方法没有返回值。

示例

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqxwidgets@12.0.0/dist/jqx.base.css">
<script src="https://cdn.jsdelivr.net/npm/jqxwidgets@12.0.0/dist/jqxcore.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jqxwidgets@12.0.0/dist/jqxbuttons.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jqxwidgets@12.0.0/dist/jqxexpander.js"></script>
<div id="expander"></div>
<script>
    var options = {
        width: '300px',
        height: 'auto',
        theme: 'light',
        toggleMode: 'none',
        showArrow: false,
        expanded: false,
        content: 'This is the content of the expander control.'
    };
    $('#expander').jqxExpander(options);
    $('#expander').jqxExpander('render');
</script>

效果如下：