博客

jQWidgets jqxRibbon render()方法

  • Post category:jquery

以下是详细讲解“jQWidgets jqxRibbon render()方法”的完整攻略：

简介

jQWidgets是一个基于jQuery的UI库，其中的jqxRibbon是一种动态创建功能复杂的Ribbon界面的组件。jqxRibbon中的render()方法可以渲染jqxRibbon的UI。

语法

$(selector).jqxRibbon('render');

参数

该方法没有参数。

返回值

该方法没有返回值。

示例

示例一

HTML

<div id="jqxRibbonContainer">
    <ul>
        <li>Home</li>
        <li>Insert</li>
        <li>Page Layout</li>
        <li>Formulas</li>
        <li>Data</li>
        <li>Review</li>
    </ul>
    <div>Home</div>
    <div>Insert</div>
    <div>Page Layout</div>
    <div>Formulas</div>
    <div>Data</div>
    <div>Review</div>
</div>

JavaScript

$('#jqxRibbonContainer').jqxRibbon({
    position: 'top',
    mode: 'default',
    animationType: 'none'
});

$('#jqxRibbonContainer').jqxRibbon('render');

上述代码首先创建了一个具有6个标签页的jqxRibbon组件，然后使用render()方法渲染出UI。

示例二

HTML

<div id="jqxRibbonContainer">
    <ul>
        <li>Home</li>
        <li>Insert</li>
        <li>Page Layout</li>
        <li>Formulas</li>
        <li>Data</li>
        <li>Review</li>
    </ul>
    <div>Home</div>
    <div>Insert</div>
    <div>Page Layout</div>
    <div>Formulas</div>
    <div>Data</div>
    <div>Review</div>
</div>

JavaScript

$('#jqxRibbonContainer').jqxRibbon({
    position: 'top',
    mode: 'default',
    animationType: 'none'
});

$('#jqxRibbonContainer').jqxRibbon('render');

$('#jqxButton').jqxButton({})
$('#jqxButton').on('click', function () {
    $('#jqxRibbonContainer').jqxRibbon('addAt', 'New Tab', 1);
    $('#jqxRibbonContainer').jqxRibbon('render');
});

上述代码首先创建了一个具有6个标签页的jqxRibbon组件，然后使用render()方法渲染出UI。接下来，创建了一个jqxButton，当该按钮被点击时，在jqxRibbon中的位置1插入一个名为New Tab的标签页，并使用render()方法渲染出UI。

以上就是jQWidgets jqxRibbon render()方法的完整攻略了，希望对你有所帮助。

Tags: