可以请任何人提供样品如何做到这一点?我不是在谈论表单验证,但是例如当用户点击拍卖系统中的按钮时为时已晚 - 会弹出一条奇特的消息。
在YUI api或某些小部件中有这样的东西吗?
答案 0 :(得分: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和类结构。
答案 1 :(得分:0)
根据你真正想要的“幻想”,你可以在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>
<小时/> 更多花哨:
<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/