Небольшая модификация, позволяющая вывести смайлики в форме ответа через табы, тем самым поделив их: по типу, по размеру, по цвету или по любому другому принципу.
Модификация включает в себя правки двух шаблонов и подключения стилей.

Изображение

Первое, данная модификация работает на jquery, поэтому необходимо, чтобы была подключена её библиотека.

Тестировалось только на prosilver, но и на subsilver2 будет работать, места для правки только могут слегка отличаться, в остальном всё тоже самое.

Итак.
Открываем шаблоны posting_editor.html и quick_reply.html, находим:

Код: Выделить всё

			<!-- BEGIN smiley -->
				<a href="#" onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" /></a>
			<!-- END smiley -->
меняем на:

Код: Выделить всё

				<div class="smiles-tabs tabs-style-topline">
					<ul class="smiles-nav">
						<li><a href="#smiles-linebox-1"><span>1</span></a></li>
						<li><a href="#smiles-linebox-2"><span>2</span></a></li>
						<li><a href="#smiles-linebox-3"><span>3</span></a></li>
					</ul>
					<!-- BEGIN smiley -->
						<!-- IF smiley.S_ROW_COUNT == 0 or smiley.S_ROW_COUNT == 16 or smiley.S_ROW_COUNT == 32 -->
						<div id="smiles-linebox-<!-- IF smiley.S_ROW_COUNT == 0 -->1<!-- ELSEIF smiley.S_ROW_COUNT == 16 -->2<!-- ELSEIF smiley.S_ROW_COUNT == 32 -->3<!-- ENDIF -->">
						<!-- ENDIF -->
							<a href="#" onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" /></a>

						<!-- IF smiley.S_ROW_COUNT == 15 or smiley.S_ROW_COUNT == 31 or smiley.S_ROW_COUNT == 47 -->
						</div>
						<!-- ENDIF -->
					<!-- END smiley -->
				</div>
Пояснения.
Допустим, мы хотим иметь три блока со смайлами, которые открываются табами с номерами от одного до трёх. Для этого мы добавляем три ссылки:

Код: Выделить всё

<li><a href="#smiles-linebox-1"><span>1</span></a></li>
каждый со своим номером.
Чтобы разделить смайлы на три блока, их нужно для начала посчитать. В нашем примере 48 смайлов, мы делим их на три и получаем по 16 изображений на блок. Исходя из этого мы будем настраивать порядок их разделения.
В нашем коде есть следующий элемент:

Код: Выделить всё

<!-- IF smiley.S_ROW_COUNT == 0 or smiley.S_ROW_COUNT == 16 or smiley.S_ROW_COUNT == 32 -->
Номера говорят где нужно добавить следующий элемент.
0 - это значит, что перед первым смайлом будет добавлен элемент <div id="smiles-linebox-...
16 - это значит, что элемент будет добавлен после 16 изображения.
и тд.

Если табов должно быть более трёх, то с начала добавляем в управление ссылку:

Код: Выделить всё

<li><a href="#smiles-linebox-4"><span>4</span></a></li>
и or smiley.S_ROW_COUNT == 32 со своим значением.

Код:

Код: Выделить всё

<!-- IF smiley.S_ROW_COUNT == 0 -->1<!-- ELSEIF smiley.S_ROW_COUNT == 16 -->2<!-- ELSEIF smiley.S_ROW_COUNT == 32 -->3<!-- ENDIF -->
Номера должны соответствовать номерам кода данного чуть выше.
При добавлении четвёртого блока, просто добавляем перед <!-- ENDIF -->:

Код: Выделить всё

<!-- ELSEIF smiley.S_ROW_COUNT == 32 -->
с тем же значением, что и выше.

Следующий код:

Код: Выделить всё

<!-- IF smiley.S_ROW_COUNT == 15 or smiley.S_ROW_COUNT == 31 or smiley.S_ROW_COUNT == 47 -->
расположенный снизу нашей модификации, говорит в каком месте надо поставить закрывающий тег </div>.
Получается так. 0 - открываем блок, 15 - закрываем; 16 - открываем второй блок, 31 - закрываем; 32 - открываем третий блок, 47 - закрываем.

