我正在尝试在 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 不是一个函数。
我错过了什么? (或者是否有更好的方法来显示不仅仅是文本内容的工具提示?)
最佳答案
刚发现问题: aui-inline-dialog 不包含在 Liferay 中。
我的解决方案:
- 下载最新的 Atlassian FlatPack(如本页所示:https://developer.atlassian.com/display/AUI/AUI+4.2+Release+Notes)
- 将 aui.js 和 aui-dependency.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>
关于javascript - Liferay JSP 页面中的 AUI 内联对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11186166/