Копилка » Скрипты » MyBB форумы » Профиль пользователей

Cпойлер cкрытия инфы под N-кнопок в профиле топика (Deff)

Сокрытие полей профиля под кнопки с анимацией разворачивания.
Заказать на сайте
Демо
Автор: Deff
Платформа: MyBB
Категория: Профиль пользователей

Оценка: 5.0/1

Скачать (4.6 Kb)
Скачать (Версия №2)
11.06.2015, 21:12

В демке четыре сообщения, с разными вариантами оформления и начального срабатывания кнопок в профиле, в зависимости от установки параметров а1 и a2 (*см. начало скрипта, в части, устанавливаемой в HTML низ).

Установка
Кнопки-картинки (ссылки красным) ставим в нужное место перед нужной группой полей.
Число кнопок - произвольное.

В HTML верх

Цитата

<style>img.post-img-Sp {margin:6px 3px;}
div.tipsy.tipsy-s.Sp-imgSp-img .tipsy-inner{font-size:14px;letter-spacing:1px;}
</style>
<script type="text/javascript" src="http://premod.mybb.ru/files/0010/b4/f8/57844.js"></script>

вместо красного - ваша ссылка на скрипт.

В HTML низ

Цитата

<script>
var a1 = 0 // 0 - спойлер-аккордеон, 1 - вертикальный спойлер; 3 - обычный спойлер
var a2 = 0 // 0 - Скрытие первой вкладки; 1 - Показ первой вкладки;
var a3 = 0 // Резкость Открытия: 0 - Плавно; 1 - Резко;

var LiArr=new Array(
//При наличии двух косых => // в начале пункта, - пункт не скрывается.

//"pa-author", //Ник-Нейм
//"pa-avatar", //Аватар
//"pa-title", //статус

// 1 кнопка - ссылка на Картинку
//В квадратных скобках, прямо к ссылке можно добавить своё описание (по желанию)
"http://s3.uploads.ru/VymNB.png[Описание 1]",

"pa-reg", //Зарегистрирован
"pa-invites", //Приглашений
"pa-posts", //Кол-во сообщений:
"pa-respect", //Уважение:
"pa-positive", //Позитив
"pa-sex", //Пол
"pa-age", //Возраст
"pa-icq", //Аська
"pa-ip", //IP Юзера
"pa-time-visit", //Провел на форуме:
"pa-last-visit", //Последний визит:
//"pa-online", //Пользователь online - Не засовываем в спойлеры

// 2 кнопка- ссылка на Картинку
"http://s3.uploads.ru/T7hLI.png",

"pa-from", //Откуда
"pa-fld1", //Доп.Поле.1

// 3 кнопка- ссылка на Картинку
"http://s3.uploads.ru/VtGQ4.png",

"pa-fld2", //Доп.Поле.2
"pa-fld3", //Доп.Поле.3
"pa-fld4", //Доп.Поле.4
"pa-fld5", //Доп.Поле.5
//"award", //Награды(только для rusff и ork)
//"gift", //Подарки(только для rusff и ork)

//Конец Списка,
"_End"); SetProvilSpoil(a1,a2,a3);
</script>

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

Пункт активен - //"pa-online" сейчас вытащен из спойлеров.
Для этого необходимо было поставить перед ним две косых //.
Это для последующих установок, к примеру скриптов: офлайн - онлайн картинкой, аналогично можно вытащить из участия в спойлере и любой другой пункт.

Пункты:

Цитата

//"award", //Награды(только для rusff и ork)
//"gift", //Подарки(только для rusff и ork)

Только для для форумов QuadroBoards - снимаем два наклонных слеша только для реально используемого(ых) пунктов.
*Награды и подарки удобнее ставить под последнюю кнопку, особенно если их много.

Совет: При горизонтальном расположении кнопок, симпатичней их делать несколько длиннее

Цитата

Для дизайнеров
Селектор для стиля вкладки ul.post-ul-Sp
Селектор для картинки-кнопки .post-img-Sp
Селектор aктивной кнопки .post-img-Sp.active
Селектор кнопки при наведении .post-img-Sp:hover
Селектор подсказки при наведении на кнопку div.tipsy.tipsy-s.Sp-imgSp-img .tipsy-inner

Пример текущего оформления кнопок в DEMO:

Код

<style>img.post-img-Sp {
  margin:1px;
  padding:2px;
  border:transparent 1px dashed;
  -webkit-border-radius:4px;
  -khtml-border-radius:4px;
  -moz-border-radius:4px;
  -o-border-radius:4px;
  -ms-border-radius:4px;
  border-radius:4px;
}
img.post-img-Sp.active {
  border:#645850 1px dashed;
  -webkit-box-shadow:0px 5px 18px #000;
  -khtml-box-shadow:0px 5px 18px #000;
  -moz-box-shadow:0px 5px 18px #000;
  -ms-box-shadow:0px 5px 18px #000;
  box-shadow: 0px 5px 18px #000;
}
</style>

Дополнительно
Пробная Версия не скрытием, а с растворением-упрозрачниванием вкладки
В HTML верх Замените эти строки:

Код

На:

Цитата

Красное - ссылка на вторую версию скрипта

В HTML низ замените параметр выделенный красным:

Цитата

<script>
var a1 = 1 // 0 - спойлер-аккордеон, 1 - вертикальный спойлер; 3 - обычный спойлер
var a2 = 1 // 0 - Скрытие первой вкладки; 1 - Показ первой вкладки;
var a3 = 0 // Резкость Открытия: 0 - Плавно; 1 - Резко;
var LiArr=new Array( ....

На:

Цитата

<script>
var a1 = 1 // 0 - спойлер-аккордеон, 1 - вертикальный спойлер; 3 - обычный спойлер
var a2 = 1 // 0 - Скрытие первой вкладки; 1 - Показ первой вкладки;
var a3 = 2 // Резкость Открытия: 0 - Плавно; 1 - Резко; 2 - Fade;

Теги: скрипт, Deff, mybb, Профиль пользователя

Просмотров: 1362, Загрузок: 36, Комментарии: 3, Оценка: 5.0 (1)

Страницы:


Имя *:
Email *:
Все смайлы
Код *: