产品.pipbox 1.0b2

覆盖示例

例如，假设您想点击新闻项目照片打开一个类似lightbox的大图像。为此，您需要指定

• Plone元素的jQuery样式选择器，例如，“.newsImageContainer a”

• “image”作为加载方法（“ajax”和“iframe”是其他替代方案）

• 用于转换href或src URL的常规表达式搜索/替换。在此示例中，我们将URL更改为指向预览大小的图像。因此，我们的搜索/替换对是“/image_view_fullscreen”和“_preview”。

• 您还可以指定额外的覆盖配置参数。

pipbox的网站设置是表格驱动的，在portal_properties.pipbox_properties.selector_specs中的lines字段。在这个表格中，每一行都是一个JSON对象规范，所以所有上述内容都需要像以下这样的一行

{type:'overlay',subtype:'image',selector:'.newsImageContainer a',urlmatch:'/image_view_fullscreen$',urlreplace:'_preview'}

另一个快速示例，为通过kupu放置的图像提供全图弹出窗口

{type:'overlay', subtype:'image', selector:'img.image-right,img.image-left,img.image-inline', urlmatch:'/image_.+$',urlreplace:''}

有什么不同？我们针对的是 <img … /> 标签，这些标签没有href属性。pipbox从src属性中获取目标URL，这样我们就可以有弹出视图的图像元素，而这些元素没有链接到该视图。请注意，我们还在搜索/替换中使用了真正的正则表达式，这样我们就可以删除image_preview、image_mini等。

以及一个配置，将网站地图放在带有expose设置的iframe弹出窗口中，从href中获取目标

{type:'overlay',subtype:'iframe',selector:'#siteaction-sitemap a',config:{expose:{color:'#00f'}}}

标签示例

jQuery Tools将标签、垂直手风琴和水平手风琴统一为“标签”。标签与“面板”相关联——当选择标签时显示的DOM元素。

通过提供“tabcontainer”选择器和在容器内选择标签元素的“tabs”选择器来识别标签。提供一个“panes”选择器以查找显示的面板。

因此，如果我们想将具有“pbtabs”类选择器的显示列表转换为标签显示，我们可以使用以下设置

{type:'tabs',tabcontainer:'dl.pbtabs',tabs:'dt',panes:'dl.tabs > dd'}

为了帮助CSS，pipbox将使用“pbactive”类选择器标记tabcontainer和panes，以帮助您确保当JS不可用时标签可以优雅地降级。

当前没有CSS支持标签；我们可能会添加一些看起来像Plone标签的东西。此外，可能会添加子类型以支持AJAX加载标签内容。

选项

完整的选项列表

• type: ‘overlay’，‘tabs’（其他JQuery Tools效果即将到来）

• config: 字典中的JQuery Tools配置选项

对于覆盖，添加以下选项

• subtype: ‘image’ | ‘iframe’ | ‘ajax’

• selector: 用于查找元素的jQuery选择器

• urlmatch: 目标URL部分的正则表达式

• urlreplace: 匹配表达式的替换表达式

• 宽度：弹出框的宽度。留空则通过CSS确定。图像覆盖的宽度将覆盖此值。

对于AJAX覆盖，添加以下选项

• formselector：用于指定要由AJAX加载并在覆盖内处理的任何加载内容中的表单的JQuery选择器。

• noform：如果AJAX表单提交且返回的内容没有匹配formselector时的操作。可用操作包括‘close’（简单关闭覆盖）、「reload」（重新加载页面）和「redirect」（重定向到另一个页面）。如果您选择「redirect」，您必须在重定向选项中指定URL。

• closeselector：使用此选项指定一个JQuery选择器，用于查找覆盖内应点击以关闭覆盖的元素。最明显的例子是表单的取消按钮。

• redirect：如果您为noform操作指定「redirect」，请使用重定向选项指定完整的目标URL。

对于选项卡，添加以下选项

• tabcontainer：标识选项卡容器的JQuery选择器

• tabs：标识tabcontainer子项作为选项卡的JQuery选择器

• panes：与选项卡关联的面板的JQuery选择器

AJAX

一些pipbox选项允许使用AJAX获取内容。当您通过AJAX将内容加载到覆盖或选项卡时，通常只想获取加载内容的一部分。例如，如果您正在获取Plone页面，您可能只想获取#content div的内容。

为此，只需将CSS（或JQuery）选择器添加到目标URL。pipbox使用的JQuery的load方法将只选择选择器内的内容。

