plone.app.jquerytools 1.9.5

示例

例如，假设您想点击新闻条目的照片打开一个相册式的大图像版本。为此，您需要指定

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

• “image”作为加载方法（“ajax”和“iframe”是其他选择）

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

• 您还可以指定其他覆盖配置参数。

代码

$('.newsImageContainer a')
    .prepOverlay({
         subtype: 'image',
         urlmatch: '/image_view_fullscreen$',
         urlreplace: '_preview'
        });

如果想要双击或悬停时打开相册式的大图像，怎么办？只需添加一个“event”属性来覆盖默认的

$('.newsImageContainer a')
    .prepOverlay({
         subtype: 'image',
         urlmatch: '/image_view_fullscreen$',
         urlreplace: '_preview',
         event: 'dblclick'
        });

可选的“event”属性可以取三个值之一：默认的“click”、“dblclick”或“hover”。

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

$('img.image-right, img.image-left, img.image-inline')
    .prepOverlay({
        subtype: 'image',
        urlmatch: '/image_.+$',
        urlreplace: ''
        });

有什么不同？我们正在针对 <img … /> 标签，这些标签没有 href 属性。辅助工具自动从 src 属性中获取目标 URL，因此我们可以查看未链接到该视图的图像元素。注意，我们还在搜索/替换中使用了一个真正的正则表达式，这样我们可以删除 image_preview、image_mini 等。

以及将网站地图放入 iframe 弹出窗口中的配置，具有暴露设置，从 href 中获取目标

$('#siteaction-sitemap a')
    .prepOverlay({
        subtype: 'iframe',
        config: {expose:{color:'#00f'}}
        });

选项

完整的选项列表

子类型

‘image’ | ‘iframe’ | ‘ajax’

urlmatch

目标 URL 部分的正则表达式。目标 URL 通过检查 href、src 或 action 属性来确定。

urlreplace

匹配表达式的替换表达式。

filter (仅适用于 ajax)

用于查找您想在叠加层中使用的ajax加载资源的jQuery选择器。

宽度

弹出框的宽度。默认为60%。图像叠加层将覆盖图像宽度。百分比是相对于窗口宽度计算的，而不是父元素。

css类

应用于叠加层的自定义CSS类。对于内联叠加层将被忽略。

配置

字典中的jQuery Tools配置选项。

对于AJAX叠加表单，添加以下面向表单的选项

表单选择器

用于指定要处理加载到叠加层中的内容的任何表单的jQuery选择器。

当表单提交时，叠加处理程序会检查响应中的表单选择器。如果找到，则在叠加层中显示结果并绑定表单处理程序。如果没有找到，则执行“noform”操作。

noform

如果ajax表单提交且返回的内容没有匹配formselector时采取的动作。可用的操作包括“close”简单关闭叠加层，“reload”重新加载页面，“redirect”重定向到另一个页面。如果您选择“redirect”，则必须在重定向选项中指定URL。默认操作是在弹出层中显示筛选后的响应。

您还可以将回调函数作为“noform”参数提供，该函数返回这些字符串之一。叠加助手将以叠加元素作为参数调用该函数。

closeselector

使用此选项指定一个jQuery选择器，用于查找叠加层内部应在其上点击以关闭叠加层的元素。最明显的示例是表单的取消按钮。

重定向

如果为noform操作指定“redirect”，则使用重定向选项指定完整的目标URL。您还可以提供一个返回URL的回调函数。叠加助手将以叠加元素和响应文本作为参数调用该函数。

beforepost

您可以指定一个函数，该函数将在AJAX表单提交之前被调用。此回调将传递jQuery包装的表单和序列化表单数据。如果希望AJAX表单处理程序处理事件，则返回true；如果希望取消提交，则返回false。

afterpost

您可以指定一个函数，该函数将在AJAX加载帖子响应后立即被调用。该函数将传递包含返回HTML的元素作为jQuery对象。第二个参数是data_parent对象，其中包含叠加配置和其他有用的数据，作为jQuery“data”资源。此回调在处理响应之前发生。回调函数的返回值将被忽略。

AJAX

一些选项允许使用AJAX获取内容。当您通过AJAX将内容加载到叠加层或选项卡时，您几乎总是只想获取加载内容的一部分。例如，如果您正在检索Plone页面，您可能只想获取#content div的内容。

为此，只需添加CSS（或jQuery）选择器作为“filter”选项。jQuery的load方法（pipbox使用）将仅选择选择器内的内容。

例如，假设您希望在叠加层中显示标准的Plone站点地图。您可以使用

$('#siteaction-sitemap a').prepOverlay({
    subtype: 'ajax',
    filter: '#content > *'
    });

过滤代码导致叠加处理程序只加载AJAX加载的HTML的一部分到叠加层中，仅获取#content div内的内容。如果您不指定过滤器，您将获得页面的body部分中的所有内容——通常这不是您想要的。

一些浏览器缓存AJAX加载，因此随机参数会自动添加到URL中。

注意：自动将“ajax_load”查询字符串参数添加到AJAX URL中，并可用于模板以确定哪些资源用于AJAX叠加。Plone 4的主模板使用此来排除页面内容区域之外的所有元素。

AJAX 表单

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

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

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

$('#siteaction-contact a').prepOverlay({
    subtype: 'ajax',
    filter: '#content>*',
    formselector: 'form'
    });

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

$('a#delete,a#rename').prepOverlay({
    subtype: 'ajax',
    filter: '#content>*',
    closeselector: '[name=form.button.Cancel]'
    });

这里有一些差异。首先，没有指定表单选择器；这是因为我们不想在重命名或删除显示的对象时安装AJAX提交处理器。其次，我们指定了一个关闭选择器，这样按下取消按钮就会关闭覆盖，而无需提交表单。

有关使用回调处理像确认删除当前内容项这样的复杂情况等多个示例，请参阅Products/CMFPlone/skins/plone_ecmascript/popupforms.js。

使用jQuery表单插件进行表单提交的数据序列化。它提供了比jQuery本身更完整的序列化，包括提交的名称/值和数据。

prepOverlay函数可以用于表单而不是链接。当点击此表单的按钮时，使用表单的action属性检索覆盖。如果method="POST"，则通过带有表单有效负载的POST而不是GET获取覆盖。使用POST而不是GET可能有助于避免URL长度限制。

jQuery Tools 事件

可以通过可选的“config”参数设置jQuery Tools覆盖事件的处理器，该参数作为字典传递。例如，要指定onBeforeLoad事件

$('a#testimage').prepOverlay({
    subtype: 'image',
    config: {
        onBeforeLoad : function (e) {
            console.log('onBeforeLoad', this.getOverlay());
            return true;
            }
        }
    });

jQuery Tools overlay文档中指定了有用的事件。还可以参阅事件文档。请注意，如果要在`onBeforeLoad`和`onBeforeClose`处理器中返回默认行为（打开或关闭），则应在其中返回true。要防止打开或关闭，则返回false。

jQuery Tools在调用事件处理器时将事件作为参数传递。这个参数将是jqt API对象，该对象具有getOverlay()和getTrigger()方法。

1.9.5 (2019-01-08)

错误修复

• 对scss的更多引用修复[agitator]

1.9.4 (2018-01-17)

错误修复

• 请通过在URL中添加引号来pyScss。这使得它与Plone 5.1兼容。[thomasdesvenain]

1.9.3 (2017-10-11)

错误修复

• 禁用overlays.css以匹配升级步骤。[jaroel]

1.9.2 (2017-06-28)

错误修复

• 使用collective/jquerytools的master分支更新Gruntfile.js。用有关我们jQuery Tools分叉的信息更新文档。[thet]

1.9.1 (2017-03-23)

错误修复

• 更新jquery.form和jquery.tools到最新版本。[msom]

1.9.0 (2016-12-02)

新功能

• 由prepOverlay函数注册的覆盖现在可以可选地通过悬停或双击事件而不是点击来触发。[petri]

1.8.0 (2016-08-12)

新功能

• prepOverlay函数现在可以用于表单而不是链接。当点击此表单的按钮时，将使用表单的action属性检索覆盖。（这已在之前的版本中实现，以下是新功能。）如果method="POST"，则通过带有表单有效负载的POST而不是GET获取覆盖。使用POST而不是GET可能有助于避免URL长度限制。[vincentfretin]

