Полезная информация


----

Начать новую тему Ответить на тему
АвторСообщение

 Сообщение Скрипт табов(вкладок) phpbb3 
#1 

Аватар пользователя

Итак, по многочисленным вопросам и запросам попытаюсь на пальцах обьяснить подключение скрипта табов (вкладок, далее по тексту просто табы), который используется на нашем форуме. Статья рассчитана на более менее начитанных админов и тех кто хоть немного разбирается в верстке шаблонов стиля.

Для начала скачиваем сам скрипт и помещаем его в корень форума
Вложение :
Комментарий к файлу: Скрипт табов(вкладок) phpbb3
tabs.rar [582 байт]
Скачиваний: 29

Подключение этого скрипта подразумевает то, что у вас уже подключен JQuery, дважды его подключать не надо. После этого идем в шаблон overall_header.html своего стиля и перед тегом </head> вставляем
<script type="text/javascript" src="/tabs.js"></script>
 

Все, подготовка завершена, теперь верстаем сами вкладки. Из содержимого ранее скачанного файла
$(document).ready(function() {

   //Действие по умолчанию
   $(".tab_content").hide(); //Скрыть все содержимое
   $("ul.tabs h5:first").addClass("active").show(); //Активировать первую вкладку
   $(".tab_content:first").show(); //Показать первые содержание вкладке
   
   //По щелчку события
   $("ul.tabs h5").click(function() {
      $("ul.tabs h5").removeClass("active"); //Удалите все "active" класс
      $(this).addClass("active"); //Добавить "active" класса выбранной вкладки
      $(".tab_content").hide(); //Скрыть вкладку Все содержание
      var activeTab = $(this).find("a").attr("href"); //Найти относительной значение атрибута для выявления активной вкладки   содержание
      $(activeTab).fadeIn(); //Fade в активного содержимого
      return false;
   });

});
 

И обязательного скелета верстки
         <ul class="tabs">
            <h5>
               <a href="#tab1">Заголовок первого таба</a>
               </h5>
               
               <h5 >
               <a  href="#tab2">Заголовок второго таба</a>
               </h5>
               <h5 >
               <a href="#tab3">Заголовок третьего таба</a>
               </h5>
      
                     
         </ul>
         

         <div class="tab_container">
         
                     <div id="tab1" class="tab_content">
Содержимое первого таба
</div>

            <div id="tab2" class="tab_content">
Содержимое второго таба
</div>

            <div id="tab3" class="tab_content">
Содержимое третьего таба
</div></div>
 

Мы делаем один важный вывод - нафиг обязательный скелет если мы знаем HTML, ведь из самого скрипта мы видим следующую логику (по строкам скрипта)
$(".tab_content").hide(); 
 

Скрыто все содержимое элементов с классом tab_content
$("ul.tabs h5:first").addClass("active").show(); 
 

Элемент, внутри которого находятся заголовки-ссылки на табы ul имеет класс tabs и работает только с ссылками, обрамленными тегами h5.

Т.е. чего я хочу до вас донести ??? Главное в данном скрипте - это классы, хотите сверстать иначе, не используя дивы и ul - не забывайте о присвоении нужных классов, так же для блоков, в которых находится содержимое табов - они должны иметь свои ID. Смотрите внимательно в код, на скелет. Допустим, видите связь между заголовком и самим табом ???
<h5 >
               <a href="#tab3">Заголовок третьего таба</a>
               </h5>
 

И
<div id="tab3" class="tab_content">
Содержимое третьего таба
</div>
 

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

В качестве бонуса выкладываю почти полный код блока с табами, который вы видите внизу каждой темы на нашем форуме, может так понятней будет
<div><div class="c-h-l"><div class="c-h-r"><div class="c-h-c"><div class="c-h-title"><h4>Дополнительные возможности</h4></div></div></div></div></div>
      <div>
      <div class="cp_center">
   <div class="cp_title">
         <ul class="tabs">
<!-- IF S_QUICK_REPLY -->
            <h5 style="margin-top:0px;margin-right:0px;cursor:pointer;">
               <a class="cp_left" href="#tab11">Быстрый ответ</a>
               </h5><!-- ENDIF -->
               <!-- IF .similar and not S_IS_BOT -->
               <h5 style="margin-top:0px;margin-right:0px;cursor:pointer;">
               <a class="cp_left" href="#tab12">Похожие темы</a>
               </h5><!-- ENDIF -->
               <h5 style="margin-top:0px;margin-right:0px;cursor:pointer;">
               <a class="cp_left" href="#tab13">Оставить комментарий Вконтакте</a>
               </h5>
            <h5 style="margin-top:0px;margin-right:0px;cursor:pointer;">
               <a class="cp_left" href="#tab14">Поделиться темой с помощью</a>
               </h5>
                     
         </ul>
         </div></div>

         <div class="tab_container">
         <!-- IF S_QUICK_REPLY -->
                     <div id="tab11" class="tab_content">
<form id="postform" method="post" action="{U_QR_ACTION}">
<table class="tablebg" width="100%" cellspacing="1">

      <tr>
      <td class="cat_online_top" colspan="2"><h4><font size="2">{L_QUICKREPLY}</font></h4></td>
   </tr>
      <tr>
         
         <td  class="row2" colspan="2" ><input class="post" style="width:90%" type="text" name="subject" size="45" maxlength="64" tabindex="2" value="{SUBJECT}" /></td>
      </tr>
      <tr>
      
         <td class="row2" valign="top" align="left" width="100%">
            <script type="text/javascript">
            // <!--
               var form_name = 'postform';
               var text_name = 'message';
            // -->
            </script>

            <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <!-- INCLUDE posting_buttons.html -->

               <tr>
                  <td valign="top" ><textarea id="message" name="message" rows="12" cols="76" tabindex="3" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onfocus="initInsertions();" style="width: 99%;">{MESSAGE}</textarea>
                  <div class="cp_center" >
   <div class="cp_title" >
         
            
            <h5 style="margin-top:0px;margin-right:0px;cursor:pointer;">
               <a class="cp_left" href="/posting.php?mode=smilies&f=138" onclick="popup(this.href, 300, 350, '_phpbbsmilies'); return false;" title="Добавить смайлики в свое сообщение">Добавить смайлики</a>
               </h5>

            <h5 style="margin-top:0px;margin-right:0px;cursor:pointer;">
               <a class="cp_left" href="javascript:void(0);" onclick="window.open('http://www.postimage.org/index.php?mode=phpbb3&amp;tpl=X-Static&amp;lang=russian&amp;forumurl='   escape(document.location.href), '_imagehost', 'resizable=yes,width=500,height=400');return false;" title="Нажмите на ссылку Добавить картинку(изображение), во всплывающем окне выберите изображение для загрузки, нажмите кнопку Загрузить. Ссылка на фото автоматически добавится в поле сообщения." >Добавить картинку(изображение)</a>
               </h5>
               
            <h5 style="margin-top:0px;margin-right:0px;cursor:pointer;">
               <a class="cp_left" href="/styles/X-Static/template/dep.html" onclick="popup(this.href, 370, 80, '_phpbbsmilies') ; return false;" title="Загрузить любой файл на DepositFiles">Загрузить на DepositFiles</a>
               </h5>
            
            
         
         </div></div>
         
         <br/>
         <table width="100%">
         <tr><td align="left">
         <input type="checkbox" class="radio" name="notify"{S_NOTIFY_CHECKED} />&nbsp;{L_NOTIFY_REPLY}<br/><input type="checkbox" class="radio" name="disable_magic_url"{S_MAGIC_URL_CHECKED} />&nbsp;{L_DISABLE_MAGIC_URL}
         </td>
         <!-- IF S_USER_GROUP == 2 -->
         <td align="center">
         <table class="tablebg" width="100%" cellspacing="0">
                     <tr>
                        <td class="row3"><span class="gensmall">Внимание !!!</span></td>
                     </tr>
                     <tr>
                        <td class="row2"><span class="genmed">Уважаемый пользователь, сейчас вы состоите в группе Зарегистрированные пользователи, для которой активирован флуд-контроль в промежуток 30 минут. Это означает то, что следущее сообщение вы сможете написать лишь через 30 минут после предыдущего. Поэтому продумывайте свои сообщения. Если необходимо чтото добавить, то редактируйте уже оставленные сообщения. После того, как вы зарекомендуете себя с положительной стороны, флуд-контроль будет для вас отключен. Оставить заявку на отключение флуд-контроля можно в теме <a href="http://hello-vitebsk.ru/viewtopic.php?f=75&t=1917">[FAQ]Вступление\прием в группу Опытные пользователи</a></span></td>
                     </tr>
                     </table>
         </td>
         <!-- ENDIF -->
         <td align="right">Количество символов
         <input id="num" type="text" class="codeButtons" readonly="true" style="width:50px;text-align:center" title="Счётчик символов">

<script type="text/javascript" language="javascript">
jQuery("#message").bind('focus', function() {nc()}); 
jQuery("#message").bind('keydown', function() {nc()}); 
jQuery("#message").bind('keyup', function() {nc()}); 
jQuery("#message").bind('keypress', function() {nc()}); 
jQuery("#message").bind('change', function() {nc()}); 
function nc(){num = document.getElementById('message').value.length; 
document.getElementById('num').value = num;} 
</script><br/>Минимально 10 символов
         </td></tr>
         </table>
                  </td>
                  <!-- IF S_BBCODE_ALLOWED -->

                  <td width="80" align="center" valign="top">
                  <script type="text/javascript">
                  // <!--
                     colorPalette('v', 7, 6)
                  // -->
                  </script>
                  </td>
                  <!-- ENDIF -->
               </tr>
            </table>
         </td>
      </tr>
      <tr>
         <td class="cat" colspan="2" align="center">
         <input class="btnlite" type="submit" tabindex="10" name="preview" value="{L_PREVIEW}" />&nbsp;
            <input class="btnmain" type="submit" accesskey="s" tabindex="6" name="post" value="{L_SUBMIT} (CTRL ENTER)" />&nbsp;
            <input class="btnlite" type="submit" accesskey="f" tabindex="7" name="full_editor" value="{L_FULL_EDITOR}" />

            {S_FORM_TOKEN}
            {QR_HIDDEN_FIELDS}
         </td>
      </tr>
      </table>
      </form>
   
            
</div>
<!-- ENDIF -->
<!-- IF .similar and not S_IS_BOT -->
            <div id="tab12" class="tab_content">
<table class="tablebg" width="100%" cellspacing="0">
   <tr>
      <th width="4%" nowrap="nowrap">&nbsp;</th>
      <th  nowrap="nowrap">&nbsp;{L_SIMILAR_TOPICS}&nbsp;</th>
      <th nowrap="nowrap">&nbsp;{L_AUTHOR}&nbsp;</th>
      <th nowrap="nowrap">&nbsp;{L_REPLIES}&nbsp;</th>
      <th nowrap="nowrap">&nbsp;{L_VIEWS}&nbsp;</th>
      <th nowrap="nowrap">&nbsp;{L_LAST_POST}&nbsp;</th>
   </tr>
   <!-- BEGIN similar -->
      <tr valign="middle">
         <td class="row7" width="25" align="center"><!-- IF similar.TOPIC_AUTHOR_AVATAR -->{similar.TOPIC_AUTHOR_AVATAR}<!-- ENDIF --></td>
         <td class="row7">
            <!-- IF similar.S_UNREAD_TOPIC --><a href="{similar.U_NEWEST_POST}">{NEWEST_POST_IMG}</a><!-- ENDIF -->
            {similar.ATTACH_ICON_IMG} <a href="{similar.U_VIEW_TOPIC}" class="topictitle">{similar.TOPIC_TITLE}</a><!-- IF similar.SEO_DESC_TOPIC --></br><i><strong>{similar.SEO_DESC_TOPIC}</strong></i><!-- ENDIF -->
            <!-- IF similar.S_TOPIC_UNAPPROVED or similar.S_POSTS_UNAPPROVED -->
               <a href="{similar.U_MCP_QUEUE}">{similar.UNAPPROVED_IMG}</a>&nbsp;
            <!-- ENDIF -->
            <!-- IF similar.S_TOPIC_REPORTED -->
               <a href="{similar.U_MCP_REPORT}">{REPORTED_IMG}</a>&nbsp;
            <!-- ENDIF -->
            <!-- IF similar.PAGINATION -->
               <p class="gensmall"> [ {GOTO_PAGE_IMG}{L_GOTO_PAGE}: {similar.PAGINATION} ] </p>
            <!-- ENDIF -->
         </td>
         <td class="row7" width="100" align="center"><p class="topicauthor">{similar.TOPIC_AUTHOR_FULL}</p></td>
         <td class="row7" width="50" align="center"><p class="topicdetails">{similar.TOPIC_REPLIES}</p></td>
         <td class="row7" width="50" align="center"><p class="topicdetails">{similar.TOPIC_VIEWS}</p></td>
         <td class="row7" width="120" align="center">
         <!-- IF similar.LAST_POST_AUTHOR_AVATAR --><div style="float: left; padding-top: 0px; margin-left: 5px; margin-right: {similar.LAST_POST_AUTHOR_AVATAR_MARGIN}px;">{similar.LAST_POST_AUTHOR_AVATAR}</div><!-- ENDIF -->
            <p class="topicdetails">{similar.LAST_POST_TIME}</p>
            <p class="topicdetails">{similar.LAST_POST_AUTHOR_FULL}
               <a href="{similar.U_LAST_POST}">{LAST_POST_IMG}</a>
            </p>
         </td>
      </tr>
   <!-- END similar -->
   </table>
   
            
