如何在YUI事件中弹出错误消息？

可以请任何人提供一个样本如何做到这一点？我不是在谈论表单验证，但是当用户点击拍卖系统中的一个按钮并且已经太迟了 - 一个奇特的信息就会弹出来。如何在YUI事件中弹出错误消息？

在YUI API或者一些小部件中是否有这样的事情？

2011-03-02 lisak

Y.Overlay是在这里使用的小工具。 http://developer.yahoo.com/yui/3/overlay/

var overlay = new Y.Overlay({ 
    width:"40em", 
    visible:false, 
    center: true, 
    zIndex:10, 
    headerContent: "Uh oh!" 
}).render("#somewhere");

这将创建在DOM叠加，但它会被隐藏。在回答错误，你会然后做

overlay.set('bodyContent', "The error message"); 
overlay.show();

覆盖不附带一个默认的皮肤，所以你需要包括CSS样式像你的应用程序。查看用户指南或仅检查FireBug或Web Inspector中呈现的叠加层，以查看用于蒙皮的DOM和类结构。

来源

2011-03-03 05:38:25 Luke

感谢卢克，覆盖很难合作，我想我将不得不练习......主要是因为它设置了它，它永远不会被渲染，并且很难说明为什么 – lisak 2011-03-03 13:52:18

取决于你到底有多“花哨”想要得到的，你可以只用按一下，在你的JS像这样一个简单的提示框的处理程序：

 YUI().use('node', function(Y) { 
    Y.one('#clickme').on('click', function(e) { 
     e.preventDefault(); 
     alert('You Clicked!'); 
    }); 
    });

随着你的HTML如下：

<a id="clickme" href="#">Click Me</a>

更看中的：
你跟YUI2或YUI3工作？ YUI2有一些内置的覆盖图，他们称之为面板，就像桌面上的一个窗口。这与YUI SAM皮肤结合可以让你，如果你正在使用YUI2做没有任何更多的工作，一些更“花哨”：

<head> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/fonts/fonts-min.css" /> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/container/assets/skins/sam/container.css" /> 

<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/dragdrop/dragdrop-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/container/container-min.js"></script> 
</head> 

<script type="text/javascript"> 
    YAHOO.util.Event.addListener(window, 'load', function() { 
    panel = new YAHOO.widget.Panel('mypanel', { width:"200px", visible:false, constraintoviewport:true }); 
    panel.render();  
    YAHOO.util.Event.addListener('clickme', 'click', panel.show, panel, true); 
    }); 
</script> 

<body class="yui-skin-sam"> 

<a id="clickme" href="#">Click Me</a> 

<div id="mypanel"> 
    <div class="hd">Nifty Panel</div> 
    <div class="bd">Nifty Content.</div> 
    <div class="ft">Nifty Footer#1</div> 
</div> 
</body>

注意类=“衣脱脂-SAM”在身体标签。这使得所有的YUI元素都有一个漂亮的外观和感觉。

来源

2011-03-03 00:09:05 drtz

你是在开玩笑吧？你认为警觉是多么奇特:-) – lisak 2011-03-03 01:26:12

这一切都是相对的！ ;-) – drtz 2011-03-03 21:53:30

如何在YUI事件中弹出错误消息？

回答

相关问题