Расширение функционала виджета .dialog

Здесь мы собираем сниппеты - кусочки jQuery-кода, позволяющие решить какую-либо небольшую задачу. Топикстартер обязан предоставить свой сниппет, чтобы открыть тему!

Модераторы: zandroid, EGORR

Правила форума
Чтобы открыть тему, необходимо представить свой jQuery-код и html-разметку (при необходимости), а также подробно все прокомментировать! В открытой теме все могут оставлять комментарии, задавать вопросы.

Re: Расширение функционала виджета .dialog

Сообщение XelaNimed » 10 май 2011, 23:59

За второй пунктик это конечно спасибо! Это я и имел ввиду, когда коворил про ужасный код. Мне кажется имеется еще много мест, где его можно оптимизировать и сократить.
Насчет переноса темы... Насколько я понимаю, в теме сниппетов публикуются уже готовые решения (или это уже готовое :oops: ). Хотелось бы с сообществом обсудить, а по возможности и расширить функциональные возможности. Добавить кнопку разворота виджета на все доступное место/родительский элемент или опцию, при установке которой, виджет бы анимировался в нижний/верхний/правый/левый край документа, а последующие виджеты при "сворачивании" находились бы рядом ("а ля" Windows Explorer).
Ну и тема добавления собственного триггера до сих пор покрыта мраком... может подскажет кто?! Ну вот хоть на текущем примере. Как добавить триггер при collapse или expand?!
P.S.: если нужно перенести, то я конечно не против.
Последний раз редактировалось XelaNimed 11 май 2011, 11:25, всего редактировалось 1 раз.
Один из способов получить правильные ответы — предложить несколько неправильных самому.
Аватар пользователя
XelaNimed
Модератор
 
Сообщений: 229
Зарегистрирован: 25 ноя 2010, 06:52

Re: Расширение функционала виджета .dialog

Сообщение zandroid » 11 май 2011, 09:36

Далеко не всегда сокращение количества символов есть хорошо - часто можно потерять читаемость кода, тем самым не улучшив а ухудшив его. Так что не надо к этому стремиться.

По поводу триггеров всё просто: вызываешь в своём методе this._trigger(type, event, data) - это метод базового объекта (даже не диалога, а самого базового). Параметры: type - это строка, тип события; event - это оригинальное событие, можно просто null передать, data - это дополнительные данные, они в обработчик передаются вторым аргументом.
Пример для твоего виджета, вызов внутри метода collapse:
Код: выделить все
this._trigger('collapse', null, {});

Назначение обработчиков будет работать стандартное:
Код: выделить все
// 1. через опции при создании виджета (или добавлении опций):
$('#contest').dialogExtended({
    collapse: function(e, data) { ... }
});
// 2. через элемент
$('#contest').bind('dialogextendedcollapse', function(e, data) { ... }); // ! тут тип события именно слитно и в нижнем регистре


Про сниппеты - в этой теме много полезной теории и практики и примеров, что вполне подходит под сниппеты, поэтому я кину туда эту тему, а в этом форуме оставлю ссылку на неё, зайти можно будет из любого форума.
Аватар пользователя
zandroid
Модератор
 
Сообщений: 1164
Зарегистрирован: 21 янв 2010, 22:16
Откуда: Нижний Новгород

Re: Расширение функционала виджета .dialog

Сообщение XelaNimed » 11 май 2011, 12:05

zandroid, вот это спасибо!
Добавил триггеры, прикрепленный файл и описание обновил.
И еще... zandroid, ты описал две разных возможности добавления пользовательских функций при событии. Не мог ты объяснить разницу между ними?! Первый способ используется при инициализации виджета, а второй?! В чем принципиальное различие между ними?!
Последний раз редактировалось XelaNimed 12 май 2011, 11:11, всего редактировалось 1 раз.
Один из способов получить правильные ответы — предложить несколько неправильных самому.
Аватар пользователя
XelaNimed
Модератор
 
Сообщений: 229
Зарегистрирован: 25 ноя 2010, 06:52

Re: Расширение функционала виджета .dialog

Сообщение zandroid » 11 май 2011, 15:51

Разница между ними в месте хранения обработчика и только. Если обработчик создан в опциях, а потом через .option('collapse', fn) назначить другой обработчик, то старый пропадёт. А через .bind() можно вешать несколько обработчиков одновременно, также как и стандартные click, keydown и т.п., и удалять их через .unbind() .
Аватар пользователя
zandroid
Модератор
 
Сообщений: 1164
Зарегистрирован: 21 янв 2010, 22:16
Откуда: Нижний Новгород

Re: Расширение функционала виджета .dialog

Сообщение XelaNimed » 18 май 2011, 16:07

Обнаружилась ошибка в Firefox (как минимум в версии 4.0.1). В строках
Код: выделить все
this._trigger('onCollapse', event, {origHeight:this._origHeight});
...
this._trigger('onExpand', event, {origHeight:this._origHeight})

Firefox генерирует ошибку: event is not defined.
Был изменен event на this
Код: выделить все
this._trigger('onCollapse', this, {origHeight:this._origHeight});
...
this._trigger('onExpand', this, {origHeight:this._origHeight});

"Шапку", jsFiddle и файл во вложении обновил.
Один из способов получить правильные ответы — предложить несколько неправильных самому.
Аватар пользователя
XelaNimed
Модератор
 
Сообщений: 229
Зарегистрирован: 25 ноя 2010, 06:52

Re: Расширение функционала виджета .dialog

Сообщение zandroid » 18 май 2011, 21:11

В шапке изменений я не увидел, а к приведенному коду есть пару замечаний:
1) тип событий указывай без 'on' - это негласное правило (ещё до jquery), и в нижнем регистре (всё равно оно к нему приводится)
2) FF правильно ругается, event у тебя действительно не определён - передавай вторым параметром null
Аватар пользователя
zandroid
Модератор
 
Сообщений: 1164
Зарегистрирован: 21 янв 2010, 22:16
Откуда: Нижний Новгород

Re: Расширение функционала виджета .dialog

Сообщение XelaNimed » 18 май 2011, 21:23

Ты прав насчет "шапки"... Поправил. Наверное "запарился" при добавлении ...

Интересуюсь... На счет первого не поспоришь. Стандарты вещь серьезная.
Но на счет второго... Неужели информация о событии не пригодится?!

P.S.: хочется научится ловить рыбу, а не просто взять ее "с полки"...
Последний раз редактировалось XelaNimed 19 май 2011, 01:10, всего редактировалось 1 раз.
Один из способов получить правильные ответы — предложить несколько неправильных самому.
Аватар пользователя
XelaNimed
Модератор
 
Сообщений: 229
Зарегистрирован: 25 ноя 2010, 06:52

Re: Расширение функционала виджета .dialog

Сообщение zandroid » 18 май 2011, 21:36

Ну скажи, какое событие ты туда хочешь передать? У тебя было написано "event", но при этом ни в переменных верхнего уровня, ни в глобальных переменных, ни в параметрах функции, ни в локальных переменных никакого event объявлено не было - поэтому FF тебе и ругнулся, что оно не определено (Chrome, кстати, тоже бы ругнулся, наверное). Дык вот, если ты скажешь, какое же событие ты хочешь передать в ._trigger(type, event, data), то будет понятно, где его взять.
Аватар пользователя
zandroid
Модератор
 
Сообщений: 1164
Зарегистрирован: 21 янв 2010, 22:16
Откуда: Нижний Новгород

Re: Расширение функционала виджета .dialog

Сообщение XelaNimed » 18 май 2011, 21:45

Я хотел передать оригинальное событие браузера. И кстати, ругался только Firefox, во всех остальных браузерах событие абсолютно нормально передавалось. Ну и я не предполагал что event необходимо объявлять. Это разве не объект автоматически передающийся обработчику события при возникновении последнего?!
P.S.: ну неужели один Firefox правильно работает, а остальные браузеры нет?!
Один из способов получить правильные ответы — предложить несколько неправильных самому.
Аватар пользователя
XelaNimed
Модератор
 
Сообщений: 229
Зарегистрирован: 25 ноя 2010, 06:52

Re: Расширение функционала виджета .dialog

Сообщение zandroid » 18 май 2011, 22:00

Хм... да, действительно, в хроме тоже есть такой глобальный объект, тогда весьма странно, что в FF его "отменили". Но в любом случае, такой способ передавать событие - плохой способ, потому что в jQuery есть некоторые надстройки над стандартным объектом event и лучше использовать явные параметры в таких ситуациях.
Аватар пользователя
zandroid
Модератор
 
Сообщений: 1164
Зарегистрирован: 21 янв 2010, 22:16
Откуда: Нижний Новгород

Пред.След.

Вернуться в jQuery сниппеты

Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 3