2

我在一个页面上有多个日历 Web 部件，并且我正在使用选项卡式 Web 部件区域将每个日历放在一个选项卡中。

问题是日历 Web 部件呈现，然后使用 AJAX 获取日历事件。一旦数据从服务器返回，它就会创建 DOM 元素position:absolute并将它们放置在日历上。

第一个选项卡中的日历很好（因为它是可见的），但其他选项卡有问题。事件都在日历的左上角（可能是因为隐藏了 DOM 元素，无法正确计算事件的位置）。

我最接近解决这个问题的是使用以下javascript：

SP.UI.ApplicationPages.CalendarInstanceRepository.lookupInstance(instanceId).refreshItems();

这有两个问题：1）这是一个 ajax 调用，所以有一些延迟，用户会看到日历上的事件“快速”到位；2）日历本身的布局看起来很奇怪，因为某些原因，其中有事件的周将呈现为小于日历上其他周高度的一半。

我也尝试在初始加载过程中不隐藏日历（将它们移出屏幕），我遇到了同样的问题，但即使这样有效，如果用户调整大小，我仍然会遇到隐藏日历的问题浏览器。

我真正需要的是在 CalendarInstance 上有一个方法可以重绘/重新计算所有内容，但只能在客户端执行。

4

1 回答 1

2

对于那些感兴趣的人，我找到了解决方法。

基本上，我没有显示/隐藏选项卡，而是将其视为轮播（或滑块）。我基本上允许我的所有选项卡都可见并用容器包装它们。我设置了容器的高度并隐藏了溢出，所以你一次只能看到一个。从我在问题中描述的内容来看，这是一个不太极端的想法。我无法解释为什么这不起作用，但这个解决方案确实有效，但想法本质上是相同的：不要在 DOM 中隐藏日历，只需让其中一个对用户可见；这样做可以让 SP JavaScript 对事件项进行正确的计算。

我写了一个快速小提琴，显示了我所做的一个简单版本（我的代码有点复杂）。这是基本的 DOM 结构：

<body>
    <ul>
        <li data-tabid="tab1">Tab One</li>
        <li data-tabid="tab2">Tab Two</li>
        <li data-tabid="tab3">Tab Three</li>
    </ul>
    <div id="container">
        <div id="slider">
            <div id="tab1">Tab 1</div>
            <div id="tab2">Tab 2</div>
            <div id="tab3">Tab 3</div>
        </div>
    </div>
</body>
于 2014-01-27T18:40:48.520 回答