Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Новые возможности форумов » Выпадающая Табличка по клику на иконку в профиле топика:


Выпадающая Табличка по клику на иконку в профиле топика:

Сообщений 401 страница 420 из 508

1

Your mafiosi написал(а):

Здравствуйте.
Я хотела бы "запросить" скрипт вот такого плана:

Зарисовки

http://sa.uploads.ru/t/mRNfh.png

● Кружочки с цифрами - скрытия инфы под профилем
● Нажимаем на стрелочку и выпадает вон-та штука.
● Нажимаем - пропадает.
● Желательно, что бы рамки выпадающей таблички были сменимы.
● Каждый контент - поле профиля.

Свернутый текст

Your mafiosi,
1. Ссылку на форум или тестовик куда будет происходить установка  (с уже установленным скриптом с кружочками на скриншоте...)
2. Вы хотите задействовать 4-ре доп поля в этой таблице - у Вас останется только одно - этого не мало ?
3.


Итоговый Скрипт:

Для Ролевых форумов

Всплывающая табличка в топике с дополнительными данными юзера
(это могут быть свои собственные медали, подарки,анкета, расширенные сведения о Персонаже)
http://sa.uploads.ru/KG3PY.png

Скрипт устанавливается в HTML низ, ближе к концу.
Настройки скрипта вынесены с пояснениями, красным в скрипте - ссылка на иконку в минипрофиле (если нужно - меняем на свою) и ID форума с темами для табличек(см описание ниже):

Код установки:

<!-- Всплывающая таблица с вкладками, в топике, с инфой о персонаже -->
<style type="text/css">
/*Подвижка иконки*/
img.a-info{
  margin-top: -3px!important;
  margin-left: 173px!important;
  width:30px;  /*Размер иконки*/
}
/*Подвижка всплывающей подсказки иконки*/
.tipsy.a-info{
  margin-top: -2px!important;
  margin-left:-6px!important;
  font: normal normal 400 11px/16.5px Verdana;
}
/*сдвиг таблицы*/ .my-tabs{
  margin-top: -73px;  /*сдвиг таблицы вверх от положения иконки*/
  margin-left:255px;  /*сдвиг таблицы вправо от положения иконки*/
}
/*Цвет фона и бордюров таблицы*/
.my-tabs>.tab-a,.my-tabs>span{
  background:#F7F6D2!important;
  border-color: #909D7E!important;
}
</style>

<link rel="stylesheet" type="text/css" href="http://forumstatic.ru/files/0013/44/56/73823.css" />
<script img-data="
http://sa.uploads.ru/SoT3N.png" src="http://forumstatic.ru/files/0013/44/56/57946.js" forum="16"></script>
<!--//End//Всплывающая таблица с вкладками, в топике, с инфой о персонаже// -->

Пояснения:

1. Создайте отдельный форум(раздел) для тем с доп. инфой конкретного юзера во всплывающей табличке. Форум открываем на чтение всем группам(можно скрыть для гостя, хотя и гостю интересно видеть табличку). Форум скрываем с "Главной" скриптом, устанавливаемым в Описание к Форуму - Администрирование- Форумы - нужный форум - редактировать
в Описание к форуму:

<!-- Скрытие форума от юзеров -->
<script id="ThisForum">if(GroupID>2){a=$('#ThisForum');a.parents('tr').hide();a.remove()}</script>

Каждая тема, - для создания таблички конкретному юзеру.
Каждый пост этой темы, начиная с первого - будет вкладкой таблицы, если:
Если он начинается с названия вкладки, вписанное в самое начало сообщение BB-тегом [mark] (маркирующий текст, см расширение под иконкой "треугольничек")
Со следующей строки такого сообщения - идёт наш контент вкладки(одним из таких сообщений может быть и отлаженная игровая анкета пользователя).
Сообщения-Вкладки должны идти друг за другом, начиная с первого поста (первым постом считается тот, который Вы заполняли при создании темы, который отображается на странице под номером 1), кол-во вкладок будет равно колву заголовков в тегах [mark], после нахождения сообщения без тега [mark]  в первой строке, скрипт считает, что вкладки исчерпаны. Скриншот темы и организации первых двух сообщений для вкладок http://sa.uploads.ru/zJNet.png
Т.е. кол-во вкладок и названия в принципе могут быть разные для каждого юзера. Успели набить один-два поста - будут одна или две вкладки.
Максимальное кол-во вкладок наверно - 6, если названия не сильно длинные.