1.7.1 (2016-06-27)

• 正确设置jquery.form [gotcha]

1.7.0 (2015-04-29)

• 删除开发配置文件。未压缩的资源仍然提供。如果您需要它们，请在自己的配置文件中包含它们。[thet]

• 将jQueryTools工具提示移动到单独的文件中，以便可以单独禁用它。[thet]

1.6.2 (2014-11-04)

• 撤销“检查每个工具提示是否存在，修复问题349”。修复了损坏的工具提示。[vincentfretin, thet]

1.6.1 (2014-09-11)

• 修复dateinput（不再触发change事件）。[thomasdesvenain]

1.6.0 (2014-07-10)

• 通过使用jquerytools的开发分支并应用进一步的修复，确保jQuery 1.7+，包括1.9的兼容性。我们现在使用在以下位置的jquerytools分支：https://github.com/collective/jquerytools/tree/dev [thet]

• 修复overlayhelpers.js使其与jQuery 1.7和1.9兼容。jQuery.buildFragment的API略有改变。在jQuery 1.7中，它接受一系列上下文对象，而在jQuery 1.9中，它期望一个显式的上下文对象。参见

  - https://github.com/jquery/jquery/blob/1.7/src/manipulation.js#L465
  - https://github.com/jquery/jquery/blob/1.7/src/manipulation.js#L472
  - https://github.com/jquery/jquery/blob/1.9.1/src/manipulation.js#L617

  [thet]

• 切换到基于Grunt的构建系统。[thet]

• 将测试基础设施切换到plone.app.testing。[sdelcourt]

1.5.7 (2014-02-23)

• 修复测试隔离问题。[davisagli]

• 在新实例中，在plone_javasscript_variables.js之后安装plone.app.jquerytools.js。[bloodbare]

1.5.6 (2013-08-13)

• 在日期选择器中，在输入上触发change事件，以免冒泡并导致jQuery 1.8中的错误。[davisagli]

• 回滚pull-req https://github.com/jquerytools/jquerytools/pull/873并将其应用于其他jquerytools文件：修复outerWidth和outerHeight的API，以确保jQuery 1.8.x兼容性。此更改至少向下兼容到1.4，因为jquerytools错误地使用了该API。参见jQuery 1.4 API文档：http://web.archive.org/web/20100210083046/https://api.jqueryjs.cn/outerWidth/ [thet]

1.5.5 (2013-03-18)

• 设置dateinput日历弹出窗口的z-index，以便它在覆盖上下文中显示。[smcmahon]

• 将pbo对象作为重定向回调的第三个参数传递。这为重定向提供了与1.5.4中为noform添加的重定向相同的灵活性。[izak]

1.5.4 (2013-03-04)

• 现在在ajax覆盖中执行内联脚本。[vincentfretin]

• 将pbo对象作为noform回调的第二个参数。您可以从它访问一切，例如覆盖触发pbo.source。[vincentfretin]

• 将断开连接的“el”jQuery对象（使用html响应创建的div）而不是“this”（请求对象）传递给noform和重定向回调。这修复了Products.CMFPlone包中popupforms.js的noformerrorshow回调。[vincentfretin]

• 将jquery.tools.dateinput.css适配为使用Plone弹出日历图标和兼容样式。[smcmahon]

• 更改jqt_checkout_build脚本中的sed命令，以便在Linux和OSX上工作。[thet]

1.5.3 (2013-01-17)

• 当表单因错误而重新加载时，调用ploneTabInit。[vincentfretin]

1.5.2 (2013-01-01)

• 在overlayhelpers.js中不要如此强烈地使用正则表达式。[garbas]

1.5.1 (2012-10-16)

• 总是将覆盖添加到文档主体底部。[davisagli]

• 确保“关闭此框”链接具有hiddenStructure类，这样它就不会在大多数用户中显示。[davisagli]

1.5 (2012-08-30)

• 添加关闭框的可翻译字符串。这个和以下由giacomos修复的更改修复了http://dev.plone.org/ticket/12122。[fulviocasali]

• 使用链接而不是@import对CSS资源进行操作。这提高了速度，因为它更好地使用了并行下载。参见：Steve Souders的“不要使用@import”。[thet]

