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

【问题标题】：AUI inline dialog in Liferay JSP pageLiferay JSP 页面中的 AUI 内联对话框
【发布时间】：2012-06-26 12:30:54
【问题描述】：

我正在尝试在我的 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 不是一个函数。

我错过了什么？（或者有没有更好的方法来显示不仅仅是文本内容的工具提示？）

【问题讨论】：

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

【解决方案1】：

刚刚发现问题： aui-inline-dialog 不包含在 Liferay 中。

我的解决方案：

下载最新的 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>

【讨论】：