例如，假设您希望在一个覆盖中显示标准的Plone网站地图。您可以使用

{type:'overlay',subtype:'ajax',selector:'#siteaction-sitemap a',urlmatch:'$',urlreplace:' #content > *'}

urlmatch/urlreplace代码在调用JQuery的load获取内容时将选择器添加到URL的末尾，只获取#content div内的内容。

如果您没有指定从加载页面DOM的选择器，您将获得页面body部分内的所有内容。

某些浏览器缓存AJAX加载，因此会在URL中添加随机参数。

AJAX表单

pipbox可以自动处理覆盖内的表单，通过执行AJAX提交操作，然后用结果替换覆盖内容。

使用“formselector”选项指定要处理的表单。重新使用原始覆盖中指定的内容过滤器。

例如，如果您想在覆盖中处理标准的Plone联系表单，您可以指定

{type:'overlay',subtype:'ajax',selector:'#siteaction-contact a',urlmatch:'$',urlreplace:' #content>*', formselector:'form'}

另一个示例：使用弹出窗口处理删除确认和重命名表单（来自操作菜单）

{type:'overlay',subtype:'ajax',selector:'a#delete,a#rename',urlmatch:'$',urlreplace:' #region-content','closeselector':'[name=form.button.Cancel]'}

这里有几个不同之处。首先，没有指定表单选择器；这是因为我们可能不需要在重命名或删除显示的对象时安装ajax提交处理器。其次，我们指定了一个关闭选择器，这样按下取消按钮将关闭覆盖而不会提交表单。

属性表安装

我们将使用portal_properties属性表来存储网站设置

>>> 'pipbox_properties' in portal.portal_properties.objectIds()
True

selector_specs 字段应包含自动激活规范。以下为预安装的内容：

>>> my_props = portal.portal_properties.pipbox_properties
>>> my_props.selector_specs
 ("{type:'overlay',subtype:'image',selector:'.newsImageContainer a',urlmatch:'/image_view_fullscreen$',urlreplace:''}", "{type:'overlay',subtype:'ajax',selector:'#portal-personaltools li a',urlmatch:'$',urlreplace:' #region-content > *',formselector:'form#login_form','noform':'reload'}", "{type:'overlay',subtype:'ajax',selector:'a#delete,a#rename',urlmatch:'$',urlreplace:' #region-content','closeselector':'[name=form.button.Cancel]'}")

样式表视图

弹出窗口需要样式支持。我们应该提供样式表视图

>>> view = getMultiAdapter((portal, app.REQUEST), name=u'pipbox.css')
>>> mycss = view()
>>> mycss.find('PIPBox Stylesheet') > 0
True

为了方便插值 Plone 样式属性，它是一个 dtml 文档，应该按此类解释

>>> mycss.find('<dtml') == -1
True

样式表应安装到 CSS 注册表中

>>> 'pipbox.css' in portal.portal_css.getResourceIds()
True

JavaScript 资源和视图

JS 注册表中应有两个条目

>>> jsreg = portal.portal_javascripts
>>> ids = jsreg.getResourceIds()
>>> '++resource++pipbox.js' in ids and 'pipboxinit.js' in ids
True

以资源的形式打开主 JS 代码项

>>> browser.open(portal_url+'/++resource++pipbox.js')

并确保其中包含我们的代码

>>> print browser.contents
/*****************
<BLANKLINE>
   PIPbox tools for attaching JQuery Tools bling to CSS with option
   parameter strings.
<BLANKLINE>
*****************/
...

在我们的视图中包含我们的设置初始化代码

>>> view = getMultiAdapter((portal, app.REQUEST), name=u'pipboxinit.js')

这应包含来自我们的属性表的规范

>>> print view()
<BLANKLINE>
pb.doConfig({tool:'overlay', speed:'fast', expose:{color:'#fff', opacity:0.5, loadSpeed:200}});
pb.doSetup({type:'overlay',subtype:'image',selector:'.newsImageContainer a',urlmatch:'/image_view_fullscreen$',urlreplace:''});
pb.doSetup({type:'overlay',subtype:'ajax',selector:'#portal-personaltools li a',urlmatch:'$',urlreplace:' #region-content > *',formselector:'form#login_form','noform':'reload'});
pb.doSetup({type:'overlay',subtype:'ajax',selector:'a#delete,a#rename',urlmatch:'$',urlreplace:' #region-content','closeselector':'[name=form.button.Cancel]'});

0.2dev

• 适应与 JQuery Tools 一起使用而不是 ThickBox

0.1dev

• 初始提交