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

Изображение

Первое, данная модификация работает на 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

southklad 21 фев 2015, 22:37 Сообщение

У меня 78 смайлов, ставлю вот так и получаю

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

<div id="smiley-box">
		<!-- IF S_SMILIES_ALLOWED and .smiley -->
			<strong>{L_SMILIES}</strong><br />
				<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 == 26 or smiley.S_ROW_COUNT == 52 -->
						<div id="smiles-linebox-<!-- IF smiley.S_ROW_COUNT == 0 -->1<!-- ELSEIF smiley.S_ROW_COUNT == 26 -->2<!-- ELSEIF smiley.S_ROW_COUNT == 52 -->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 == 25 or smiley.S_ROW_COUNT == 51 or smiley.S_ROW_COUNT == 77 -->
						</div>
						<!-- ENDIF -->
					<!-- END smiley -->
				</div>
Изображение

написание текста уехало под смайлы
  • 0
Изображение

CabinetAdmin 21 фев 2015, 23:08 Сообщение

Значит не 78... :unknown

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

southklad 21 фев 2015, 23:12 Сообщение

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

southklad 21 фев 2015, 23:15 Сообщение

А может быть не равное количество смайлов? НУ например 10,15,25 в разном столбце?
  • 0
Изображение

southklad 21 фев 2015, 23:18 Сообщение

Да вопрос конечно грубый и не по теме смайлов, а так же новые сообщения в блоке новые темы нельзя выводить? ну чтобы таким же способом?
  • 0
Изображение

CabinetAdmin 22 фев 2015, 08:54 Сообщение

igorbond писал(а): А может быть не равное количество смайлов?
Да пожалуйста, как посчитаете так и будет.
igorbond писал(а): так же новые сообщения в блоке новые темы нельзя выводить?
Не знаю :unknown не пробовал. Можно наверно.
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 04 мар 2015, 19:44 Сообщение

Не выходит. Получаю - такое -

Изображение

Первый столбик один смайлик, остальные пусто.
  • 0

CabinetAdmin 04 мар 2015, 21:22 Сообщение

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

romaamor 04 мар 2015, 21:27 Сообщение

Уточните, подсчитывать все смайлики или только те что отоброжаются сразу ?
  • 0

CabinetAdmin 04 мар 2015, 21:31 Сообщение

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

romaamor 04 мар 2015, 21:32 Сообщение

У меня так же как и у вас - 48. Но не получается.
  • 0

CabinetAdmin 04 мар 2015, 21:36 Сообщение

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

romaamor 04 мар 2015, 21:41 Сообщение

Та не как.
  • 0

CabinetAdmin 04 мар 2015, 22:05 Сообщение

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

Похожие темы