collective.portlettabber 0.2.0

我能用它做什么？

该产品尝试简化一个不常见（而且并不简单）的任务：您可以使用它通过JavaScript动态生成一个新的、看起来像标签页的端口号。新端口号将存储从页面中其他现有端口号中抓取和窃取的内容。

原始端口号将被此操作删除。为什么？因为这样

• 如果禁用JavaScript，则没有额外的端口号

• 只显示为启用JavaScript的浏览器生成的新的端口号

新部件的外观如何？

视觉效果类似于Plone用于表单字段集标签页的效果。您可以点击可选择的标题来显示相关的子元素。

Plone中collective.portlettabber的效果

如何使用？

该产品针对开发者，因此您现在需要具备一些基本的jQuery/JavaScript知识，并且必须为Plone开发自己的产品部分。

您需要在您的Plone产品/主题中注册自己的（可能简单的）JavaScript源，并使用此方式使用portlettabber的功能。

以下是一个jsregistry.xml通用设置导入步骤的示例，用于您的JavaScript

<javascript cacheable="True"
         compression="safe"
         cookable="True"
         enabled="True"
         id="myjs-source.js"
         insert-after="++resource++jquery.portlettabber.js"
         inline="False" />

您需要放入什么？我能找到的最简单的例子（并且适用于Plone Classic和Sunburst主题）如下

jq(document).ready(function() {
    try {
        var generatedPortlet = jq.tabbedportlet();

        generatedPortlet.makeTab("#portal-column-two .portletNews");
        generatedPortlet.makeTab("#portal-column-two .portlet-foo");
        jq("#portal-column-two div:not(.managePortletsLink):last").prepend(generatedPortlet.getPortlet());
    } catch(error) {
        if (window.console)
            window.console.log("Something goes wrong with portlettabber: " + error.message);
    }
});

在加载时，您可以创建一个新的portlettabber对象。该对象具有一些您将需要依赖的功能来获取新的端口号。

在获取到generatedPortlet对象后，您可以使用公共的makePortlet方法从页面中获取现有的端口号并将其放入标签中。

在上面的示例中，我们对两个端口号执行此操作，每个端口号对应一个makeTab调用。您必须提供给此方法的参数必须是一个DOM元素或jQuery选择器（在这种情况下，如果它包装多个元素，则仅使用第一个）。

try/catch语句提高了容错性，以防出现错误（开发者仍然可以在他的Firebug/Safari/Chrome控制台中看到问题所在）。

您可以将上面的“prepend”调用更改为“append”，以将生成的端口号作为列中的最后一个项目。给定的jQuery表达式负责始终将“管理端口号”链接放在列的末尾。

您可以做更多的事情（如果您知道自己在做什么，您可以将端口号移动到页面的任何位置）。请参阅jQuery参考以获取更多信息。

结构

该插件对端口号的结构做了一些假设。然而，您可以稍微自定义它（见下文）。

最终结果将是一个类似以下内容的XHTML结构

<portletNodeType class="portletNodeClasses-1 [portletNodeClasses-2 ...]
                        portletNodeAdditionalClasses1 [portletNodeAdditionalClasses2 ...]">
   <portletHeaderNodeType class="portletHeaderNodeClasses-1 [portletHeaderNodeClasses-2 ...]">
       <ul class="portletTabs">
          <li class="portletTab">
              <a href="javascript:;">{Header text... only the text}</a>
          </li>
          [...]
       </ul>
   </portletHeaderNodeType>
   <portletDataNodeType class="portletDataNodeClasses1 [portletDataNodeClasses2 ...]">
       {same content as in the old portlet, I mean all HTML and DOM events}
   </portletDataNodeType>
   [...]
</portletNodeType>

我能用这个来处理其他(X)HTML结构吗？

是的！您可以自定义以下内容

portletNodeType（字符串）

存储端口号的HTML元素。默认为‘dl’

portletNodeClasses（数组）

必须添加到生成的端口号中且也存在于成为新标签页的端口号中的CSS类列表。默认为‘portlet’

portletNodeAdditionalClasses（数组）

将添加到生成的端口号中的附加类列表（如果要在标签页端口号中添加一些新类，请使用此功能）。默认为‘portletTabGenerated’

portletHeaderNodeType（字符串）

用于生成端口号标题的元素（也必须是所有成为新标签页的端口号的标题。默认为‘dt’

portletHeaderNodeClasses（数组）

必须添加到生成的标题中且也存在于成为新标签页的端口号的标题中的CSS类列表。默认为‘portletHeader’

portletDataNodeType（字符串）

用于生成端口组件的元素（并且也必须是所有端口组件内部的新标签页的元素类型。默认‘dd’

portletDataNodeClasses（数组）

有效用作新端口内部元素的portletDataNodeType元素的类数组。如果没有使用这些CSS类之一，则元素不会移动到标签页，并在makeTab()调用后从页面上消失。默认‘portletItem’和‘portletFooter’

id（字符串）

添加到端口的可选HTML id。默认null。

要使用上述选项，只需写这样的句子

jq(document).ready(function() {
    var generatedPortlet = jq.tabbedportlet({portletNodeClasses: ['portlet','notBasicClass']});
    ...
});

这样，您可以设置所有选项的默认值，但为其中之一或多个设置自定义值。

新标签有哪些其他选项？

makeTab方法可以依赖一些附加参数

cutChars（整数）

当从标签式端口中窃取的标签过长时，在这里放置最大字符数，标签标题将只显示此数字，并跟在…后面。默认0（旧端口中找到的所有文本）

label（字符串）

显示此标签，而不是在抓取的标题中找到的标签。默认null（使用旧端口中找到的原始文本）

select（布尔值）

将此标签页作为默认选项。默认false（添加的第一个标签页被选中）

要使用其中之一或多个

jq(document).ready(function() {
    ...
    generatedPortlet.makeTab("#portal-column-two .portletNews", {label: 'Hello!', select: true});
    ...
});

0.2.0 (2010-12-09)

• 将文档示例更改为与Plone 4和Sunburst主题一起工作[keul]

• 添加CSS规则，以便在Sunbursts主题上也能看到标签效果[keul]

• 使用JSLint进行JavaScript清理[keul]

• 正确卸载[keul]

• 在egg结构中进行了某些清理[keul]

0.1.0 (2010-05-17)

• 抓取的标签标题忽略了根表头中的文本[keul]

• 在README文件中添加了更好的示例，添加了try/catch语句[keul]

0.0.2a (2010-05-05)

• 移除了抓取新闻项目端口的调试内容[keul]

• 如果端口为空，则不显示生成的端口[keul]

0.0.1a (2010-05-02)

• 初始（alpha）版本