1.4 - 2012-05-11

• 在关闭按钮中添加一个链接以提高可访问性。[giacomos]

• 更新到jQueryTools 1.2.7。[thet]

• 修复jqt_checkout_build脚本中的sed命令，使其在Linux和OSX上工作。[thet]

• 更新到jQueryTools 1.2.6。[smcmahon]

• 对于不是内联的覆盖，在触发元素之后而不是在body末尾插入它们。这解决了屏幕阅读器的可访问性问题（参见问题#12123），但需要更多CSS重置工作来为覆盖样式。[smcmahon]

1.3 - 2011-06-27

• 添加触发事件，以便您可以更多地挂钩其中。[vangheem]

• 如果指定了表单选择器但覆盖没有表单，不要中断。[davisagli]

• 重构AJAX加载内容的设置，使其更容易从自定义代码中调用。[davisagli]

• 现在可以重复将 prepOverlay 应用到同一元素上，并保留最后应用的实例。之前，一旦 prepOverlay 被应用到某个元素上，之后对该元素的任何使用都将被忽略。[smcmahon]

• 在 README 中添加关于使用 jQuery Tools 事件处理器的文档。[smcmahon]

1.2 - 2011-05-13

• 1.2 最终版本。[esteele]

1.2b5 - 2011-04-06

• 为 dateinput 小部件添加了 next.gif 和 prev.gif。[vincentfretin]

• 在已加载的表单中添加了 ajax_load 隐藏输入。[smcmahon]

1.2b4 - 2010-12-05

• 根据 esteele 的示例，添加基于 plone.app.testing / Selenium 测试框架的文档。[smcmahon]

• b1、b2、b3 中的 ajax 表单处理器没有传递 noform 和 redirect 选项。已修复。[smcmahon]

1.2b3 - 2010-12-30

• b1、b2 中的某些选项没有传递给 ajax 表单处理器。已修复。[smcmahon]

1.2b2 - 2010-12-29

• b1 中的 AJAX 覆盖层因愚蠢的错误而损坏。将尝试记住在编辑后始终进行测试。[smcmahon]

1.2b1 - 2010-12-27

• 在需要之前避免创建覆盖 div；在关闭时删除 ajax 覆盖 div。减少 DOM 杂乱。[smcmahon]

• 包括 .min.js 和 .js 版本的 js 资源，以便让想要阅读源代码的人更容易。[smcmahon]

• 更新文档，使其反映变更。[garbas]

• 更新到 jquerytools 1.2.5。将 dateinput、rangeinput 和 validator 插件添加为额外的浏览器资源。现在所有 jquerytools 插件都随此包添加。[garbas]

• 添加构建脚本，该脚本从源（github）构建 js 文件。[garbas]

• jqtools 中不存在 getCOntent。它已被 getOverlay 替换。http://flowplayer.org/tools/forum/40/28687 [naro]

1.1.2 - 2010-07-19

• 避免使用通用设置：升级步骤（复数），这在 Plone 3 中不起作用。[davisagli]

1.1.1 - 2010-07-19

• 将“description”参数添加到升级步骤指令中，以修复在 Plone 3 上的损坏。[davisagli]

1.1 - 2010-07-18

• 添加 overlays.css。仅适用于 Plone 3（在 Plone 4 中安装时禁用，以及从 Plone 3 升级到 Plone 4 时）。[davisagli]

• 将许可证更新为仅 GPL 版本 2。[hannosch]

• 添加了实验性的 windmill 浏览器集成测试。[smcmahon]

1.1b5 - 2010-06-12

• 更新到 jQuery Tools 1.2.3。[smcmahon]

• 按照每个函数一个“var”的标准重写。[smcmahon]

• 即使“noform”未设置，也不要显示空的 ajax 表单响应。[smcmahon]

1.1b4 - 2010-06-06

• b1-b3 中用于过滤 ajax 响应的 select 技术在 responseText 未正确格式化时不够稳健（例如 ZMI 表单）。通过模拟 jQuery 的 .load 方法中使用的技巧进行修复。[smcmahon]

1.1b3 - 2010-06-03

