Перейти к содержанию
  • запись
    1
  • комментариев
    5
  • просмотра
    104

О блоге

Пробный бложик

Записи в этом блоге

 

BS #1

За месяц использования Bootstrap 4 накопилось немного фиксов и решений. Публикую как минимум для себя, в текстовиках уже надоело хранить.   1. Упрощенная реализация валидации форм на JQ $('body').on('submit', 'form.needs-validation', function(e) { if (this.checkValidity() === false) { e.preventDefault(); e.stopPropagation(); } $(this).addClass('was-validated'); }); 2. Инициализация Popover с возможностью указания контейнера границ и контента $('[data-toggle="popover"]').each(function(i) { var $element = $(this), options = $element.data(); if ($element.attr('data-content-element')) { options.html = true; options.content = function() { return $($(this).attr('data-content-element')).html(); }; } if ($element.attr('data-boundary-element')) { options.boundary = $($(this).attr('data-boundary-element')).get(0); } $element.popover(options); }); <a href="#" class="text-dark" data-toggle="popover" data-content-element="#popover-cart" data-boundary-element="#content">Корзина</a> <div id="#popover-cart"> ... </div> 3. Скрытие popover блока при клике вне его зоны с триггером click $('body').on('click', function(e) { $('[data-toggle="popover"], [aria-describedby^="popover"]').each(function() { if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) { $(this).popover('hide'); } }); }); 4. Делаем кнопку × в контенте popover'a для его скрытия $('body').on('click', '[data-dismiss="popover"]', function(e) { $('[aria-describedby="' + $(this).closest('.popover').attr('id') + '"]').popover('hide'); }); <button type="button" class="close text-dark" data-dismiss="popover"><i class="fas fa-times"></i></button> 5. Плавное изменение высоты (контента) при переключении слайдов карусели $('.carousel').on('slide.bs.carousel', function(e) { var nextH = $(e.relatedTarget).height(); $(this).find('.carousel-item.active').parent().animate({ height: nextH }, 250); }); 6. Делаем возможным выход контента за границы активного слайда карусели  По умолчанию контент слайда имеет правило overflow: hidden и, например, если вы решите сделать увеличение элемента при hover с выходом за границы, то он обрежется. Чтобы это предотвратить оставим правило overflow: hidden только при смене слайдов. $(document).on({ // start 'slide.bs.carousel': function() { $(this).find('.carousel-inner').removeClass('o-visible'); }, // end 'slid.bs.carousel': function() { $(this).find('.carousel-inner').addClass('o-visible'); } }, '.carousel'); .o-visible { overflow: visible!important; } <div id="carousel-product-items" class="carousel slide" data-ride="carousel" data-interval="false" data-wrap="false"> <div class="carousel-inner o-visible" role="listbox"> ... </div> </div> 7. Возвращаем $.button из BS 3 в BS 4 Не понимаю кому мешал этот скромный, но полезный плагин Вызов будет доступен в таком виде  $('button[type="submit"]').btnState('loading');  

SooR

SooR

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.