Всем привет!
Только изучаю jQuery, но судить прошу строго.
Суть такая: на странице есть несколько кнопок с различными модификаторами, типа:
<button class="button button_theme_simple button_size_m button_view_action" type="button">
<span class="button__text">Кнопка действия</span>
</button>
Мне необходимо в зависимости от состояния кнопки (ховер, фокус и прочее) добавлять тот или иной класс.
"По мотивам" различных видео и статей пишу небольшой плагин, он прекрасно работает, но насколько является годным? Или же это помойка? Скажу сразу же, что плагин полностью не готов, пока реализовано два состояния элемента.
// Обертка плагина
(function($) {
// Наименование плагина
$.fn.BemButton = function() {
// Применяем плагин ко всем элементам
return this.each(function() {
// Объявление глобальной переменной
var ths = $(this);
// Логика плагина
function BemButtonInit() {
// Объявление переменных
var button = "button";
var state = "_state_";
var hovered = "hovered";
var focused = "focused";
var pressed = "pressed";
var checked = "checked";
var disabled = "disabled";
// Наведение курсором
ths.hover(function() {
ths.toggleClass(button + state + hovered);
})
// Фокус на блоке
ths.focus(function() {
ths.addClass(button + state + focused);
}).blur(function() {
ths.removeClass(button + state + focused);
})
};
// Действие при загрузке страницы
$(window).load(function() {
// Инициализация плагина
BemButtonInit();
});
});
};
})(jQuery);
Инициализация плагина стандартная:
$(document).ready(function() {
$(".button").BemButton();
});
