Всплывающая табличка в топике с дополнительными данными юзера (Deff)
Всплывающая табличка в топике с дополнительными данными юзера
(это могут быть свои собственные медали, подарки,анкета, расширенные сведения о Персонаже)
(это могут быть свои собственные медали, подарки,анкета, расширенные сведения о Персонаже)
Скрипт устанавливается в 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://serialyscript.mybb.ru/files/0013/44/56/73823.css" />
<script img-data="http://sa.uploads.ru/SoT3N.png" src="http://serialyscript.mybb.ru/files/0013/44/56/57946.js" forum="16"></script>
<!--//End//Всплывающая таблица с вкладками, в топике, с инфой о персонаже// -->
<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://serialyscript.mybb.ru/files/0013/44/56/73823.css" />
<script img-data="http://sa.uploads.ru/SoT3N.png" src="http://serialyscript.mybb.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>
<script id="ThisForum">if(GroupID>2){a=$('#ThisForum');a.parents('tr').hide();a.remove()}</script>
Каждая тема - для создания таблички конкретному юзеру.
Каждый пост этой темы, начиная с первого - будет вкладкой таблицы.
Если он начинается с названия вкладки, вписанное в самое начало сообщение BB-тегом [mark] (маркирующий текст, см расширение под иконкой "треугольничек")
Со следующей строки такого сообщения - идёт наш контент вкладки(одним из таких сообщений может быть и отлаженная игровая анкета пользователя).
Сообщения-Вкладки должны идти друг за другом, начиная с первого поста, кол-во вкладок будет равно колву заголовков в тегах [mark], после нахождения сообщения без тега [mark] в первой строке, скрипт считает, что вкладки
Т.е. кол-во вкладок и названия в принципе могут быть разные для каждого юзера. Успели набить один-два поста - будут одна или две вкладки.
Максимальное кол-во вкладок наверно - 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-коды в форме ответа.
• Добавлен автоскролл таблички к верхней части экрана и автоскролл во вкладках таблицы при превышении высоты экрана
• У поста с таблицей есть собственный селектор: .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>
<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>
Просмотров: 1859, Загрузок: 43, Комментарии: 1, Оценка: 5.0 (2)
| Страницы: | |