Одним из моих самых сильных, за последнее время, после собственно создания этого блога, достижений в области сайтостроения было самостоятельное освоение материала по «прикручиванию» блока вкладок с произвольным содержимым. Разработка этого блока вкладок основано на использовании библиотеки jQuery. Подробная статья по этому поводу была опубликована мною 26 мая 2009 года, ищите ее по названию «Вкладки jQuery в сайдбаре WordPress».

Теперь же я хочу рассказать о том как эти вкладки модифицировать до такого состояния, в каком они работают у меня на блоге сейчас. То есть изменение содержимого вкладок происходит плавно, причем скорость плавного появления содержимого можно легко регулировать.

Итак, предположим, что вы ознакомились со статьей "Вкладки jQuery в сайдбаре WordPress" и уже установили блок вкладок на свой блог. Значит в корневой папке вашей темы есть файл http://www.ваш_сайт/wp-content/themes/ваша_тема/tabs.js Пожалуйста, откройте его. Вы увидите следующий код:

var $j = jQuery.noConflict();

$j(document).ready(function() {

$j('ul.tabees li').css('cursor', 'pointer');

$j('ul.tabees.tabees1 li').click(function(){
  var thisClass = this.className.slice(0,2);
  $j('div.t1').hide();
  $j('div.t2').hide();
  $j('div.t3').hide();
  $j('div.t4').hide();
  $j('div.' + thisClass).show();
  $j('ul.tabees.tabees1 li').removeClass('tab-current');
  $j(this).addClass('tab-current');
  });

});

Теперь для плавности хода наших вкладок нам надо заменить функцию show () на fadein (), поэтому код будет теперь выглядеть так:

var $j = jQuery.noConflict();

$j(document).ready(function() {

$j('ul.tabees li').css('cursor', 'pointer');

$j('ul.tabees.tabees1 li').click(function(){
  var thisClass = this.className.slice(0,2);
  $j('div.t1').hide();
  $j('div.t2').hide();
  $j('div.t3').hide();
  $j('div.t4').hide();
  $j('div.' + thisClass).fadeIn("slow");
  $j('ul.tabees.tabees1 li').removeClass('tab-current');
  $j(this).addClass('tab-current');
  });

});

Причем аргументом функции fadein () может быть не только слово «slow» (медленно), но и числовое значение, обозначающее скорость выполнения этой функции в миллисекундах, например fadein (1000).

Также чтобы сделать переключение вкладок не по щелчку мыши, а по наведению курсора надо заменить оператор click на mouseon , как показано на списке ниже:

var $j = jQuery.noConflict();

$j(document).ready(function() {

$j('ul.tabees li').css('cursor', 'pointer');

$j('ul.tabees.tabees1 li').mouseon(function(){
  var thisClass = this.className.slice(0,2);
  $j('div.t1').hide();
  $j('div.t2').hide();
  $j('div.t3').hide();
  $j('div.t4').hide();
  $j('div.' + thisClass).fadeIn("slow");
  $j('ul.tabees.tabees1 li').removeClass('tab-current');
  $j(this).addClass('tab-current');
  });

});

Вот такие нехитрые изменения делают внешний вид блога значительно симпатичнее. Дерзайте.

Читайте по теме:

• Непослушные формы. Часть№1 Плагины для форматирования полей ввода, чек-боксов, радио-кнопок и простых кнопок (2)
• Вкладки jQuery в сайдбаре WordPress (0)