Как всплыть сообщение об ошибке на событие с YUI? - PullRequest
Новая
       12

Как всплыть сообщение об ошибке на событие с YUI?

0 голосов
/ 03 марта 2011

Может кто-нибудь предоставить образец, как это сделать? Я не говорю о проверке формы, но, например, когда пользователь нажимает кнопку в системе аукциона, и уже слишком поздно - появляется необычное сообщение.

Есть ли что-нибудь подобное в API YUI или каком-то виджете?

Ответы [ 2 ]

1 голос
/ 03 марта 2011

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");

Это создаст Overlay в DOM, но он будет скрыт. В ответ на ошибку вы должны сделать 

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

Наложение не поставляется со скином по умолчанию, поэтому вам нужно включить CSS, чтобы придать ему стиль вашего приложения. Ознакомьтесь с руководством пользователя или просто просмотрите отображаемое наложение в FireBug или Web Inspector, чтобы увидеть DOM и структуру классов для создания скинов.

0 голосов
/ 03 марта 2011

В зависимости от того, насколько «причудливым» вы действительно хотите стать, вы можете просто использовать обработчик кликов с простым окном оповещения в вашем 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>

Обратите внимание на class = "yui-skim-sam" в теге body. Это дает всем элементам YUI красивый, красивый внешний вид.

Подробнее о панелях YUI:
http://developer.yahoo.com/yui/container/panel/

Подробнее о скинах YUI:
http://developer.yahoo.com/yui/articles/skinning/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...