Liferay JSP页面中的AUI内联对话框

时间:2012-06-25 08:55:00

标签: javascript jsp liferay liferay-6 alloy-ui

我正在尝试在Liferay 6.1门户中显示内联对话框(即aui-inline-dialog,而不是aui-dialog)。但是,我无法让https://developer.atlassian.com/display/AUI/Inline+Dialog上的示例工作。

我试过了:

<a href="#" id="inlineDialog"> Inline Dialog </a>
<script type="text/javascript">
AUI().ready('aui-inline-dialog', 'aui-overlay-manager', function(A) {
    A.InlineDialog(A.one("#inlineDialog"), "myDialog", function(content, trigger, showPopup) {showPopup();}, {onHover: true});
});
</script>

但它只是说InlineDialog不是一个功能。

我错过了什么? (或者是否有更好的方法来显示工具提示而不仅仅是文本内容?)

1 个答案:

答案 0 :(得分:2)

刚发现问题: LifeI中不包含aui-inline-dialog。

我的解决方案:

  • 下载最新的Atlassian FlatPack(如本页所示:https://developer.atlassian.com/display/AUI/AUI+4.2+Release+Notes
  • 将aui.js和aui-dependencies.js添加到docroot / js /
  • <header-portlet-javascript>/js/aui-dependencies.js</header-portlet-javascript><header-portlet-javascript>/js/aui.js</header-portlet-javascript>添加到liferay-portlet.xml文件
  • 将aui.css添加到docroot / css /
  • <header-portlet-css>/css/aui.css</header-portlet-css>添加到liferay-portlet.xml文件

结果:您现在应该能够在FlatPack示例中使用AUI,例如

    <a href="#" id="popupLink">Hover Link</a>

    <script type="text/javascript">
    AJS.InlineDialog(AJS.$("#popupLink"), 1, 
            function(content, trigger, showPopup) {
                content.css({"padding":"16px"}).html('<a href="http://example.com">Appended content.</a>');
                showPopup();
                return false;
            }, {
                onHover:true
            }
        );
    </script>