由于您的每个选项卡都将包含相同的渲染,因此我不会打扰占位符。我认为您将增加比所需更多的复杂性。
假设您将使用jQuery UI Tab 插件,那么我将使用您在上一个问题中使用的相同技术,即在转发器中渲染 div 选项卡的内容,您将需要另一个转发器来创建ul
实际选项卡的列表。
假设您有一个树结构,如:
- Social Sharing
-- Facebook
-- Twitter
-- Email
如果您使用 Sitecore 控件,您现在Social Sharing
可以用作您的数据源,Repeater
并且仍然允许编辑选项卡的内容。
如果您想要更动态的东西,例如每个选项卡的不同呈现方式,例如一个带有富文本、一个带有 2 列、一个带有表格等,那么还有几种方法可以实现这一点。一种方法是<asp:PlaceHolder>
在转发器中使用标准,并在 ItemDataBound 事件上从代码隐藏中添加渲染。
另一种选择是将一堆不同的渲染添加到页面编辑器的占位符中,并将每个渲染的数据源设置为内容项。不过,使用 jQueryUI 选项卡会很困难,因为您希望在每个控件中使用这样的标记以使它们自包含:
<div class="tab-title">Tab Title</div>
<div class="tab-content">Put whatever content you want in here</div>
只要每个渲染都遵循这种结构,那么就可以很容易地将其中的几个添加到页面中,并且它们仍然可以在页面编辑器中进行编辑,尽管在编辑模式下一个接一个地列出(不是标签格式)。您需要推出自己的选项卡插件,但它可能很简单:
- 仅在预览或普通模式下
- 获取所有
.tab-title
元素
- 创建一个
ul
列表并添加到选项卡容器
- 现在在元素上调用 jQuery UI Tabs
希望至少给您一些选项,如果您需要,我可以扩展其中的任何一个,但必须将一些代码示例放在一起。