Уперся, как мне кажется, достаточно в простую задачу. Но решить сам не могу. Хочу реализовать плагин, заменяющий стандартный вид формы. Сложность в том, что не могу реализовать фокус на div, обертывающий форму, когда срабатывает фокус на самой форме. Код формы: HTML: <input type="text" id="input_01"> Вызываю плагин: Код (Javascript): $('#input_01').awFormLogin ({ 'width' : 150, 'classblock' : 'aw-frm-bd-fs-restrain aw-frm-so-fs-restrain', 'classinput' : '' }); Код самого плагина: Код (Javascript): (function($) { $.fn.awFormLogin = function(options) { var settings = { 'width' : 100, // ширина 'classblock' : '', 'classinput': '' }; return this.each(function() { if (options) { $.extend(settings, options); // Определяем id изменяемого элемента var idElement = $(this).attr('id'); console.log(idElement); // Размер поля INPUT var widthInput = Math.round(options.width - 62); // Выводим новый вид формы $(this).replaceWith('<div tabindex="0" class="aw-frm-default-wrapp ' + options.classblock +'" style="width: ' + options.width +'px;"><div class="aw-frm-btn-login"></div><div class="aw-frm-input-wrapp"><input type="text" id="' + idElement + '" class="aw-frm-default aw-frm-default-none ' + options.classinput +'" style="width: ' + widthInput +'px;"></div></div>'); return this; }); }; })( jQuery ); Если на странице с формой разместить код: Код (Javascript): $('input').focus(function() { if($(this).parent().parent().attr('tabindex', 0)) { $(this).parent().parent().focus(); } }); То все заработает как мне нужно. Но как реализовать функцию фокуса внутри плагина? Буду благодарен за помощь.
Что бы не городить парент парент парент и т.д т.к вложенность может быть больше или меньше то лучше использовать всплытие события. Вешаешь обработчик focus например на document, внутри него проверяешь e.target на соответствие тэгу, классу и любому другому атрибуту и если условие удовлетворено то исполняешь ту часть кода которая необходима. В случае всплытия события this будет тем элементом на которым было событие а в event сомов всплытие.
Вот честно, прочитал твой ответ раз 10, кое-что понял )) И наверное это уже хорошо Вопросы: 1. Про городить парент парент - что значит использовать всплытие события? 2. Последнюю строчку тоже не врубился... Если не затруднит, может како-нить примерчик простенький? Я вроде не тупой, но туплю
Ну всплытие события работает примерно следующим образом. Есть разметка document header nav a Клик по А генерирует событие клик и оно после этого не уходит не куда, можно сказать не помирает. А поднимается выше, с А на NAV, с нав на хедер, с хедера на документ. Тем самым событие произошедшее на любом вложенном документе мы можем отследить на любом родительском элементе. Как то так моими словами ) Ещё фича в том что событие реально генерируется с документами и.е сверху в низ ) Сорри с телефона
На самом важное замечание, спасибо! Сорри за тугость, но как это работает в плагине? Например, если в плаг добавить код: Код (Javascript): $(this).focus(function() { console.log('Сработало!'); }); То ничего не происходит... Я перепробовал море вариантов и с .bind, .trigger и т.п. Ничего не получается. Перекопал множество статей. Но ничего не помогает
Код (Javascript): { ..., events: { focus: function(elem) {} } } При инициализации плагина вешай опбработчик
Мне уж и неловко писать одно и тоже Инициализация плагина это здесь: Код (Javascript): $('#input_01').awFormLogin ({ 'width' : 150, 'classblock' : 'aw-frm-bd-fs-restrain aw-frm-so-fs-restrain', 'classinput' : '' }); Или здесь: Код (Javascript): (function($) { $.fn.awFormLogin = function(options) {... И в том и в другом случае не понимаю как вписать events. Дружище, ну уж сорри за тугость мою
Увы, у меня ничего не выходит Все просто потому, что я не знаю основы синтаксиса... В любом случае большое спасибо!
Косяк и забыл что исключение есть ну влюбом случае можно циклом или рекурсией подняться до родительского элемента и не городить parent на parent
Спасибо за статью, очень полезные данные для меня! Буду вникать. Как понял, фокус - это исключение из правил.