• 切换回“find”，撤销 1.1b2 的更改。“filter”找不到后代，因此不会在大多数验证错误情况下工作。此外，清理了标识符和注释，这些标识符和注释表明我们正在过滤而不是选择。 [smcmahon]

1.1b2 - 2010-06-03

• 修复 1.1b1 中引入的过滤回归。[davisagli]

1.1b1

• 集成 jQuery 表单插件 http://malsup.com/jquery/form/，以便我们可以处理文件上传。将版本号提升以反映重大更改。[davisagli, smcmahon]

1.0rc3

• 更新到工具 1.2.2。（细微更改）[smcmahon]

• 将 ajax 覆盖的最大高度设置为视口高度的 75%；除了 IE6 以外，切换到固定定位。[smcmahon]

• 更新到工具 1.2.1；删除了 jqt 图像资源（太大，不足以作为主分布的一部分）。[smcmahon]

1.0rc2

• 将 ajax 加载的查询字符串变量从“rand”更改为“ajax_load”以明确其目的。

• 为 prepOverlay 添加 cssclass 选项。

1.0rc1

• 将 responseText 添加到传递给重定向回调的参数中；这使得在页面可能已消失的情况下实现更智能的重定向成为可能。[smcmahon]

• 为覆盖触发器添加“link-overlay”类。[davisagli]

• 在关闭 ajax 覆盖时删除加载的内容，以防止其污染 DOM。[smcmahon]

• 将“source”添加到 data_parent 中，以便能够访问源元素（原始页面上的元素，触发了覆盖窗口），例如在 afterpost 处理器中。[naro]

• 添加来自服务器的 ajax 无响应的消息。[smcmahon]

• 在body末尾而不是视觉门户包装器中插入覆盖层。修复了#10307。[smcmahon]

1.0b17

• 1.0b16修复了点击外部覆盖层导致任何点击关闭覆盖层的问题。已修复。[smcmahon]

1.0b16

• 修复了jquery.tools.min.js，以解决点击外部覆盖层时关闭的问题。[smcmahon]

• 改进了通过点击处理程序查找提交按钮的逻辑。[smcmahon]

1.0b15 - 2010-02-17

• 在Safari中，通过提交按钮映射修复破坏了AJAX表单处理。找到了一个可能更通用的解决方案来查找提交按钮的名称和值。[smcmahon]

• beforepost和afterpost回调选项不起作用。已修复。[smcmahon]

• 当jQuery尝试在ajax加载中丢弃错误响应时进行恢复。[smcmahon]

• 绕过AJAX表单的双重提交警告。[smcmahon]

• 使用jQuery的$约定。[smcmahon]

1.0b14 - 2010-10-27

• 为ajax表单添加beforepost和afterpost回调选项。[smcmahon]

• 将重新加载策略更改为将位置设置为当前href，而不是使用重新加载，这可能在某些浏览器上导致重新发布查询。[smcmahon]

1.0b13 - 2010-01-22

• 修复了表单具有多个按钮时AJAX提交的提交按钮序列化问题。[smcmahon]

1.0b12 - 2010-01-11

• 允许将noform和redirect选项指定为回调函数。这将允许在ajax表单完成后构建更智能的操作。[smcmahon]

• 如果传递给prepOverlay，则避免覆盖onLoad配置选项。[davisagli]

1.0b11 - 2009-12-27

• 声明所有包依赖关系并避免测试中的未使用导入。[hannosch]

1.0b10 - 2009-12-18

• 添加插件资源和图形目录。

• 将jqtools更新到使用1.1.3的提示。

1.0b9

• 在处理选项卡表单时避免Plone 3.x中的覆盖层助手错误。

1.0b8

• 检查url的“action”属性，启用简单表单打开覆盖层。

1.0b7

• 在ajax表单加载时初始化表单选项卡。

• 在ajax表单提交中合并提交按钮值，因为jQuery不包括它们。

1.0b6

• 记录覆盖层助手的用法。

1.0b5

• 整合pipbox中最初开发的覆盖层助手。这些提供了对AJAX加载和表单的支持。

1.0b4

• 升级到jQuery Tools 1.2.1。

1.0b3

• 修复了阻止easy_install 1.0b2的打包问题。

1.0b2

• 迁移到jQuery Tools 1.1.1。

1.0b1

• 初始发布