Как устанавливается табличка для конкретного юзера:
2. В любое доп. поле профиля текущего юзера, где разрешён HTML суём ссылку на тему с вкладками таблицы таким кодом:
<a href=#tid=198></a>
!Внутрь этой(якобы) ссылки ничего и никогда не вставляем!!
Где красная цифра 198 - ID темы будущей таблички для текущео юзера.
Определяется при клике на тему в форуме с темами для табличек:
Пример для этой темы, кликаем в форуме "Сведения о участниках" тему "Ник: Волна" смотрим ссылку в адресном окне браузера:
http://timelife.0pk.ru/viewtopic.php?id=198
Цифры после = и есть ID темы, которые и вставляем в ссылку(ссылка юзерам не видна и не портит доп поля профиля, в котором разрешено HTML.

3. Добавлена очистка тем и сообщений этого форума с доп. данными пользователя при использовании поиска, для этого в скрипте добавлен атрибут forum="16", где красным = ID форума, получаемое аналогично ID темы, при клике на форум с главной, считываем в адресном окне браузера:
Пример по клику текущего форума со скриптами:
http://forum.mybb.ru/viewforum.php?id=16
И вставляем в атрибут скрипта forum= вместо красного, - свою цифру.

На вопрос: Как задать шрифт и стиль текста на вкладке:

Оформление вкладок(шрифт и т.д.) таблицы соответствует оформлению в самих сообщениях. Используйте BB-коды в форме ответа


Добавлено 22.01.2015:
Добавлен автоскролл таблички к верхней части экрана и автоскролл во вкладках таблицы при превышении высоты экрана

У поста с таблицей есть собственный селектор: .post.tableAdd


Вариант размещения кликабельной кнопки:
http://qps.ru/o3H4v#p42 (жать на "Информация о персонаже")


Если у Вас фон полотна форума стоит на HTML то при всплывании таблицы может появится сдвиг тела форума
Лекарство:
Запихиваем перед тегом </style> такое указание:
body{padding-right:0!important;}


Тут попросили ставить свою собственную иконку в Доп.поле профиля, в удобное юзерам место, не заморачиваясь с позиционированием дефолтной иконки:
Вариант:
Вставляем нужную Вам иконку куда вам надо, скрываем текущую и переадресуем клик на скрытую иконку

Ставим картинку в нужное поле

<img src="Ссылка на Вашу иконку" onclick="iconRedir(this)">

В  HTML низ(Ниже скрипта)

<!-- Переадресация клика со своей Иконки для Вспл. таблицы в топике -->
<style>.post-author img.a-info{display:none!important}</style>
<script type="text/javascript">
function iconRedir(that) {
    $(that).parents('.post-author').find('.post-img-Sp.a-info')[0].click();
};
</script>


Как добавить в табличку награды пользователя(установленные через Rusff): пост #368
Как подключить HTML в постах к всплывающей табличке: пост #381

+2

401

Grey_Fox
Про кнопку закрытия... Добавьте к стилю таблички

.my-tabs > img.close {
  width:0!important;
  height:0!important;
  padding:14.5px;
  background:url(http://forumstatic.ru/files/0017/2e/bd/69228.png) 0 / cover no-repeat;
}

Остальное вродь решилось... Или нет ?(про открытие под Гостем - пока не понял, почему не открывается

0

402

Alex_63 написал(а):

решилось

Спасибо!

Alex_63 написал(а):

не понял, почему не открывается

Да уж, странно...

0

403

Grey_Fox написал(а):

Да уж, странно...

Ни наю, посмотрел еще раз - Фсё правильно, форум с Табличками скрыт от Гостя... (Конкретно эта тема Гостю не видна => http://tes.rolfor.ru/viewtopic.php?id=88

0

404

Alex_63 написал(а):

Конкретно эта тема Гостю не видна

Я поняла. Кажется, разобралась. Простите за нетолковость...

Отредактировано Grey_Fox (Чт, 29 Июн 2017 21:55:33)

+1

405

Салют! А знаете ли, что хоть сам форум и скрыт посредством данного скрипта, но при наличии скрипта "последние активные темы форума", все сообщения там отображаются и ссылки ведут прямо в темы, которые должны быть скрыты.

Это можно как-то пофиксить?

Отредактировано Grey_Fox (Пн, 3 Июл 2017 16:33:24)

0

406

Grey_Fox
Дайте ссылку  - где отображаются... (Посмотрю завтра... или позже

0

407

Alex_63,
прямо на главной странице, сразу под объявлением: темы, в названии которых значится "Досье ..."

tes.rolfor.ru

0

408

Grey_Fox
Ну поскольку особой идентификации в статистике у этих тем нет... Можно сделать так (в HTML низ, самый низ

<script><!--Удаляем темы спец.форума из статистики-->
function removeTRstats(){$("#pun-stats tr,#pun-debug tr,#pun-break2 tr").filter(function(){
return $(this).find("td a").filter(function(){return !!$.trim(this.textContent).match(/^Досье &#9830; /)}).length!=0})
.replaceWith("");};$(document).ready(function(){removeTRstats();});$(window).load(function(){removeTRstats()});
</script>

0

409

Alex_63 написал(а):

Можно сделать так

Alex_63, сработало! Спасибо!!

Отредактировано Grey_Fox (Чт, 13 Июл 2017 12:40:10)

0

410

Есть ли возможность сделать так, чтобы в одном дополнительном поле высвечивалось одно всплывающее окно с вкладками из нескольких тем, которые будут указаны ссылками или id тем?

0

411

Здрасьте. Вопрос связанный с дизайном и для дизайнеров.
Я хочу объединить вкладки в единый блок, к примеру в <ul>.

Т.е. было так

https://i.imgur.com/pyYy5Y4.png

А стало так (это я нарисовал в инспекторе)

https://i.imgur.com/QUAFRL7.png

И я честно пытался это провернуть парочкой вещей, но, честно не получилось. Одна из них была такая запись = $(".my-tabs span").wrap("<ul>");
Нужна помощь...

На всякий случай оставлю ссылку на "тест", только я предупреждаю что там могут быть различия с оригиналом. Кнопка слева в виде раскрытой книги.

Отредактировано Неспетый (Чт, 14 Сен 2017 07:18:21)

0

412

Неспетый
Попробуйте такой Вариант

FORUM.myTabsAddFunc = function () {
  $(".my-tabs span").wrapAll("<ul />")
};

+1

413

Alex_63
Благодарю, всё работает!
Только я внёс одну маленькую правку, а именно вместо span сделал отдельный id="", потому что иначе он захватывал отдельные кусочки текста во вкладках. А так всё замечательно.

0

414

Всё было хорошо пока я не заметил что контент не переключается вместе за вкладками... Т.е. кнопки переключаются, а содержимое за ними нет. Только первый пост и всё.

Внизу две последние строчки, это именно они переключают контент. Наверху я лишь поставил тег ul чтобы кнопки заработали из-за того что они были обёрнуты в ul. Ну я думаю это понятно.

С #tab_ul тоже всё просто, это на самом деле span, я поменял его на id потому что иначе при wrapAll ближайшие span тоже будут включены в виде вкладок.

Код:
 $('.my-tabs ul>#tab_ul').live('click',function(){
     var a = $(this).parent('ul');
     var arr = a.children('#tab_ul');
     var index = arr.index(this);
     arr.removeClass('selected');
     $(this).addClass('selected');
     a.parent('.tab-a').hide();
     a.parent('.tab-a').eq(index).show();
 });

Возможно я зря мучаюсь, и эти две строчки менять не нужно, а за переключение контента за вкладками отвечает что-то другое? Я просто сейчас пробую разные приёмы, и они не работают.

Отредактировано Неспетый (Чт, 14 Сен 2017 23:41:59)

0

415

FORUM.myTabsAddFunc = function () {
  $(".my-tabs>span").wrapAll("<ul />")
};

0

416

Неспетый написал(а):

Возможно я зря мучаюсь, и эти две строчки менять не нужно

Неспетый
А нафига span оборачивать в <ul> ? Чтобы выставить кнопки вкладок в виде колонки, а не строки, - достаточно и css( сделать их блочными с float:none; width:200px;

0

417

Проблема вся в том что я хочу сделать "резиновый" дизайн вкладок (к слову он уже сделан), т.е. когда вкладок мало - всё как обычно, а когда их много и много и много - они вместо того чтобы строить второй ряд, будут просто упираться об ширину контента и уменьшатся.

Deff написал(а):

$(".my-tabs>span")

Спасибо, теперь span'ы не подхватываются, но как я уже выше писал - контент вместе за кнопками не переключается.

Deff написал(а):

достаточно и css( сделать их блочными с float:none; width:200px;

Опять же спасибо, но как? Я не могу ограничить вкладки таким образом, да они будут в одну строку, но сам текст вкладки не хочет сжиматься. Он просто едет вперёд. Я конечно пробую сейчас, возможно я просто не всё знаю про css, но чувствую это так не работает.

Если будет решение, обязательно здесь напишу, нет - значит нет...

Отредактировано Неспетый (Пт, 15 Сен 2017 17:57:52)

0

418

В общем в переменной 'a' вместо .parents использовал .siblings, и всё заработало как надо.

0

419

Неспетый написал(а):

В общем в переменной 'a' вместо .parents использовал .siblings, и всё заработало как надо.

Ну или

Код:
 $('.my-tabs>ul>span').live('click',function(){
     var a = $(this).parent('ul');
     var arr = a.children('span');
     var index = arr.index(this);
     arr.removeClass('selected');
     $(this).addClass('selected');
     a.parents('.tab-a').hide();
     a.parents('.tab-a').eq(index).show();
 });

0

420

Deff
А вот и нет! =) С .parents не работает. Только .siblings. Но спасибо.

Неспетый написал(а):

В общем в переменной 'a' вместо .parents

Я кстати тут ошибся, не parents а children, в оригинале именно так. Это я уже... тестировал.

0


Вы здесь » Единый форум поддержки » Новые возможности форумов » Выпадающая Табличка по клику на иконку в профиле топика: