Небольшая модификация, позволяющая вывести смайлики в форме ответа через табы, тем самым поделив их: по типу, по размеру, по цвету или по любому другому принципу.
Модификация включает в себя правки двух шаблонов и подключения стилей.
Первое, данная модификация работает на jquery, поэтому необходимо, чтобы была подключена её библиотека.
Тестировалось только на prosilver, но и на subsilver2 будет работать, места для правки только могут слегка отличаться, в остальном всё тоже самое.
Итак.
Открываем шаблоны
меняем на:
Пояснения.
Допустим, мы хотим иметь три блока со смайлами, которые открываются табами с номерами от одного до трёх. Для этого мы добавляем три ссылки:
каждый со своим номером.
Чтобы разделить смайлы на три блока, их нужно для начала посчитать. В нашем примере 48 смайлов, мы делим их на три и получаем по 16 изображений на блок. Исходя из этого мы будем настраивать порядок их разделения.
В нашем коде есть следующий элемент:
Номера говорят где нужно добавить следующий элемент.
0 - это значит, что перед первым смайлом будет добавлен элемент
16 - это значит, что элемент будет добавлен после 16 изображения.
и тд.
Если табов должно быть более трёх, то с начала добавляем в управление ссылку:
и
Код:
Номера должны соответствовать номерам кода данного чуть выше.
При добавлении четвёртого блока, просто добавляем перед
с тем же значением, что и выше.
Следующий код:
расположенный снизу нашей модификации, говорит в каком месте надо поставить закрывающий тег
Получается так. 0 - открываем блок, 15 - закрываем; 16 - открываем второй блок, 31 - закрываем; 32 - открываем третий блок, 47 - закрываем.
Если посмотреть на код, легко понять принцип.
С настройками вроде разобрались, пора добавить скрипт, в начало обоих файлов добавляем:
Стили.
Открываем тему нашего стиля (forms.css), находим:
и перед найденным добавляем:
Отрабатывание должно осуществляться во всех браузерах. Проблемы могут возникнуть только в отображении табов, поскольку используются нестандартные свойства, которые позволяют растягивать табы на всю ширину. Отображаться будет во всех современных браузерах, в тех которые не понимают свойства табы будут отображаться друг под другом.
Модификация в виде расширения для форумов 3.3 версии доступна здесь - viewtopic.php?f=157&t=5035
Модификация включает в себя правки двух шаблонов и подключения стилей.
Первое, данная модификация работает на 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
Это шаблон быстрого ответа в phpbb 3.0.x версии.
А так, инструкция и писалась изначально под прошлую версию, с учётом установленного быстрого ответа. Можно внести дополнения и для phpbb 3.1.x, имя файла и путь.
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
думаю инструкция и на 3.2 подойдет, попробуйте
У меня почему то браузер ругается на эту строку
Uncaught ReferenceError: onload_functions is not defined(anonymous function) @ viewtopic.php?f=29&t=5059:2193
Код: Выделить всё
// <![CDATA[
onload_functions.push('apply_onkeypress_event()');
// ]]>
Похожие темы
-
Добрый вечер.
Некоторое время назад вы сделали мне расширение для вставки плейлистов.
Всё работает как надо. Но хотелось бы что бы вместо текста -...