Продолжение статьи Как добавить виджет с табами на jQuery в WordPress. Часть 1
Теперь, когда мы создали виджет с необходимым кодов PHP и HTML для наших табов, следующим шагом будет добавление jQuery для вывода их в конетейнер для табов. Для этого необходимо скопировать и вставить этот код в файл wp-tabber.js.
(function($) {
$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
//$(activeTab).fadeIn();
if ($.browser.msie) {$(activeTab).show();}
else {$(activeTab).fadeIn();}
return false;
});
})(jQuery);
Теперь наш виджет «оснащен» jQuery, и последним шагом будет добавление стилей табам. Мы создали простую таблицу стилей, которую вы можете скопировать и вставить в файл devise-tabber-style.css:
ul.tabs {
position: relative;
z-index: 1000;
float: left;
border-left: 1px solid #C3D4EA;
}
ul.tabs li {
position: relative;
overflow: hidden;
height: 26px;
float: left;
margin: 0;
padding: 0;
line-height: 26px;
background-color: #99B2B7;
border: 1px solid #C3D4EA;
border-left: none;
}
ul.tabs li a{
display: block;
padding: 0 10px;
outline: none;
text-decoration: none;
}
html ul.tabs li.active,
html ul.tabs li.active a:hover {
background-color: #D5DED9;
border-bottom: 1px solid #D5DED9;
}
.widget-area .widget .tabs a {
color: #FFFFFF;
}
.tab_container {
position: relative;
top: -1px;
z-index: 999;
width: 100%;
float: left;
font-size: 11px;
background-color: #D5DED9;
border: 1px solid #C3D4EA;
}
.tab_content {
padding: 7px 11px 11px 11px;
line-height: 1.5;
}
.tab_content ul {
margin: 0;
padding: 0;
list-style: none;
}
.tab_content li {
margin: 3px 0;
}
.tab-clear {
clear:both;
}
Вот и все. Теперь нужно загрузить папку devise-tabber-widget в директорию /wp-content/plugins/ вашего сайта на WordPress через FTP. Или же, вы можете просто создать zip архив из этой папки и перейти в Плагины » Добавить новый в административной панели WordPress. Кликните на вкладку Загрузить для установки плагина. После активации плагина перейдите в раздел Внешний вид » Виджеты и перетяните виджет Devise Tabber Widget в ваш сайдбар. Всё!
Надеемся, что эта статья помогал вам создать виджет с табами на jQuery в WordPress. По вопросам и предложениям пишите в комментарии.
