Исследуем свойство z-index с помощью jQuery


    В уроке Управление положением слоя с помощью z-index мне понадобилось продемонстрировать в интерактивном режиме действие свойства z-index на примере трех разноцветных квадратов с пересекающимися границами. Каждому из квадратов было присвоено свое свойство z-index и для демонстрации необходимо было динамически переопределять свойства z-index установленные по умолчанию.

Конечно это можно было сделать с помощью формы, запрашивая необходимые данные у пользователя и передавая их в дальнейшем обработчику на PHP или Java Script и все бы это работало, но привело бы к написанию избыточного кода и что самое главное трате избыточного времени.

Для динамического изменения содержания веб страницы как нельзя лучше подходит jQuery, событие click и свойства объекта события ctrlKey, shiftKey и altKey.

По моей задумке, при клике мышкой на выбранный квадрат у него должно меняться установленное по умолчанию свойства z-index. Однако так как квадратов было три и соответственно у каждого из них должна была быть возможность переопределить ранее установленное свойство, которых так же было три, мне понадобилось отслеживать два события одновременно:
    - нажатую клавишу (в зависимости от того какой номер я хочу присвоить свойству z-index)
    - и клик мышкой по выбранному квадрату.
Кроме того нужно было зарезервировать действие для возврата значений по умолчанию.

Для этого я решил использовать, как нельзя кстати, имеющиеся в jQuery инструменты.

Я отбирал необходимые мне элементы , отслеживал событие одиночного клика мыши по ним, а всю информацию об этом событии передавал в функцию с параметром eventObject.

Далее с помощью оператора проверки условия if else, используя данные функции, с помощью свойств объекта события ctrlKey, shiftKey и altKey, я проверял какая клавиша ctrl, shift или alt была нажата совместно с кликом мышки.

И наконец, в зависимости от произведенного действия менял свойство CSS у текущего элемента выборки.

Затем выводил справочное значение z-index на экран.
Последним действием если никакая клавиша из трех не была нажата, а событии клик мышки состоялось, я восстанавливал значения по умолчанию.

  $('#div_rel span').click(function(eventObject){ //первое действие mouseover
     if (eventObject.shiftKey) {     // Если нажата клавиша shift
        $(this).css('z-index','3');  // z-index','3'
    $('#div_z').text('z-index: 3');   
     }
     else if (eventObject.ctrlKey) {   // Если нажата клавиша ctrl
        $(this).css('z-index','2');    // z-index','2'
    $('#div_z').text('z-index: 2'); 
     }
     else if (eventObject.altKey) {    // Если нажата клавиша alt
        $(this).css('z-index','1');    // z-index','1' 
    $('#div_z').text('z-index: 1'); 
     }
     else {
        $('#red_abs').css('z-index','1');   // Если простой клик
    $('#green_abs').css('z-index','2'); // восстанавливаем значения по умолчанию
    $('#blue_abs').css('z-index','3');     
    $('#div_z').text('z-index: значения по умолчанию');
     }
  });

Однако по непонятным мне причинам, если данный скрипт выполнялся на ура в Windows XP и Windows7, то горячо любимая мной Ubuntu 10.04 наотрез отказывалась ловить событие altKey (проверял в разных браузерах и на разных ноутбуках).

Так как в тот момент я был ограничен по времени я быстренько подправил скрипт меняя свойство z-index с помощью ctrl, shift и простого клика мышкой, а восстанавливал значения по умолчанию кликая по кнопке.

Вот что у меня получилось в итоге:
$('#div_rel span').click(function(eventObject){ //Событие клика
     if (eventObject.shiftKey) {     // Если нажата клавиша shift
        $(this).css('z-index','3');  // z-index','3'
    $('#div_z').text('index: 3');  
     }
     else if (eventObject.ctrlKey) {   // Если нажата клавиша ctrl
        $(this).css('z-index','2');    // z-index','2'
    $('#div_z').text('z-ndex: 2'); 
     }
     else {    // Если нажата клавиша alt
        $(this).css('z-index','1');    // z-index','1'
    $('#div_z').text('z-index: 1');    
     }
  });
// Восстанавливаем значения по умолчанию
$('#div_s').click(function(){
  $('#red_abs').css('z-index','1');   // Если простой клик
    $('#green_abs').css('z-index','2'); // восстанавливаем значения по умолчанию
    $('#blue_abs').css('z-index','3');   
    $('#div_z').text('z-index: значения по умолчанию');
});

z-index:

Red Green Blue


Поэкспериментируйте с положением слоев с помощью z-index, покликав мышкой по разноцветным квадратам следуя следующим правилам:
SHIFT + клик - z-index:3
CTRL + клик - z-index:2
простой клик - z-index:1
Клик по надписи Вернуть значения по умолчанию - возвращает значения по умолчанию.
А для большей наглядности выводится подсказка текущего значения z-index.

Автор: Сергей Зарубин

Дата: 2011-05-19

Колличество просмотров: 9116

Нравится

Комментарии к заметке:

Комментарий добавил(а): mic
Дата: 2013-01-27

не работает...

Комментарий добавил(а): Вано
Дата: 2015-12-22

не пашет

Комментарий добавил(а): koralevam1990
Дата: 2017-09-03

Њуж часто бывает в командировках. Ищу приятного и ненасытного мужчину. С вас место. Пишите на email

Комментарий добавил(а): koralevam1990
Дата: 2017-09-03

Њуж часто уезжает а так хочется ласки и удовольствий. Пишите на email



Добавить новый комментарий


Введите число с картинки:

captcha