Boi*_*idy 5 jquery jquery-ui jquery-ui-tabs
我正在开发一个Web应用程序,并且正在使用JQuery UI选项卡取得很大进展,特别是动态更新绑定到每个选项卡的ajax请求的目标URL的"url"方法.我在这里创建了一个简化示例:
2个选项卡(功能1和功能2)中的每一个都根据传递给测试的参数显示某些测试的结果.测试始终保持不变,但我通过操纵绑定到选项卡的URL来更改函数中使用的变量.更新在延迟加载Tab上调用的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>
NB这里的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();
});
| 归档时间： |
|
| 查看次数： |
1778 次 |
| 最近记录： |