博客

jQWidgets是一款强大的jQueryUI插件集，jqxRibbon是其中一个模块，用于创建具有Ribbon UI风格的Web界面，其中animationType属性是控制Ribbon下属的tabs和groups的动画效果类型。

animationType属性有三个取值：
– “none”：无动画效果
– “slide”：动画效果为滑动
– “fade”：动画效果为淡入淡出

示例一：无动画效果

<div id="ribbon">
    <ul>
        <li>File</li>
        <li>Edit</li>
    </ul>
    <div>
        <div id="file-group">
            <div>Open</div>
            <div>Save</div>
        </div>
        <div id="edit-group">
            <div>Cut</div>
            <div>Copy</div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        $('#ribbon').jqxRibbon({
            animationType: 'none'
        });
    });
</script>

上述代码创建了一个Ribbon和两个Tab。在初始化jqxRibbon时，设置了animationType属性为“none”，即无动画效果，此时点击tabs时，不会产生动画效果。

示例二：滑动动画效果

<div id="ribbon">
    <ul>
        <li>File</li>
        <li>Edit</li>
    </ul>
    <div>
        <div id="file-group">
            <div>Open</div>
            <div>Save</div>
        </div>
        <div id="edit-group">
            <div>Cut</div>
            <div>Copy</div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        $('#ribbon').jqxRibbon({
            animationType: 'slide'
        });
    });
</script>

上述代码创建了一个Ribbon和两个Tab。在初始化jqxRibbon时，设置了animationType属性为“slide”，此时点击tabs时，会产生从左到右的滑动动画效果。