在 Plone 中使用 jQueryUi 需要帮助答案

【问题标题】：Need help using jQueryUi in Plone在 Plone 中使用 jQueryUi 需要帮助
【发布时间】：2012-05-27 09:47:08
【问题描述】：

我是 Plone 和 jQueryUI 的新手，无法在 Plone 页面上使用任何 jQueryUI。

我安装了 Plone 4 (4.1.4 41143) 和 jQueryUI 1.8.16 (http://plone.org/products/collective.js.jqueryui)，

在 Zope 管理界面 > portal_javascripts 下，collective.js.jqueryui.custom.min.js 存在并启用。

为了尝试实现http://jqueryui.com/demos/button/ 中的示例，我将其放置在 Plone 页面的正文中：

<script type="text/javascript">
    jQuery({function($) {
        $( "input:submit, a, button", ".demo" ).button();
        $( "a", ".demo" ).click(function() { return false; });
    });
</script>

<DIV class=demo>
<BUTTON type=submit>A button element</BUTTON> <INPUT value="A submit button"  type=submit> <A href="#">An anchor</A>
</DIV><!-- End demo -->

但结果页面未显示预期结果。

我尝试将上面代码中的“jQuery”替换为“$”、“collective.js.jqueryui.custom.min”，但没有任何效果。

我能够让一些 jQueryUI 在 Plone 之外工作，但我想知道如何在 Plone 中使用它。任何帮助表示赞赏。

【问题讨论】：

标签： jquery-ui plone

【解决方案1】：

你的 script 标签的内容可能被 Plone 的 HTML 过滤器删除了。您可以在“站点设置”、“HTML 过滤”中更改它。（那里的对话框很混乱，您必须单击两个按钮。首先从“讨厌的标签”中删除，然后在页面底部“保存”。）

但请注意，不允许用户使用 script、embed 和其他标签有充分的安全理由。它可能会导致各种麻烦，例如当它们在 cmets 中也被允许时，或者经验不足的用户复制/粘贴危险代码时。

如果你只是在练习，而不是把你的网站放到糟糕的互联网上，那还好，但如果你开始部署一个真实的网站，最好把 script 东西放进去您自己的基于文件的附加产品的页面模板。

【讨论】：

是的，我认为这很可能是正在发生的事情。我刚刚在练习，当我决定再次尝试处理 Plone 时，我将不得不学习如何正确包含和注册（和调用）javascript（这不像我想的那样简单希望，所以我想我现在只做 jQuery UI。）感谢所有有用的 cmets。

【解决方案2】：

script 标记中的语法不正确。试试这个：

jQuery(function($) {
    $( "input:submit, a, button", ".demo" ).button();
    $( "a", ".demo" ).click(function() { return false; });
})($);

【讨论】：

谢谢 TJ。我试过了（在脚本标签的第一行删除了额外的'{'，在脚本标签的最后一行添加了'($)'），但不幸的是它仍然无法正常工作。我一定也做错了什么。
我没有看到任何错误消息，但不是按预期出现在页面上的按钮，而是看到文本“按钮元素”，后跟链接“锚点”。跨度>
您是否包含了 jQuery UI 所需的 CSS？
我没有明确这样做，但在 Zope 管理界面 > portal_css 下，我看到了 ++resource++jquery-ui-themes/sunburst/jqueryui.css 条目。我不知道这是否是必要的CSS。看到你的问题后，我也尝试添加 jqueryui.com/css/base.css" type="text/css" media="all" /> code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css" type="text/css" media="all" /> 到 Plone 页面，但仍然得到相同的结果（没有按钮）。

【解决方案3】：

是的，您可能需要允许如上所述的脚本标签，但是在我用 $ 符号替换单词 jQuery 之前，该示例仍然对我不起作用，至少在 Plone 上使用collective.js.jqueryui 1.8.16.9 时4.2.1.1.

<script>
    $(function() {
        $( "#progressbar1" ).progressbar();
        $( "#slider" ).slider();
        $( "input:submit, a, button", ".demo" ).button();
        $( "a", ".demo" ).click(function() { return false; });
     });
 </script>

将 ($) 放在上面一行的分号之前也可以，但我看不出有什么区别。

即使脚本包含在“讨厌的标签”列表中，该脚本也可以在文件系统页面模板上运行。此外，可以在页面模板中使用以下内容将脚本插入文档的头部：

<metal:slot fill-slot="javascript_head_slot">
<script>
    $(function() {
        $( "#slider" ).slider();
        $( "#progressbar1" ).progressbar();
        $( "input:submit, a, button", ".demo" ).button();
        $( "a", ".demo" ).click(function() { return false; });
    });
</script>
</metal:slot>

（我很想知道是否有更合适的前缀，但我真的不知道 javascript。）

【讨论】：

【解决方案4】：

我刚刚遇到了一个类似的问题，试图让我的脚本和 jquery UI 与 plone/zope 设置一起工作。解决方案是在 javascript 注册表 (/portal_javascripts) 中注册它们。脚本本身被添加到 /portal_skins/custom 中，这也是我正在处理的主页所在的位置。如上所述，脚本标记已从源中过滤掉，而是自动添加来自注册表的脚本。还要记住，javascript 注册表中的顺序很重要。

希望这对遇到此问题的其他用户有所帮助。

【讨论】：