YUI "Saved" notification_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-31 06:47 出处：网络

I\'m trying to create a short term overlay notification for an app I\'m working on. I also happen to be completely constrained to using YUI as my only script library. The goal is to make a YUI-styled

相关专题：javascript yui

I'm trying to create a short term overlay notification for an app I'm working on. I also happen to be completely constrained to using YUI as my only script library. The goal is to make a YUI-styled notification appear over the page following a post wherein the form was saved. I would use the simpledialog, but the client doesn't want to have to interact with the notification, and they don't want any buttons or controls on it whatsoever, just a featureless, styled box that displays a message.

The effect I'm trying to pull off right now is to produce something similar to jQue开发者_如何学编程ry's showGlobalMessage function. So, are there any YUI controls capable of doing this? and if not, what would be the best way, using self-written js, to produce this effect?

Thanks for the help.

Is the YUI Overlay widget what you're looking for?

I pasted a sample page demonstrating how it works. If that's more or less what you're looking for, then you should be able to have a function that, upon form submission, activates the overlay. You will have to lookup the API to learn more about it -- http://developer.yahoo.com/yui/3/overlay/

Also, YUI has custom events (but I don't know much about them): 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>

I ended up just writing in a javascript setTimeout function to hide a simpledialog. Not quite as elegant as I'd like...but it works.