Question

可以请任何人提供样品如何做到这一点？我不是在谈论表单验证，但是例如当用户点击拍卖系统中的按钮时为时已晚 - 会弹出一条奇特的消息。

在YUI api或某些小部件中有这样的东西吗？

Answer 1

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，但它将被隐藏。为了回应错误，您将执行

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

叠加层没有默认皮肤，所以你需要包含css来设置它的样式。查看用户指南或只检查FireBug或Web Inspector中呈现的Overlay，以查看用于蒙皮的DOM和类结构。

Answer 2

根据你真正想要的“幻想”，你可以在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有一些内置的叠加层，它们称为面板，就像桌面上的窗口一样。如果您正在使用YUI2，那么结合YUI山姆皮可以让您做一些更“花哨”的事情而不需要更多工作：

<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>

请注意body标签中的 class =“yui-skim-sam”。这为所有YUI元素提供了漂亮，漂亮的外观和感觉。

有关YUI面板的更多信息：
http://developer.yahoo.com/yui/container/panel/

更多关于YUI皮肤：
http://developer.yahoo.com/yui/articles/skinning/

如何使用YUI弹出事件的错误消息？

2 个答案: