Как добавить виджет с табами на jQuery в WordPress. Часть 2

Опубликовано: ADv Дата 02.11.2013 в рубрике Код за плагин 0 коментариев

Продолжение статьи Как добавить виджет с табами на jQuery в WordPress. Часть 1
Теперь, когда мы создали виджет с необходимым кодов PHP и HTML для наших табов, следующим шагом будет добавление jQuery для вывода их в конетейнер для табов. Для этого необходимо скопировать и вставить этот код в файл wp-tabber.js.

1(function($)  {
2$(".tab_content").hide();
3$("ul.tabs li:first").addClass("active").show();
4$(".tab_content:first").show();
5$("ul.tabs li").click(function() {
6$("ul.tabs li").removeClass("active");
7$(this).addClass("active");
8$(".tab_content").hide();
9var activeTab = $(this).find("a").attr("href");
10//$(activeTab).fadeIn();
11if ($.browser.msie) {$(activeTab).show();}
12else {$(activeTab).fadeIn();}
13return false;
14});
15})(jQuery);

Теперь наш виджет «оснащен» jQuery, и последним шагом будет добавление стилей табам. Мы создали простую таблицу стилей, которую вы можете скопировать и вставить в файл devise-tabber-style.css:

1ul.tabs { 
2position: relative; 
3z-index: 1000; 
4float: left; 
5border-left: 1px solid #C3D4EA; 
6}
7ul.tabs li {
8position: relative; 
9overflow: hidden; 
10height: 26px; 
11float: left; 
12margin: 0; 
13padding: 0; 
14line-height: 26px; 
15background-color: #99B2B7;
16border: 1px solid #C3D4EA; 
17border-left: none; 
18}
19ul.tabs li  a{ 
20display: block; 
21padding: 0 10px; 
22outline: none; 
23text-decoration: none;
24}
25html ul.tabs li.active, 
26html ul.tabs li.active a:hover { 
27background-color: #D5DED9; 
28border-bottom: 1px solid #D5DED9; 
29}
30.widget-area .widget .tabs a  { 
31color: #FFFFFF; 
32}
33.tab_container {
34position: relative; 
35top: -1px; 
36z-index: 999; 
37width: 100%; 
38float: left; 
39font-size: 11px; 
40background-color: #D5DED9; 
41border: 1px solid #C3D4EA;
42}
43.tab_content { 
44padding: 7px 11px 11px 11px;
45line-height: 1.5;
46}
47.tab_content ul { 
48margin: 0;
49padding: 0; 
50list-style: none; 
51}
52.tab_content li { 
53margin: 3px 0;
54 }
55.tab-clear {
56clear:both;
57}

Вот и все. Теперь нужно загрузить папку devise-tabber-widget в директорию /wp-content/plugins/ вашего сайта на WordPress через FTP. Или же, вы можете просто создать zip архив из этой папки и перейти в Плагины » Добавить новый в административной панели WordPress. Кликните на вкладку Загрузить для установки плагина. После активации плагина перейдите в раздел Внешний вид » Виджеты и перетяните виджет Devise Tabber Widget в ваш сайдбар. Всё!

Надеемся, что эта статья помогал вам создать виджет с табами на jQuery в WordPress. По вопросам и предложениям пишите в комментарии.

Rating: 3.0/5 (2 votes cast)