Skip to main content
 首页 » 编程设计

jquery-ui之替换 Jquery UI 1.9 选项卡中的 'url' 方法

2026年07月24日12lyj

我正在开发一个 Web 应用程序,并且使用 JQuery UI 选项卡取得了很大进展,特别是动态更新绑定(bind)到每个选项卡的 ajax 请求的目标 url 的“url”方法。我在这里创建了一个简化的示例:

2 个选项卡(功能 1 和功能 2)中的每一个都根据传递给测试的参数显示一些测试的结果。测试始终保持不变,但我通过操作绑定(bind)到选项卡的 url 来更改函数中使用的变量。更新在延迟加载选项卡上调用的 url 的“url”方法允许我执行此操作,但它现在已被弃用,并且很快将不再受支持。因此,我一直在寻找一种使用 JQuery UI 1.9 中的“beforeLoad”事件来执行此操作的方法。

建议可以操作 ui.ajaxSettings 来设置数据参数,但存在一个错误 ( http://bugs.jqueryui.com/ticket/8673 ),并且似乎不会修复。建议的解决方法是操作 ui.ajaxSettings.url。

我的工作示例如下,但我不确定这是否是实现我所追求的目标的最干净/最合适的方式,任何建议都将受到欢迎。我很难找到如何做到这一点的例子,所以希望它能帮助处于类似情况的其他人。

<title> Jquery Tabs AJAX Test</title> 
 
<script type="text/javascript" src="js/jquery-1.8.2.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.9.1.custom.js"></script> 
<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.9.1.custom.css"> 
 
</head> 
<body > 
 
<script type=text/javascript> 
    $(document).ready(function() { 
 
        $( '#tabs' ).tabs({  });  
 
         $('button.set_variable').click(function() {  
             var variable = $(this).val();  
             $( '#tabs' ).tabs({  
                 beforeLoad: function( event, ui ) {  
                     ui.ajaxSettings.url += "&variable=" + variable ;  
                     }  
                 });  
             var selected_tab = $('#tabs').tabs('option', 'selected');  
             $( '#tabs' ).tabs("load", selected_tab);  
          });  
     }) 
</script> 
 
    <button class="set_variable" value="1">Variable = 1</button>  
    <button class="set_variable" value="2">Variable = 2</button>  
    <button class="set_variable" value="3">Variable = 3</button>  
 
    <div id="tabs" >  
    <ul>  
         <li><a href="ajax.php?func=ajax-func1">Function 1 </a></li>  
         <li><a href="ajax.php?func=ajax-func2">Function 2 </a></li>  
    </ul>  
    </div>  
</body></html> 

注意这里的 ajax.php 文件只是回显传递给它的内容。

<?php 
    extract($_GET); 
    var_dump($_GET); 
?> 

请您参考如下方法:

你也可以做这样的事情:

var variable = ''; 
$( '#tabs' ).tabs({  beforeLoad: function( event, ui ) {  
    if(variable != '') 
         ui.ajaxSettings.url += "&variable=" + variable ;  
}});  
 
$('button.set_variable').click(function() {  
     variable = $(this).val();  
});  

http://jsfiddle.net/DNWzY/1/