Если посмотреть на код, легко понять принцип.


С настройками вроде разобрались, пора добавить скрипт, в начало обоих файлов добавляем:

Код: Выделить всё

<script type="text/javascript">
/*
* Smiles block tabs
* prosilver ( phpBB 3.0.x style )
* Modified by:	xaocZ ( CabinetAdmin )
* Support mod:	http://cabinetadmina.ru
*/

$(document).ready(function(){
	$('.smiles-tabs div').hide();
	$('.smiles-tabs div:first').show();
	$('.smiles-tabs ul li:first').addClass('tab-current');
	$('.smiles-tabs ul li a').click(function(){ 
		$('.smiles-tabs ul li').removeClass('tab-current');
		$(this).parent().addClass('tab-current'); 
		var currentTab = $(this).attr('href'); 
		$('.smiles-tabs div').hide();
		$(currentTab).show();
		return false;
	});
});
</script>
Стили.
Открываем тему нашего стиля (forms.css), находим:

Код: Выделить всё

/* Input field styles
---------------------------------------- */
и перед найденным добавляем:

Код: Выделить всё

/* Smiles block style / phpBB 3.0.x style prosilver */
.smiles-tabs {
	position: relative;
	overflow: hidden;
	margin: 5px auto 0;
}

/* Nav */
.smiles-tabs .smiles-nav {
	text-align: center;
	position: relative;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	-ms-box-orient: horizontal;
	-ms-box-pack: center;
	-webkit-flex-flow: row wrap;
	-moz-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
}

