Статьи

Триггеры наведения вкладки управления вкладкой в ​​JQuery

Декабрь 15, 2018

В jQuery триггеры наведения вкладки управления вкладками. Протестировано и работает в Chrome, FF, IE9, IE8.

Загрузка — jsfiddle для демонстрации TAB, чтобы работать.
jsfiddle

Свойство tabindex

  • Атрибут tabindex поддерживается во всех основных браузерах, кроме Safari.
  • HTML5 — атрибут tabindex можно использовать для любого элемента HTML

    • JQuery 

$(document).ready(function () { /* "trigger" hover by adding a CSS class */ $('.transition-container').on('mouseover', function (e) { $(this).find('.transition').addClass('activeHover'); $(this).on('mouseout', function (e) { $(this).find('.transition').removeClass('activeHover'); }); }); /* get key code */ function getKeyCode(key) { //return the key code return (key == null) ? event.keyCode : key.keyCode; } /* for usabiity capture keyboard tabbing */ $(document).on('keyup', function (eventObj) { //tab keycode = 9 if (getKeyCode(eventObj) == '9') { var $el = $(document.activeElement); //remove any current active elements $('.transition').removeClass('activeHover'); if ($el.hasClass('transition-container')) { $el.find('.transition').addClass('activeHover'); } } }); }); /* Internet Explorer sniffer code to add class to body tag for IE version */ var ie = (function () { var undef, v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i'); while ( div.innerHTML = ' ', all[0]); if (v > 4) { $('body').addClass('ie' + v); } }());  $(document).ready(function () { /* "trigger" hover by adding a CSS class */ $('.transition-container').on('mouseover', function (e) { $(this).find('.transition').addClass('activeHover'); $(this).on('mouseout', function (e) { $(this).find('.transition').removeClass('activeHover'); }); }); /* get key code */ function getKeyCode(key) { //return the key code return (key == null) ? event.keyCode : key.keyCode; } /* for usabiity capture keyboard tabbing */ $(document).on('keyup', function (eventObj) { //tab keycode = 9 if (getKeyCode(eventObj) == '9') { var $el = $(document.activeElement); //remove any current active elements $('.transition').removeClass('activeHover'); if ($el.hasClass('transition-container')) { $el.find('.transition').addClass('activeHover'); } } }); }); /* Internet Explorer sniffer code to add class to body tag for IE version */ var ie = (function () { var undef, v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i'); while ( div.innerHTML = ' ', all[0]); if (v > 4) { $('body').addClass('ie' + v); } }());

CSS 

 /* transition speed */ .transition { -webkit-transition: -webkit-transform .2s ease-out; -moz-transition: -moz-transform .2s ease-out; -o-transition: -o-transform .2s ease-out; -ms-transition: -ms-transform .2s ease-out; transition: transform .2s ease-out; } /* IE 9 scale */ .ie9 .activeHover { -ms-transform: scale(1.2, 1.2); } /* IE 8 scale */ .ie8 .activeHover { filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand'); } /* modern browsers transition */ .activeHover { -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -o-transform:scale(1.2); transform:scale(1.2); } /* IE 7 scale */ .ie7 .activeHover { filter: none; transform: none; } .transition-container { border: 1px solid blue; margin: 15px; padding:5px; } *:active { border: 1px solid red; } }

HTML5 

 
 
  Нажмите, чтобы получить фокус и нажмите клавишу TAB для переключения между пунктами.  Нажмите SHIFT + TAB, чтобы вернуться наверх.

34
Share: