Подключаем JQUERY

Подключаем JQUERY

В разрабатываемой системе управления контентом мы будем активно использовать библиотеку JQUERY. Эта библиотека будет использоваться для создания на страницах CMS некоторых эффектов, загрузки данных с помощью AJAX, отправки форм и т.д. В настоящей статье описано подключение библиотеки и ее использование для создания некоторых простых эффектов.

Для начала необходимо скачать последнюю версию бибилиотеи JQUERY с официального сайта разработчиков: JQUERY

Подключение библиотеки JQUERY.

Подключаем бибилиотеку JQUERY, для этого внутри тега head вставляем такой код:

<sсript type="text/javascript" src="js/jquery-1.3.2.min.js"></sсript>

В теле страницы, например перед закрывающим тегом body вставляем:

$(function(){
});

И весь остальной javascript-код заключаем внутри него.

Раскраска четных и нечетных строк таблицы в разные цвета.

Теперь первое, что мы сделаем, это раскрасим четные и нечетные строки уже сверстанной таблицы в разные цвета. В настоящий момент четным и нечетным строкам таблицы присвоен класс tr_body, в файле стилей таблицы (table.css) следующим за этим классом идет класс, отвечающий за оформление четной строки таблицы (см. Верстка элементов центрального контента). Таким образом с помощью библиотеки JQUERY необходимо у четной строки убрать класс tr_body и заменить его на класс odd. Этого можно добиться добавлением в тело нашей страницы очень простого javascript-кода:

//--- ОКРАШИВАНИЕ НЕЧЕТНОЙ ЯЧЕЙКИ ТАБЛИЦЫ ---
$("tbody > tr:nth-child(odd)").removeClass("tr_body").addClass("odd");

Комментарии к коду (слева направо): ищем в tbody четные строки tr, удаляем у четных строк класс tr_body и добавляем к каждой четной строке, находящейся в tbody класс odd. Все очень просто.

Подсветка строки таблицы, при наведении на нее курсора.

Следующим шагом добьемся того, чтобы при наведении курсора мыши строка таблицы подсвечивалась бы дополнительным цветом. Пример кода также достаточно прост, поэтому комментарии, я думаю, излишни:

//--- HOVER НА СТРОКУ ТАБЛИЦЫ ---
$("tbody > tr").hover(
  function () {
    $(this).addClass("tr_hover");
  },
  function () {
    $(this).removeClass("tr_hover");
  }
);

Выделение строки таблицы, при клике на нее.

Если столбцов в таблице много, то для работы над строкой, удобно, чтобы эта строка была выделена. Т.е. при клике на строку таблицы, эта строка меняет цвет, при клике на другую строку таблицы - она также выделяется, а предыдущая строка возвращается к исходному состоянию. В следующем коде после события click происходит проверка: имеет ли данная строка класс .tr_click. И если такого класса нет, то сначала мы убираем у всех строк этот класс, а потом присваиваем строке, на которой был произведен клик тот же класс.

//--- CLICK НА НА СТРОКУ ТАБЛИЦЫ ---
$("tbody > tr").click(
  function () {
    if( ! $(this).is('.tr_click')) {
      $("tbody > tr").removeClass("tr_click");
      $(this).addClass("tr_click");
    }
  }
);

Снятие выделения строки таблицы, при двойном клике на нее.

После окончания работы со строкой, чтобы она не мозолила глаза, по двойному клику убираем выделение:

//--- DUBLECLICK НА НА СТРОКУ ТАБЛИЦЫ ---
$("tbody > tr").dblclick(
  function () {
    if($(this).is('.tr_click')) {
      $(this).removeClass("tr_click");
    }
  }
);

Подсветка текстового поля.

Ну и последнее, что мы на сегодняшний день сделаем с нашей таблицей, это следующие две вещи:

  1. При наведении на текстовое поле в ячейке таблицы, это текстовое поле должно как то выделяться, сигнализируя о том, что мол меня можно редактировать.
  2. И при щелчке на это выделенное текстовое поле, оно должно говорить о том, что теперь оно готово к изменению.

Первого мы добьемся с помощью кода, подобного приведенному выше, когда при наведении на строку таблицы, она выделялась. Это код говорит: при наведении мыши на элементы с классами .t_text, .t_textarea добавляем к стилевому оформлению этих элементов класс .t_text_hover, а когда курсор выходит за границы выбранного элемента, то класс .t_text, .t_textarea убираем. Пример кода:

//--- HOVER НА ТЕКСТОВЫЕ ПОЛЯ ТАБЛИЦЫ ---
$(".t_text, .t_textarea").hover(
  function () {
    $(this).addClass("t_text_hover");
  },
  function () {
    $(this).removeClass("t_text_hover");
  }
);

Второе: при фокусе на текстовом поле, в нашем случае текстовое поле находится в столбцах «№» и «Название», необходимо это текстовое поле как то выделить, чтобы было понятно, что оно может быть отредактировано. Для этого, по событию focus, текстовому полю, находящемуся в фокусе, необходимо присвоить стилевой класс, отвечающий за стилевое оформление тестовых полей в таблице, находящихся в фокусе. А по событию blur нужно просто вернуть все как было. Что и делает, показанный ниже javascript-код:

//--- FOCUS НА ТЕКСТОВЫЕ ПОЛЯ ТАБЛИЦЫ ---
$(".t_text, .t_textarea").focus(function(){
  $(this).removeClass("t_text_hover").addClass("t_text_focus");
});
$(".t_text, .t_textarea").blur(function(){
  $(this).removeClass("t_text_hover").removeClass("t_text_focus");
});

Единственное, что еще сделано: при фокусе на элементе, удаляется класс t_text_hover

Итак, теперь четные и нечетные строки таблицы окрашены в разные цвета. При наведении курсора на строку таблицы, эта строка окрашивается в более темный цвет. При щелчке на строку, она у нас выделяется, при двойном щелчке выделение снимается. Наведя курсор на текстовое поле, оно у нас выделяется, и щелкнув по выделенному зеленым бордюром текстовому полю, изменяется цвет бордюра и цвет фона.

Похожие пубикации

Делаем основное меню

Делаем основное меню

В левой части админки будет находиться основное меню, с помощью которого мы будем осуществлять навигацию по страницам системы управления контентом. Меню реализуем с помощью jQuery плагина раскрывающееся дерево - jQuery SimpleTree Drag&Drop;.
Добавить комментарий:



Back to Top