通过 Ajax 在 jQuery UI tabs() 中将“href”作为数据传递

Question

我在页面的“index.php”中有一些选项卡（jQuery UI 选项卡）。此页面不仅显示内容，还检索$_GET 变量以显示选项卡下方的一些其他内容。

问题是如何告诉 jQuery UI href（点击的属性）是键“href”的值，它必须发送（GET）到当前 index.php 页面，在 JS 中调用有window.location.pathname（我不能使用 PHP 生成的 JavaScript）。

代码是这样的，我无法选择如何使事情正常运行。

jQuery('#front-tab').tabs({
    spinner: "Loading...",
    select: '#tab-one',
    cache: true,
    fx: {  height: 'toggle', opacity: 'toggle' },
    url: window.location.pathname,
    ajaxOptions: {
        type: 'get',
        success: function(){alert('Sucess');},
        error: function(){alert('I HAZ FAIL');};
        },
        dataType: 'html'
    }
});

HTML：

<div id="front-tab">
    <ul>
        <li><a href="#tab-home"><span>Home</span></a></li>
        <li><a href="tab-1"><span>Tab Content 1</span></a></li>
        <li><a href="tab-2"><span>Tab Content 2</span></a></li>
        <li><a href="tab-3"><span>Tab Content 3</span></a></li>
        <li><a href="tab-4"><span>Tab Content 4</span></a></li>
    </ul>
    <div id="tab-home">
        content...
    </div>
</div>

是的，每次我尝试加载其他标签时，这都会让我充满“我失败了”。第一个选项卡是内联 HTML，但其余的是 Ajax。 url: window.location.pathname 似乎不起作用或指向正确的方向。好吧，我不知道这是否符合我的要求。

Answer 1

function initTabs(elementHref) {
    jQuery('#front-tab').tabs({
        spinner: "Loading...",
        select: '#tab-one',
        cache: true,
        fx: {  height: 'toggle', opacity: 'toggle' },
        url: elementHref,
        ajaxOptions: {
            type: 'get',
            success: function(){alert('Sucess');},
            error: function(){alert('I HAZ FAIL');};
            },
            dataType: 'html'
        }
    });
}

jQuery('yourLink').on('click', function() {
    initTabs(jQuery(this).attr('href'));
});

Answer 2

好吧，在注意到 jQuery UI 选项卡的不灵活性之后，我不得不自己复制该操作。更好的是，与两个插件相比，只需几行代码。

front_tab.click(function(e) {
    // Content parent
    tab_content = $('#tab-content');

    // other variables
    var tab_visible = tab_content.children('div.visible'),
        span = $(this).children('span'),
        span_value = span.html(),
        value = $(this).attr('href'),
        // This gets our target div (if exists)
        target = tab_content.children(value);

    // There is no anchor
    e.preventDefault();

    // Don't do nothing if we are animating or "ajaxing"
    if (tab_content.children().is(':animated') || is_ajaxing) { return; };

    // Put the "selected" style to the clicked tab
    if (!$(this).hasClass('selected')) {
        front_tab.removeClass('selected');
        $(this).addClass('selected');
    }

    // If is target div, call it
    if (target.length > 0) {
        is_ajaxing = true;
        span.html('Loading...');
        tab_content.children().removeAttr('class');
        tab_visible.slideUp('slow', 'swing', function(){
            // Some timeout to slow down the animation
            setTimeout(function() {
                target.attr('class', 'visible').slideDown('slow');
                if (value = '#tpopular') { update_postbox(); }
                is_ajaxing = false;
                span.html(span_value)
            }, 400);
        });
    // So, the target div doesn't exists. We have to call it.
    } else {
        is_ajaxing = true;
        span.html('Cargando...');
        $.get(
        window.location.pathname,
        { href : value },
        function(data) {
                tab_visible.slideUp('slow', 'swing', function(){
                    setTimeout(function() {
                        tab_content.children().removeAttr('class');
                        tab_content
                            .append(unescape(data))
                            .children(value)
                            .css('display', 'none')
                            .attr('class', 'visible')
                            .slideDown('slow');
                        if (value = '#tpopular') { update_postbox(); }
                        is_ajaxing = false;
                        span.html(span_value)
                    }, 800);
                });
            },
        'html');
    }
});

下一个问题是发出漂亮的错误警告，但这就是解决方案。