jQuery Скрипт переключения по вкладкам в боковую панель (видеоурок)

Наконец добрался сделать последний видеоурок из серии создание страницы сайта в социальных сетях ВКОНТАКТЕ и FaceBook и установка удобного меню в боковую панель для переключения между виджетами подписки на страницы сайта в социальных сетях. Сегодня мы будем делать jQuery Скрипт переключения по вкладкам своими руками.

Сегодня как раз поговорим и посмотрим про последнее — установку скрипта меню переключения между виджетами. Результат его работы вы можете видеть вверху правой колонки моего сайта.

Собственно сам скрипт не представляет ничего особенного, написан за 5 минут на jQuery и мог быть реализован иначе, и лучше. Изначально я хотел реализовать его с помощью плагина к jQuery — jQuery-ui, но по каким-то причинам мне не удалось его подключить к uCoz, но разбираться мне было лень. К тому же дополнительный плагин — дополнительная загрузка в браузер пользователя, а я реализовал всё используя только jQuery.

Код скрипта для переключения виджетов

Итак для начала вам необходимо посмотреть и выполнить инструкции из предыдущих видеоуроков:

1. Создание публичной страницы сайта вконтакте
2. Создание страницы сайта в facebook
3. Регистрация в Twitter
4. Трансляция rss ленты twitter в uCoz

Установка скрипта занимает всего пару минут! Для начала необходимо установить в верхнюю часть (после тэга , можно после тэга ) сайта все коды социальных сетей необходимых для запросов к API социалок:

<!-- код вызова вконтакте api -->
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?34"></script>

<!-- код вызова facebook api -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Затем туда же установить код переключателя написанного на jQuery:

<!-- скрипт переключателя -->

<script type="text/javascript">  
   
jQuery(function()  
  {
   
  jQuery('#link1').click(function()  
  {
  $('#2').slideUp('fast');
  $('#3').slideUp('fast');  
  $('#4').slideUp('fast');
  $('#1').slideDown('fast');
  });

  jQuery('#link2').click(function()  
  {
  $('#1').slideUp('fast');
  $('#3').slideUp('fast');  
  $('#4').slideUp('fast');
  $('#2').slideDown('fast');
  });
  jQuery('#link3').click(function()  
  {
  $('#2').slideUp('fast');
  $('#4').slideUp('fast');  
  $('#1').slideUp('fast');
  $('#3').slideDown('fast');
  });
  jQuery('#link4').click(function()  
  {
  $('#1').slideUp('fast');
  $('#2').slideUp('fast');  
  $('#3').slideUp('fast');
  $('#4').slideDown('fast');
  });  
  });
</script>

После этого в боковую панель добавляем новый блок для подписки на наши страницы в социалках и rss канал:

<!-- добавить в боковую панель (выделить отсюда) -->

<a href="#" id="link1">
<img src="/img/social/rss.png" /></a>
<a href="#" id="link2">
<img src="/img/social/vkontakte.png" /></a>
<a href="#" id="link3">
<img src="/img/social/facebook.png" /></a>
<a href="#" id="link4">
<img src="/img/social/twitter_button.24.png" /></a>

<div id="1" style="display:none">
<center>
<!-- блок RSS -->
<a href="$RSS_LINK$">Новости в RSS</a>

<a href="http://lenta.yandex.ru/settings.xml?name=feed&url=$RSS_LINK$" target="_blank" title="Добавить в Яндекс.Ленту" rel="nofollow"> <img src="http://lenta.yandex.ru/i/addfeed.gif" border="0" alt="Читать в Яндекс.Ленте" /></a>

<a href="http://www.google.com/reader/view/feed/$RSS_LINK$" title="Добавить в GoogleReader" target="_blank" rel="nofollow"><img src="http://buttons.googlesyndication.com/fusion/add.gif" width="104" height="17" style="border:0" alt="Add to Google Reader or Homepage"/></a>

<!-- Сюда можете добавить так же ссылки на ваш канал в feedburner и счётчик подписчиков из feedburner -->
</center>
<!-- /блок RSS -->
</div>

<div id="2">
<!-- блок vkontakte.ru Добавьте сюда код группы или страницы полученный на сайте вконтакте -->
<!-- VK Widget -->
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 0, width: "300", height: "290"}, 31082169);
</script>
<!-- /блок vkontakte.ru -->
</div>

<div id="3" style="display:none">
<!-- блок facebook -->
<div class="fb-like-box" data-href="http://www.facebook.com/pages/freewareshowmehowru/135089093257832" data-width="200" data-show-faces="true" data-stream="false" data-header="false"></div>
<!-- /блок facebook -->
</div>

<div id="4" style="display:none">
<!-- блок twitter -->
<!-- отредактируйте следующую строку указава адрес вашего микроблога и ник -->
Мой твиттер: <a href="https://twitter.com/#!/dkplayer" target="_blank" rel="nofollow">@dkplayer</a>

<!-- далее можно указать количество подписчиков с помощью twittercounter -->
Подписчиков: <script type="text/javascript" language="JavaScript" src="http://twittercounter.com/embed/dkplayer/ffffff/111111"></script>

Последние записи:

<!-- последнее - это ваша лента из твиттера через rss импорт -->
$RSSIT_1$
</div>
<!-- добавить в боковую панель (выделить до сюда) -->

Разумеется блоки facebook, вконтакте и twitter перед установкой вы должны отредактировать под себя.

Видеоурок jQuery Скрипт переключения по вкладкам

Для облегчения задачи я записал всю процедуру в видеоурок:

Для полноценного понимания рекомендую вам так же изучить отличные бесплатные видеоуроки по jQuery. Так же для полноценного понимания рекомендую изучить бесплатные видеоуроки по html и css от настоящих профессионалов. Ну и не проходите мимо моего курса по ucoz.