Искать по блогу

Рубрики

Архив записей

 

jQuery: подсветка одинаковых элементов в таблице

При создании электронного расписания для учебной группы потребовалось подсвечивать одинаковые предметы, которые ведёт один и тот же преподаватель, вне зависимости от номера аудитории. За вечер набросал небольшой скрипт на jQuery, который поможет это реализовать в несколько движений рук по клавиатуре.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
  $(document).ready(function() {	
    // Преобразование текста по регулярному выражению
    // (только для моего вида содержимого ячеек)
    function getCellText(cellText) {
      return jQuery.trim(cellText.replace(/(а\.[а-яА-Я0-9]{1,}|\(.+\)|-|\/|[0-9].?)/g, ""));
    }
    // Подсветка одинаковых объектов
    function setCellHover(hoverCellObject, hoverNewClass) {
      $(hoverCellObject).mouseover(function() {
        var trObject = $(hoverCellObject).parent();
          // Не пустая ли ячейка (в расписании встречались "окна")
          if ($(this).html() != '') {
            // Движение по таблице, как по двумерному массиву
            while (trObject.html()) {
              var tdObject = trObject.children().next();
              while (tdObject.html()) {
                tdObject.removeClass(hoverNewClass);
                // Сравнивание преобразованных текстов ячейки с текущим
                if (getCellText(tdObject.html()) == getCellText($(this).html())) {
                  tdObject.addClass(hoverNewClass);
                }
                tdObject = tdObject.next();
              }
              trObject = trObject.next();
            }
          }
      });
      // При выходе за границу таблицы
      $(hoverCellObject).mouseout(function() {
        $(hoverCellObject).removeClass(hoverNewClass);
      });
    }
    // 1: уникальный идентификатор подсвечиваемых ячеек.
    // 2: класс стиля CSS, который будет применён к ячейке
    setCellHover('#table tr td.item_cell', 'cell_active');
  });

Скачать пример

jQuery: дружим Toggle с Cookie

cookie

Чтобы блок с поиском, рубриками и архивом плавно сворачивался и разворачивался, я использую jQuery — популярную в среде веб-разработчиков библиотеку JavaScript, обеспечивающую доступ к любому объекту DOM. Этим вечером к стандартному эффекту Toggle дописал возможность сохранения состояния этой части страницы при помощи плагина cookie. Ниже представлен фрагмент кода с некоторыми пояснениями. Полезно начинающим.

Читать дальше »

jQuery: Accordion vs. .load();

Последние несколько дней занимаюсь исключительно познанием Javascript фреймворка jQuery, возможности которого стремительно уходят если не в бесконечность, то настолько далеко, что и вообразить страшно. Библиотека является мощным и гибким инструментом взаимодействия HTML и Javascript и удобным средством по работе с AJAX. В проекте «Лабообменник», jQuery используется как минимум трижды: плавное cворачивание div блока (Toggle), мультизагрузочная форма (MultiFile) и эффект Accordion, с помощью которого компактно располагались лабораторные работы на главной странице.

  /* Функция обработки события клика по ссылке */
 
  $('.toggleBlock').click(function(){
 
    // Сворачивание / разворачивание аккордиона
    // с лабораторными работами
    $('#Accordion').toggle("slow");
 
    // Разворачивание / сворачивание блока загрузки
    $('.uploadBlock').toggle("slow");
 
    // Очистка статуса загрузки
    $('#uploadOutput').empty();
 
    // Обновление части страницы
    $('#Accordion').load('/ #Accordion');
 
  });

Читать дальше »