代码之家 › 专栏 › 技术社区 › Natkeeran

Jquery选项卡使用参数重新加载

jquery jquery-ui javascript

Natkeeran · 技术社区 · 17 年前

但是,我如何用它发送参数呢?

5 回复 | 直到 15 年前

rpjohnst 17 年前

// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }

    return vars;
}

然后,您可以获取url变量并相应地调整选项卡(我一个小时前刚刚在一个项目上做过这个!!)

idrumgood 17 年前

您可以在选项卡中加载其他URL以发送get参数。

PetersenDidIt 17 年前

你可以这样做:

var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected');
var newurl = "ajax/tab3.html?extraparm=4";
$tabs.tabs( 'url' , selected , newurl );
$tabs.tabs( 'load' , selected);

jquery ui选项卡插件没有一个简单的函数来获取当前选定选项卡的url,但如果你做这样的事情,你就可以得到它:

$tabs.find('.ui-tabs-selected a').data('href.tabs');

var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected');
var extraData = {extraparm:4,otherparm:'foo'};
$tabs.tabs('option', 'ajaxOptions', { data: extraData });
$tabs.tabs( 'load' , selected);
$tabs.tabs('option', 'ajaxOptions', { data: {} });

Neo 15 年前

我假设你指的是GET参数,你想从表单元素中获取它们,如输入文本框、选择框和。..但我也为不符合此逻辑或您想手动传递给函数的参数添加了extraParams参数:

function reloadTabWithParams(extraParams) {
   formParams = jQuery('#someSelectBox').attr('id) +'='+ jQuery('#someSelectBox').val() ;
   //formParams += whatever els....
   var tabIndex = jQuery('#tabs').tabs('option', 'selected');
   dataParam = typeof(extraParams) != 'undefined' ? extraParams+'&'+formParams : formParams;
   jQuery('#tabs').tabs('option', 'ajaxOptions', { data: dataParam });
   jQuery('#tabs').tabs( 'load' , tabIndex);
   jQuery('#tabs').tabs('option', 'ajaxOptions', { data: {} })
}

我忘了使用tabIndex而不是jQuery(“#tabs”),但你应该这样做。

Chris Wininger 13 年前

仅供参考,1.10版本中的实现方式发生了变化。在1.9版本中,他们弃用了“ajaxOptions”。这是我一直在使用的方法。截至1.10,该技术根本不起作用。相反,您必须按照以下步骤操作

古老的方式 $(“#tabs”).tabs({ 密码:“bar” } });

新的方式

$( "#tabs" ).tabs({
    beforeLoad: function( event, ui ) {
        ui.ajaxSettings.username = "foo";
        ui.ajaxSettings.password = "bar";
    }
});

这来自 http://jqueryui.com/upgrade-guide/1.9/#deprecated-ajaxoptions-and-cache-options-added-beforeload-event