Показать окно сообщения, которое выдвигается, задерживается на 3 секунды и вставляется с помощью Mootools? - PullRequest
1 голос
/ 24 января 2011

Я создаю окно отображения сообщения об ошибке, которое выдвигается, задерживается на 3 секунды, а затем вставляется с помощью Mootools. Это то, что я сейчас делаю, как я могу исправить это, чтобы оно работало на меня?

var slide = new Fx.Slide($("error"));
slide.slideOut('horizontal').chain(function(){
    $("error").set("text", message);
}).chain(function(){
    this.slideIn('horizontal').delay(3000);
}).chain(function(){
    this.slideOut('horizontal');
});

1 Ответ

0 голосов
/ 28 января 2011

У вас в основном правильные инструменты mootools, но вам не хватает нескольких ключевых элементов, которые бы обеспечивали правильную работу вашего скрипта.Ниже я вставил рабочую версию, а затем сделал несколько комментариев:

var slide = new Fx.Slide($("error"));
slide.slideOut('horizontal').chain(function () {
    $('error').set('text', message); this.callChain(); //NOTE
}).chain(function () {
    this.slideIn('horizontal');
}).chain(function () {
    this.slideOut.delay(3000, this, 'horizontal'); //NOTE
});
  1. Обратите внимание на this.callChain () в 3-й строке.Отсутствие этого было тем, что мешало вам видеть что-либо.Класс Fx использует метод callChain () для внутреннего запуска следующего шага в последовательности, но если ваш аргумент для chain () не содержит один из методов Fx, callChain () не вызывается, поэтому вы должны сделать это вручную.
  2. Ваш звонок с задержкой был не в том месте.Delay () задерживает выполнение функции, к которой она применяется, она не вставляет паузу в цепочку.Поэтому, чтобы отобразить сообщение об ошибке в течение 3 секунд, вам нужно добавить задержку к последнему вызову функции, потому что это та, которую вы хотите замедлить
  3. Ваш вызов задержки был неверным.Задержка относится к функции, а не к возвращаемому значению функции, отсюда и предложение Димитра выше.Посмотрите function в основной документации mootools для получения дополнительной информации
  4. По звукам у вас не установлен firebug.Это позволило бы вам изучить DOM и обнаружить, что ваш код меняет поля, а затем текст, но после этого ничего не происходит.Firebug очень полезен, поэтому установите его КАК МОЖНО СКОРЕЕ
  5. Мое решение (mootools 1.3) приведено ниже и в основном исправляет то, что предлагал dimitar:
    $('error').set('slide', { 
        mode: 'horizontal' 
    }).get('slide').slideOut().chain(function () {
        $('error').set('text', message); this.slideIn();
    }, function () {
        this.slideOut.delay(3000, this);
    });

Надеюсь, это поможет

...