Скрипт табов(вкладок) phpbb3

В данном подфоруме я буду выкладывать разнообразные украшения форума phpbb3, от смайлов до скриптов, от ВВ-кодов до различных полезных программ.

Модераторы: Vl@d1m1r, Lorem Ipsum, Atlas

Правила форума
----
Ответить
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

Скрипт табов(вкладок) phpbb3

Сообщение DeaDRoMeO »

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

Для начала скачиваем сам скрипт и помещаем его в корень форума
tabs.rar
Скрипт табов(вкладок) phpbb3
(582 байт) 44 скачивания
Подключение этого скрипта подразумевает то, что у вас уже подключен 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&tpl=X-Static&lang=russian&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, по ЛС не отвечаю !!!
#1
Аватара пользователя
psnw2007
Заглянул на огонек
Заглянул на огонек
Сообщения: 18
Стаж: 11 лет 6 месяцев

Скрипт табов(вкладок) phpbb3

Сообщение psnw2007 »

Сложновато с наскока... :-(--
#2
Аватара пользователя
Vl@d1m1r
Активно общаюсь
Активно общаюсь
Сообщения: 333
Стаж: 10 лет 6 месяцев
Откуда: Туркменистан
Контактная информация:

Скрипт табов(вкладок) phpbb3

Сообщение Vl@d1m1r »

psnw2007 писал(а):Сложновато с наскока...
Может этот мод будет проще index_tables.
#3
Аватара пользователя
psnw2007
Заглянул на огонек
Заглянул на огонек
Сообщения: 18
Стаж: 11 лет 6 месяцев

Скрипт табов(вкладок) phpbb3

Сообщение psnw2007 »

Спасибо! Посмотрю...
#4
Ответить