collective.kuputabs 0.1

简介

Kupu Tabs 允许最终用户在WYSIWYG编辑器中编辑类似于plone.org首页的标签。

这是一个通用的JavaScript/CSS库，可以插入到任何WYSIWYG编辑器中。目前Kupu得到了支持。

优势和用例

• 在页面上有大量内容，但分割它们不合适，我们不希望用户离开页面

• 适用于阅读顺序不重要的内容

• 无需页面加载 - 更好的用户体验

• 事实页面（http://plone.org首页）

• 数据表

• 可访问性 - 如果不支持JavaScript，则渲染为正常页面

• 可打印性 - 打印为正常页面

安装

通过buildout安装

eggs =

collective.kuputabs

zcml =

collective.kuputabs

使用 - Plone

打开任何Kupu可编辑内容。

编写一个标签名称，并从Kupu样式下拉菜单中选择“标签”作为其样式。

标签后面的所有文本（直到下一个标签部分或结束）将放置在标签容器内。标签文本将放置在标签容器内。

您可以使用“标签（默认打开）”样式选择默认打开的标签。

有两个示例样式文件：适用于任何Plone主题（变量颜色）的kuputabs.css.dtml和更通用的kuputabs2.css。

使用 - 通用HTML

为您的内容创建一个容器DIV。通常这是#content或类似，并且已经由您的CMS/博客/ whatever提供。

为要将它们设置为标签的

元素添加类“kuputab-tab-definer”。为默认打开的标签添加类“kuputab-tab-definer-default”。

在您的页面上包含kuputabs.js。包含kuputabs-alternative.css样式表或创建自己的样式表。

就是这样。

内部机制

当页面以查看模式加载时，JavaScript 解析所有 kuputabs-tab 部分，并从中构建一个标签容器。如果禁用 JavaScript，内容将以常规子标题样式显示。

有两种 CSS 类别，它们之间有一个重要的区别

• kuputab-tab-definer 是一个 h2 元素，它标记了标签的开始

• 从 kuputab-tab-definer 父元素结束或下一个 kuputab-tab-definer 之前的所有内容都归入此标签

• kuputab-tab-definer 内容被转换为 kuputab-tab-container，该容器放置在 kuputab-tab-definer 容器元素的底部

document.designMode 属性用于确定访问者是查看页面还是处于 WYSIWYG 编辑器下。

作者

Mikko Ohtamaa

Twinapex Research, Oulu, Finland - 招聘高质量 Python 程序员

赞助商

感谢我们杰出的赞助商。

伦敦市场营销学院.