Question

在Accordion jQuery功能中，如何在不使用UI插件的情况下使用左，右，上，下动态移动标签位置？

示例：有一个下拉列表中有四个值，分别是1.top 2.bottom 3.left和4.right

If i click on top -    Tabs should display top to bottom direction
If i click on bottom - Tabs should display bottom to top direction
If i click on left -   Tabs should display left to right direction
If i click on left -   Tabs should display right to left direction

Answer 1

您可以尝试以下代码。请注意，此代码不完整。你需要添加所有案例......

$("select").change(function() {
    var str = "";
    $("select option:selected").each(function() {
        str += $(this).text() + " ";
    });

    switch (str) {
    case 'top':
        $("#tabs").addClass("ui-tabs-vertical ui-helper-clearfix");
        $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
        break;

    case 'bottom':
        // fix the classes
        $( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *" )
            .removeClass( "ui-corner-all ui-corner-top" )
            .addClass( "ui-corner-bottom" );

        // move the nav to the bottom
        $( ".tabs-bottom .ui-tabs-nav" ).appendTo( ".tabs-bottom" );
        break;

    case 'left':
        // change the required classes
        break;

    case 'right':
        // change the required classes
        break;
    }
});

如何使用jQuery Accordion动态移动制表位置？

1 个答案: