Вывод смайлов в форме ответов в виде табов. jQuery

Модификации основанные на языке JavaScript.

Скрипты(Огромная галерея скриптов, на любой вкус и цвет)
Аватара пользователя
CabinetAdmin

Вывод смайлов в форме ответов в виде табов. jQuery

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

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

Изображение


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





Отрабатывание должно осуществляться во всех браузерах. Проблемы могут возникнуть только в отображении табов, поскольку используются нестандартные свойства, которые позволяют растягивать табы на всю ширину. Отображаться будет во всех современных браузерах, в тех которые не понимают свойства табы будут отображаться друг под другом.

Так как модификация самая, что ни на есть сырая, дадим ей статус BETA. :)
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

igorbond

Вывод смайлов в форме ответов в виде табов. jQuery

igorbond 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>


Изображение

написание текста уехало под смайлы

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

Вывод смайлов в форме ответов в виде табов. jQuery

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

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

Тут какой принцип, код говорит, что надо поставить закрывающий тег после такого-то по счёту элемента, но если по указанному номеру элемента нет, то и закрывающий тег поставлен не будет. Отсюда и смещение формы ответа.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

igorbond

Вывод смайлов в форме ответов в виде табов. jQuery

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

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

igorbond

Вывод смайлов в форме ответов в виде табов. jQuery

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

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

igorbond

Вывод смайлов в форме ответов в виде табов. jQuery

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

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

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

Вывод смайлов в форме ответов в виде табов. jQuery

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

igorbond писал(а):Источник цитаты А может быть не равное количество смайлов?

Да пожалуйста, как посчитаете так и будет.

igorbond писал(а):Источник цитаты так же новые сообщения в блоке новые темы нельзя выводить?

Не знаю :unknown не пробовал. Можно наверно.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

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

Вывод смайлов в форме ответов в виде табов. jQuery

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

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

Изображение

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

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

Вывод смайлов в форме ответов в виде табов. jQuery

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

Ошибся в подсчётах.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

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

Вывод смайлов в форме ответов в виде табов. jQuery

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

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

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

Вывод смайлов в форме ответов в виде табов. jQuery

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

Те которые выбраны для отображения, те что по ссылке "ещё смайлики", конечно же не считать.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

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

Вывод смайлов в форме ответов в виде табов. jQuery

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

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

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

Вывод смайлов в форме ответов в виде табов. jQuery

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

Если 48, то код должен быть таким же как в первом сообщении. :unknown
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект


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

Вывод смайлов в форме ответов в виде табов. jQuery

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

Ты хоть код покажи, а то я не знаю, чесслово :unknown
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект



Похожие темы

Вернуться в «JavaScript / jQuery»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 2 гостя