</div>
<!-- ENDIF -->
            <div id="tab13" class="tab_content">
<table class="tablebg" width="100%" cellspacing="0">
                  <tr>
      <td class="cat_online_top" colspan="2"><h4><font size="2">Оставить свой комментарий</font></h4></td>
   </tr>
   <tr>
   
      <td/><!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="http://userapi.com/js/api/скриптик"></script>

<script type="text/javascript">
 тута данные от контакта
</script>

<!-- Put this div tag to the place, where the Comments block will be -->
<div id="vk_comments"></div>
<script type="text/javascript">
тута данные от контакта
</script></td>

   </tr>

   </table>
   
            
</div>
<div id="tab14" class="tab_content">
<table class="tablebg" width="100%" cellspacing="0">
            
   <tr>
      <td class="cat_online_top" colspan="2"><h4><font size="2">Поделиться темой с помощью</font></h4></td>
   </tr>
<tr>
               <td class="row7" ><div align="center">
               <div class="share42init"></div>
<script type="text/javascript" src="адресок скрипта"></script>
            

</td>
</tr>
</table>

</div>

         </div>
</div>   
      <div class="c-f-l"><div class="c-f-r"><div class="c-f-c">&nbsp;</div></div></div>
 

Успехов :danser_dans:


_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!

Теги темы
Разбираем подключение и использование скрипта табов(вкладок) для использования в phpbb3, Скрипт табов(вкладок) phpbb3
          Вернуться наверх  
 

#2 

Аватар пользователя

Сложновато с наскока... :-(--


          Вернуться наверх  
 

#3 

Аватар пользователя

psnw2007 писал(а):

Сложновато с наскока...

Может этот мод будет проще
Пожалуйста Зарегистрируйтесь чтобы увидеть ссылку
.


          Вернуться наверх  
 

#4 

Аватар пользователя

Спасибо! Посмотрю...


          Вернуться наверх  
 
 
Начать новую тему Ответить на тему


Дополнительные возможности

  Похожие темы  Автор  Ответов  Просмотров  Последнее сообщение 
Аватар пользователя Скрипт сокращения текста phpBB3
Данный скрипт поможет вам сокращать текст в блоках до любого количества знаков

DeaDRoMeO

0

837

Аватар пользователя

27 сен 2015, 14:56

DeaDRoMeO

Аватар пользователя Скрипт исправления раскладки клавиатуры phpbb3
Скрипт исправляющий раскладку клавиатуры при ее неправильном выборе

DeaDRoMeO

34

3306

Аватар пользователя

12 окт 2014, 15:40

Tatyana_S

Аватар пользователя Адаптирование вкладок в окне ответа на пост (и новой темы)
phpBB вкладки новая тема ответ

Милена

6

618

Аватар пользователя

12 фев 2015, 13:40

Милена

Аватар пользователя Скрипт "Проверка ТИЦ и PR сайтов в профилях" phpbb3
Скрипт информера ТИЦ и PR для сайтов в профилях пользователей

DeaDRoMeO

6

2108

Аватар пользователя

16 ноя 2015, 05:23

DeaDRoMeO

Аватар пользователя Скрипт "У нас нашли" phpbb3
Скрипт формирует блок, в котором выводятся последние поисковые запросы, по которым заходили на форум

DeaDRoMeO

59

3122

Аватар пользователя

31 мар 2014, 08:35

DeaDRoMeO

Оставить свой комментарий

Поделиться темой с помощью

Ссылки на тему

Прямая ссылка:
BB-код для форумов, сайтов, блогов:
HTML ссылка:
 


cron

Самая неформальная поддержка phpBB :P