我知道之前已经问过这个具体问题,但是我没有bind()在jQuery UI Tabs插件上使用该事件获得任何结果.
index单击选项卡时,我只需要新选择的选项卡即可执行操作.bind()允许我挂钩到select事件,但我通常的获取当前选定选项卡的方法不起作用.它返回先前选择的选项卡索引,而不是新选项卡索引:
var selectedTab = $("#TabList").tabs().data("selected.tabs");
以下是我尝试用于获取当前所选标签的代码:
$("#TabList").bind("tabsselect", function(event, ui) {
});
当我使用这段代码时,ui对象会回来undefined.从文档中,这应该是我用来使用ui.tab挂钩到新选择的索引的对象.我在最初的tabs()电话会议上也尝试了这一点.我在这里做错了吗？
当使用Google Maps API在jQuery UI选项卡中呈现地图时,有许多问题似乎都是众所周知的.我已经看到关于类似问题发布的SO问题(例如这里和这里),但那里的解决方案似乎只适用于Maps API的v2.我检查过的其他参考文献在这里和这里,以及我可以通过谷歌搜索挖掘的几乎所有内容.
我一直在尝试将地图(使用API的v3)填充到具有混合结果的jQuery选项卡中.我正在使用最新版本的一切(目前jQuery 1.3.2,jQuery UI 1.7.2,不了解Maps).
这是标记和javascript:
<body>
<div id="dashtabs">
<span class="logout">
<a href="go away">Log out</a>
</span>
<!-- tabs -->
<ul class="dashtabNavigation">
<li><a href="#first_tab" >First</a></li>
<li><a href="#second_tab" >Second</a></li>
<li><a href="#map_tab" >Map</a></li>
</ul>
<!-- tab containers -->
<div id="first_tab">This is my first tab</div>
<div id="second_tab">This is my second tab</div>
<div id="map_tab">
<div id="map_canvas"></div>
</div>
</div>
</body>
和
$(document).ready(function() {
var map = null;
$('#dashtabs').tabs();
$('#dashtabs').bind('tabsshow', function(event, ui) { …我正在构建一个"签出",就像与jQuery UI选项卡的交互一样.这意味着单击第一个选项卡上的按钮将停用第一个选项卡并移至下一个选项卡.我一直在梳理Stack Overflow上的帖子,但我尝试的任何东西似乎都没有用.我使用的是jQuery UI 1.8,这里是代码:
$(document).ready(function() {
var $tabs = $('#tabs').tabs({ selected: 0 });
$tabs.tabs('option', 'selected', 0);
$("#tabs").tabs({disabled: [1,2]});
$("#addstudent").click(function(){
$tabs.tabs('option', 'selected', 1);
$("#tabs").tabs({disabled: [0,2]});
});
$("#confirm").click(function(){
$tabs.tabs('option', 'selected', 2);
$("#tabs").tabs({disabled: [0,1]});
});
});当我单击按钮时,下一个选项卡将被解锁(因为它是可选的)但它不会禁用索引0处的选项卡并切换到索引1处的选项卡.此外,相应的面板不会显示.
我是一个jQuery noob,我正在试图弄清楚如何捕获选项卡选择的事件.使用jQuery 1.2.3和相应的jQuery UI选项卡(不是我的选择,我无法控制它).它是一个嵌套的选项卡,带有第一级div名称 - tabs.这是我初始化选项卡的方式
$(function() {
$('#tabs ul').tabs();
});
$(document).ready(function(){
$('#tabs ul').tabs('select', 0);
});
我无法弄清楚如何捕获任何事件或属性(选中的选项卡,单击选项卡时等).希望对此有任何帮助...
我尝试过这样的事情:
$('#tabs ul').bind('tabsselect', function(event, ui) {
selectedTab = ui.index;
alert('selectedTab : ' + selectedTab);
});
(OR)
$('#tabs').bind('tabsselect', function(event, ui) {
没有成功.
下面是标记
<div id="tabs">
<UL>
<LI><A href="#fragment-1"><SPAN>Tab1</SPAN></A></LI>
<LI><A href="#fragment-2"><SPAN>Tab2</SPAN></A></LI>
<LI><A href="#fragment-3"><SPAN>Tab3</SPAN></A></LI>
<LI><A href="#fragment-4"><SPAN>Tab4</SPAN></A></LI>
</UL>
<DIV id=fragment-1>
<UL>
<LI><A href="#fragment-1a"><SPAN>Sub-Tab1</SPAN></A></LI>
<LI><A href="#fragment-1b"><SPAN>Sub-Tab2</SPAN></A></LI>
<LI><A href="#fragment-1c"><SPAN>Sub-Tab3</SPAN></A></LI>
</UL>
</DIV>
.
.
.
</DIV>
我还没有找到任何真正的文档,所以我想知道是否有人知道jQuery UI选项卡的所有可用的fx选项？
到目前为止我见过的唯一一个是:
opacity: "toggle";height: "toggle";交叉淡入淡出会很好,但我认为我还没有看到这个用jQuery UI Tabs完成.
另外,我甚至无法找到如何指定fx速度,尽管文档中提到我应该能够更改它.
我之前使用jquery-ui tabs扩展来加载页面片段ajax,并隐藏或显示div页面中的隐藏页面.这两种方法都有很好的记录,我在那里没有任何问题.
但是,现在我想用标签做一些不同的事情.当用户选择一个标签时,它应该完全重新加载页面 - 原因是每个标签部分的内容渲染起来有些昂贵,所以我不想一次性发送它们并使用普通方法切换'display:none'以显示它们.
我的计划是截取选项卡的select事件,并让该函数通过操作document.location重新加载页面.
在select处理程序中,我如何获得新选择的选项卡索引和它对应的html LI对象？
$('#edit_tabs').tabs( {
selected: 2, // which tab to start on when page loads
select: function(e, ui) {
var t = $(e.target);
// alert("data is " + t.data('load.tabs')); // undef
// alert("data is " + ui.data('load.tabs')); // undef
// This gives a numeric index...
alert( "selected is " + t.data('selected.tabs') )
// ... but it's the index of the PREVIOUSLY selected tab, not …我在选项卡中使用手风琴遇到了问题,最初非活动的手风琴在选择选项卡时无法正确呈现其内容.阅读我看到的原因是非活动标签最初显示:none,因此手风琴中div的高度无法正确计算.所有建议的解决方案都不适合我.有没有人克服这个或有一个解决方案？
以下是该问题的一些示例代码:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.7.2.custom.css" media="screen" />
<script type='text/javascript' src='../scripts/jquery-1.3.2.min.js'></script>
<script type='text/javascript' src='../scripts/jquery-ui-1.7.2.custom.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$('#tabs').tabs();
$("#accordion1").accordion();
$("#accordion2").accordion();
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="main" class="round roundB">
<div id="tabs">
<ul>
<li><a href="#tab1">Tab 1</a> </li>
<li><a href="#tab2">Tab 2</a> </li>
</ul>
<div id="tab1">
<div id="accordion1">
<h3><a href="#">Section 1</a></h3>
<div>
<p>
TAB 1 Accordion 1
</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>
TAB 1 Accordion 2
</p>
</div>
</div>
</div>
<div id="tab2">
<div id="accordion2">
<h3><a href="#">Section 1</a></h3> …所有,
我正在使用Jquery UI嵌套选项卡.我只是想知道是否有任何方法在选项卡文本旁边显示AJAX Spinner图像,同时加载选项卡.我不想将标签文本更改为"正在加载...".考虑到当多个选项卡同时加载或一个接一个加载时,微调器图像应显示在每个加载选项卡旁边.
有什么建议？
谢谢
我正在使用jQuery UI选项卡来创建页面的垂直选项卡部分,并希望最后一个垂直选项卡链接到URL而不是加载选项卡面板.
有关最佳方法的建议吗？我可以将除了LI之外的另一个元素添加到列表中,但是宁愿让最后的li只是表现不同.
谢谢你的帮助.
这是我的javascript:
// vtabs
$("#aboutprod-tabs").tabs(
{ fx: [{opacity:'toggle', duration:'normal'},
{opacity:'toggle', duration:'fast'}] })
.addClass('ui-tabs-vertical');
和HTML
<div id="aboutprod-tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">3rd</a></li>
<li class="last"><a href="/products">Learn more...</a></li>
</ul>
<div id="tabs-1">
Tab panel 1
</div>
<div id="tabs-2">
Tab panel 2
</div>
<div id="tabs-3">
Tab panel 3
</div>
</div>