另一个选项卡中的jQueryUI 2选项卡 - 隐藏时不设置高度

时间:2015-12-02 23:44:53

标签: javascript jquery css jquery-ui

我正在开发的应用程序有许多主要页面,我使用jQueryUI标签heightStyle:"fill"实现这些主页,因此它们都扩展到网页上容器的完整高度。其中一个页面包含另外两个制表符元素,再次使用heightStyle:"fill"创建。我希望它们并排显示,以便我使用<div> height:100% width:50% position:absolutetop:0中的每一个包裹起来,然后一个有left:0而另一个有right:0使它们粘在容器的右边缘。 JSfiddle是here

我看到的问题是,如果标签&#34; 1&#34;在页面加载时选中,然后我单击选项卡&#34; 2&#34;,两个内部选项卡元素显示错误的高度。

如果&#34; 1&#34;我只会遇到问题是默认选项卡。如果我做到了&#34; 2&#34;通过将active调用中的tabs()选项更改为1,可以在页面加载并且正确设置其高度时显示元素。

如果你运行&#34;刷新&#34;问题就会消失。内部选项卡上的方法,因为这会导致它们重新计算它们的高度,因此解决此问题的一种方法是运行&#34;刷新&#34;来自&#34; tabsactivate&#34;外部标签元素上的事件处理程序。问题是这个事件处理程序是针对所有选项卡触发的,而不仅仅是我们感兴趣的选项卡。所以如何使用回调来有效地处理这个问题。

修复它的另一种方法是更改​​CSS,因为我怀疑问题是由于使用&#34; position:absolute&#34;将内部选项卡包装在div中引起的。

感谢收到的建议!!

1 个答案:

答案 0 :(得分:0)

破解了!首先将自定义[TestMethod] public async Task ReceivedRequestShouldComeFromPriorityClientFirst() { var normalPriorityClient = GetNormalClientMock(); var highPriorityClient = GetPriorityClientMock(); var compositeClient = new CompositeClient(highPriorityClient, normalPriorityClient); var requests = await compositeClient.ReceiveBatchAsync(1); requests.Should().HaveCount(1); requests.First().Origin.Should().BeSameAs("priority"); normalPriorityClient.CallCount.Should().Be(1); // It will fail here with actual CallCount = 0. highPriorityClient.CallCount.Should().Be(0); } private static ReceiverChannelMock GetNormalClientMock() { return new ReceiverChannelMock("normal"); } private static ReceiverChannelMock GetPriorityClientMock() { return new ReceiverChannelMock("priority"); } private class ReceiverChannelMock : IReceiverChannel { private readonly string name; public ReceiverChannelMock(string name) { this.name = name; } public int CallCount { get; private set; } public Task<IEnumerable<Request>> ReceiveBatchAsync(int batchSize) { this.CallCount++; return Task.FromResult<IEnumerable<Request>>( new List<Request> { new Request { Origin = this.name } }); } } 事件处理程序绑定到包含内部“tabs”元素的面板,然后从那里向它们发送my-activate事件。其次,将refresh事件处理程序添加到外部'tabs'元素,然后将activate事件传递给激活的子面板。 http://jsfiddle.net/kmbro/a92rg8cy/。这种方法的巧妙之处在于您可以将不同的处理程序绑定到每个子面板。

另一种可能性是您可以将自定义my-activate事件发送到正在取消选择的面板(使用ui.oldPanel),这样它就可以关闭它在激活时已经存在的任何后台更新处理。

请注意,因为my-deactivate事件在屏幕上首次出现时未发送到“标签”元素 - 您只能在所选面板更改时获取该事件。如果您需要先做一些事情,请改为处理activate事件 - http://api.jqueryui.com/tabs/#event-create。享受!