При создании электронного расписания для учебной группы потребовалось подсвечивать одинаковые предметы, которые ведёт один и тот же преподаватель, вне зависимости от номера аудитории. За вечер набросал небольшой скрипт на 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 — популярную в среде веб-разработчиков библиотеку JavaScript, обеспечивающую доступ к любому объекту DOM. Этим вечером к стандартному эффекту Toggle дописал возможность сохранения состояния этой части страницы при помощи плагина cookie. Ниже представлен фрагмент кода с некоторыми пояснениями. Полезно начинающим.
Последние несколько дней занимаюсь исключительно познанием 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'); });