.smiles-tabs .smiles-nav li {
	position: relative;
	z-index: 1;
	display: block;
	margin: 0;
	text-align: center;
	-webkit-flex: 1;
	-moz-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

.smiles-tabs .smiles-nav a {
	position: relative;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 2.5;
}

.smiles-tabs .smiles-nav a span {
	font-size: 1.0em;
}

.smiles-tabs .smiles-nav li.tab-current a {
	color: #74777b;
}

.smiles-tabs .smiles-nav a:focus {
	outline: none;
}

.smiles-tabs .smiles-nav a:hover {
	text-decoration: none;
}

/* Top Line */
.tabs-style-topline .smiles-nav li {
	border: 1px solid rgba(40,44,42,0.1);
}

.tabs-style-topline .smiles-nav li:not(:last-child) {
	border-right: none;
}

.tabs-style-topline .smiles-nav li.tab-current {
	border-top-color: #4692BF;
	border-bottom: none;
}

.tabs-style-topline .smiles-nav a {
	padding: 0.5em 0;
	background: rgba(40,44,42,0.05);
	color: #74777b;
	line-height: 1.3;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
}

.tabs-style-topline .smiles-nav a:hover,
.tabs-style-topline .smiles-nav a:focus {
	background: rgba(202,220,235,0.15);
	color: #4692BF;
}

.tabs-style-topline .smiles-nav li.tab-current a {
	background: none;
	box-shadow: inset 0 3px 0 #4692BF;
	color: #4692BF;
}

.tabs-style-topline .smiles-nav a span {
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
}

/* Content */
.smiles-tabs div {
	display: none;
	padding-top: 1em;
}
Отрабатывание должно осуществляться во всех браузерах. Проблемы могут возникнуть только в отображении табов, поскольку используются нестандартные свойства, которые позволяют растягивать табы на всю ширину. Отображаться будет во всех современных браузерах, в тех которые не понимают свойства табы будут отображаться друг под другом.


Модификация в виде расширения для форумов 3.3 версии доступна здесь - viewtopic.php?f=157&t=5035
Комментарии: 53

romaamor 04 мар 2015, 22:10 Сообщение

Ночью попробую ещё раз более вдумчиво сделать. Сейчас убрал всё потому что после этого пропадает также и возможность редактировать сообщения.
  • 0

romaamor 05 мар 2015, 01:34 Сообщение

Сделал. Допустил ошибку. :fool:
И так же те, у кого стоит 3.1.3 и расширение быстрый ответ от Татьяны, то вместо файла quick_reply.html делаем те же правки но в файле quickreply_editor_message_before.html который находится по пути - /ext/tatiana5/quickreply/styles/prosilver/template/event
  • 0

southklad 05 мар 2015, 07:46 Сообщение

Все работает отлично, считаете не правильно
  • 0
Изображение

romaamor 05 мар 2015, 13:32 Сообщение

igorbond писал(а): считаете не правильно
Дело было не в подсчете, а в особенностях стиля. И к примеру файла quick_reply.html у меня вообще не существует.
  • 0

CabinetAdmin 05 мар 2015, 14:37 Сообщение

romaamor писал(а): quick_reply.html
Это шаблон быстрого ответа в phpbb 3.0.x версии.
А так, инструкция и писалась изначально под прошлую версию, с учётом установленного быстрого ответа. Можно внести дополнения и для phpbb 3.1.x, имя файла и путь.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 05 мар 2015, 16:40 Сообщение

CabinetAdmin писал(а): Можно внести дополнения и для phpbb 3.1.x, имя файла и путь.
Ну так я и написал что :
romaamor писал(а): И так же те, у кого стоит 3.1.3 и расширение быстрый ответ от Татьяны, то вместо файла quick_reply.html делаем те же правки но в файле quickreply_editor_message_before.html который находится по пути - /ext/tatiana5/quickreply/styles/prosilver/template/event
  • 0

Grevell 06 мар 2015, 19:22 Сообщение

А для phpbb 3.2.12 можно Вывод смайлов в форме ответов в виде табов. jQuery Сделать ?
  • 0

GoDFaTHeR 10 мар 2015, 17:54 Сообщение

Grevell писал(а): А для phpbb 3.2.12 можно Вывод смайлов в форме ответов в виде табов
думаю инструкция и на 3.2 подойдет, попробуйте
  • 0
На этом сервисе можно cоздать форум бесплатно
Домены для форума ТУТ

southklad 10 мар 2015, 18:12 Сообщение

Grevell писал(а):А для phpbb 3.2.12 можно Вывод смайлов в форме ответов в виде табов. jQuery Сделать ?
Когда ее создадут да, а так версия 3.0.12 есть и 3.1.6 :milo:
  • 0
Изображение

southklad 25 авг 2015, 11:32 Сообщение

А не думали оформить данное дополнение в расширение?
  • 0
Изображение

CabinetAdmin 25 авг 2015, 20:25 Сообщение

Вообще была такая мысль, но на момент реализации в этом месте не было вообще никаких событий. Сейчас не знаю, может уже добавили, не смотрел :unknown
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

southklad 27 авг 2015, 17:19 Сообщение

У меня почему то браузер ругается на эту строку

Код: Выделить всё

// <![CDATA[
	onload_functions.push('apply_onkeypress_event()');
// ]]>
Uncaught ReferenceError: onload_functions is not defined(anonymous function) @ viewtopic.php?f=29&t=5059:2193
  • 0
Изображение

CabinetAdmin 27 авг 2015, 20:27 Сообщение

А при чём тут эта модификация? Здесь нет такой строки.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

southklad 27 авг 2015, 20:48 Сообщение

CabinetAdmin писал(а):А при чём тут эта модификация? Здесь нет такой строки.
Да был не прав, просто она сразу шла после вашей доработки, а тут я не сравнил, и вправду она после ваших правок извините. Будем искать откуда она :drink:
  • 0
Изображение

staiki 15 сен 2015, 04:20 Сообщение

Для моего стиля можно настройки такой модификации? :drink:
  • 0
http://staiki.net/ Форум Компьютерной Помощи :Bravo:

Похожие темы