Question

我正在尝试为我正在处理的应用创建短期重叠通知。我也恰好完全被限制为使用YUI作为我唯一的脚本库。目标是在保存表单的帖子后面的页面上显示YUI样式的通知。我会使用simpledialog，但是客户端不希望与通知交互，并且他们不希望任何按钮或控件，只是一个显示消息的无特征样式框。

我现在想要实现的效果是产生类似于jQuery的showGlobalMessage函数的效果。那么，有没有YUI控件可以做到这一点？如果没有，使用自编的js产生这种效果的最佳方法是什么？

感谢您的帮助。

Answer 1

我最后只是在javascript setTimeout函数中编写来隐藏simpledialog。不像我想的那么优雅......但它确实有效。

Answer 2

您正在寻找YUI Overlay小部件吗？

我粘贴了一个展示其工作原理的示例页面。如果这或多或少是您正在寻找的，那么您应该能够拥有一个功能，在表单提交时，激活覆盖。您必须查找API以了解有关它的更多信息 - http://developer.yahoo.com/yui/3/overlay/

此外，YUI有自定义事件（但我对它们知之甚少）：http://developer.yahoo.com/yui/3/event/

<body>
<div id="myContent">
    <div class="yui3-widget-hd">Overlay Header</div>
    <div class="yui3-widget-bd">Overlay Body</div>
    <div class="yui3-widget-ft">Overlay Footer</div>
</div>
<style>
#myContent
{
background-color:blue;
color:red;
}
</style>
<div id="parentNode"></div>
<style>
#parentNode
{
color:red;
background-color:blue;
}
</style>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ornare phare

Etiam porttitor consectetur sagittis. Suspendisse libero lorem, porta ut tincidu

Etiam dapibus urna ut mauris semper varius. Vestibulum auctor tincidunt urna, id

Nam posuere rutrum sem porttitor pretium. Suspendisse pulvinar sodales viverra.

Donec eleifend nisi nec mauris vestibulum a placerat sapien molestie. In tempus

Proin tincidunt feugiat accumsan. Fusce vel sagittis tellus. Quisque vitae conse

Nam vestibulum, ipsum suscipit dignissim feugiat, nisl lectus sodales felis, nec

Quisque venenatis, nulla sit amet sodales semper, turpis nulla viverra lectus, a

Phasellus euismod ligula at lectus interdum a malesuada ante lacinia. Nam venena

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos

Donec ut eros lorem, eget bibendum neque. Aliquam semper, tortor sed euismod luc

Nullam volutpat adipiscing congue. Aliquam fringilla diam quis quam pharetra tin

Etiam a tortor at justo sodales mattis. Praesent porttitor enim ac sem ultrices

Nam condimentum, ante non adipiscing tristique, magna felis semper arcu, eu temp

Morbi ut enim eget urna ornare elementum ac a ligula. Vestibulum commodo quam se
<script src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script>
<script>
YUI().use('overlay', function(Y) {
var overlay = new Y.Overlay({
    srcNode: '#myContent',
    centered: true
    });
    //overlay.render();
    overlay.render('#parentNode');
});
</script>
</body>

YUI“已保存”通知

2 个答案: