ForumD.ru - Дизайн для форумов и техническая поддержка

Объявление

Акция! Дизайн «MyBB Technical Support»

Дизайн для форума MyBB в тематике компьютерных сообществ или технической поддержки
Стоимость при покупке эксклюзивно: 2000р 1200р
Скидка 40%. В стоимость входит настройка и корректировка дизайна.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Дизайн для MyBB форума гильдии WoW Exodar

Детализированный rpg-дизайн для mybb форума гильдии в тематике Экзодара.
Стоимость: 2150р*
В стоимость входит настройка и корректировка дизайна.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Финансовая помощьРеклама на сайте
Стать модераторомОтзывы

Предложения

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

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



Сворачивание полей профиля

Сообщений 1 страница 10 из 74

1

Cпойлер cкрытия инфы под N-кнопок в профиле топика
Сокрытие полей профиля под кнопки с анимацией разворачивания.
http://s2.uploads.ru/gVCmQ.png

Автор: Deff
Платформа: MyBB

Скрипт и описание

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

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

В HTML верх

<!-- HTML верх -Cпойлер cкрытия Инфы под N-кнопок в Профиле Топика -->
<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="https://forumstatic.ru/files/0010/b4/f8/57844.js"></script>

В HTML низ

<!-- HTML низ -Cпойлер cкрытия Инфы под N-кнопок в Профиле Топика -->
<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>
<!--Конец//=Cпойлер cкрытия Инфы под N-кнопок в Профиле Топик-->

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

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

Пункты:

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

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

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

Для дизайнеров
Селектор для стиля вкладки 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

<!-- HTML верх - Cпойлер cкрытия Инфы под N-кнопок в Профиле Топика -->
<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 верх -Cпойлер cкрытия Инфы под N-кнопок в Профиле Топика -->
<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="https://forumstatic.ru/files/0010/b4/f8/57844.js"></script>

На:

<!-- HTML верх -Cпойлер cкрытия Инфы под N-кнопок в Профиле Топика -->
<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="https://forumstatic.ru/files/0010/b4/f8/44653.js"></script>
<style>
    .post .post-author li[class*="pa-fld"]{
      width:160px;
    }
</style>

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

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

На:

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


Двойной спойлер информации профиля юзера в топике
Простой вариант сворачивания информации в профиле под две кнопки.

http://forumfiles.ru/uploads/0007/e3/f7/2617/689304.png

Автор: Deff
Платформа: MyBB

скрипт и описание

Итоговое расположение Пунктов, в точности как и в списке ниже(независимо от начального положения)
Пункты в списке - можно переставлять
В HTML низ

<!-- Двойной спойлер Инфы в Профиле, в Топике -->
<script>
LIArray=new Array(
//это не скрывается

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

// 1 кнопка - ссылка на Картинку
"https://forumstatic.ru/files/0010/74/32/77157.png",

"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 кнопка- ссылка на Картинку
"https://forumstatic.ru/files/0010/74/32/56624.png",

"pa-from",       //Откуда
"pa-fld1",       //Доп.Поле.1
"pa-fld2",       //Доп.Поле.2
"pa-fld3",       //Доп.Поле.3
"pa-fld4",       //Доп.Поле.4
"pa-fld5",       //Доп.Поле.5

//Конец Списка,
"_End"
)
wrapp1="<li class='post-author-Sp'><img style='cursor:pointer' src='";
wrappEnd="'><ul  style='display:none'></ul></li>";
wrapp2="<li class='post-author-Sp Sp2'><img style='cursor:pointer' src='";

var L='',TsK1='',TsK2='';b=LIArray.length-1;
for(i=0; i<b; i++){a=LIArray[i];if(a.indexOf('http://')==0){TsK1=i;break;}}
for(j=i+1; j<b; j++){a=LIArray[j];if(a.indexOf('http://')==0){TsK2=j;break;}}
wrapp1=wrapp1+LIArray[TsK1]+wrappEnd;wrapp2=wrapp2+LIArray[TsK2]+wrappEnd;;

$(".post .post-author").each(function() {
Noset=true;
for(i=TsK1+1; i<TsK2; i++){a=LIArray[i];
  var C=$(this).find('.'+LIArray[i])
  if(C.length&&Noset){Noset=false;C.before(wrapp1);D=$(this).find('li.post-author-Sp ul')}
  if(C.html()!=null){C.appendTo(D)}
}

Noset=true;
for(i=TsK2+1; i<LIArray.length-1; i++){var C=$(this).find('.'+LIArray[i])
  if(C.length&&Noset){Noset=false;$(this).find('li.post-author-Sp').after(wrapp2);D=$(this).find('li.post-author-Sp.Sp2 ul:last')}
  if(C.html()!=null){C.appendTo(D)}
}
});
$(".post .post-author-Sp ").click(function() {
$(this).find('ul:first').toggle('slow')
});</script>
<!--Конец//=Двойной спойлер Инфы в Профиле, в Топике-->

Сейчас пункт активен - вытащен из спойлеров.
Достаточно было перед ним поставить две косых черты.


Сворачивание профиля по клику на картинку OnLine/OffLine
Сворачивает и разворачивает данные пользователя при клике на картинки Онлайн или Офлайн

Автор: Deff
Платформа: MyBB

скрипт и описание

Ставим в HTML низ

<script type="text/javascript"> var L0='<img class="imgON_Off" src="';
    var L1='" style="cursor:pointer;cursor:hand;width:153;margin-top:3px;" />'; //153 - размер картинки по горизонтали

    var ImgON="http://s005.radikal.ru/i212/1009/13/26270b1c3c1a.jpg";  // Картинка Online;
    var ImgOff="http://s55.radikal.ru/i149/1009/e7/5251a5a51615.jpg";  // Картинка OffLine;

    $("#pun-viewtopic .post .post-author ul").each(function ()   {
    $(this).html('<div class=UL>'+$(this).html()+'</div>');
    if ($(this).find(".pa-online").html()!=null){$(this).append(L0+ImgON+L1)
        }else $(this).append(L0+ImgOff+L1);
    $(this).find(".pa-author,.pa-title,.pa-avatar").insertBefore($(this).find("div.UL"));});

   $("div.UL").hide();     //Кому не надо изначального свертывания - строку cиним убираем
    $("ul .imgON_Off").click(function () {
    $(this).parent("ul").find(".UL").toggle('slow');});
    </script>

Если вам необходимо добавить класс к картинке для открытого состояния профиля:

Код:
<script type="text/javascript">
   var L0='<img class="imgON_Off" src="';
   var L1='" style="cursor:pointer;" />'; 

    var ImgON="http://s005.radikal.ru/i212/1009/13/26270b1c3c1a.jpg";  // Картинка Online;
    var ImgOff="http://s55.radikal.ru/i149/1009/e7/5251a5a51615.jpg";  // Картинка OffLine;

$("#pun-viewtopic .post .post-author ul").each(function ()   {
     $(this).html('<div class=UL>'+$(this).html()+'</div>');
     if ($(this).find(".pa-online").html()!=null){$(this).append(L0+ImgON+L1)
}
else $(this).append(L0+ImgOff+L1);
$(this).find(".pa-author,.pa-title,.pa-avatar").insertBefore($(this).find("div.UL"));});

$("div.UL").hide();     
  $("ul .imgON_Off").click(function () {
  $(this).toggleClass('On').parent("ul").find(".UL").toggle('slow');});
</script>

Упрощенный скрипт без сворачивания (посколь стало достаточно много отдельных скриптов сворачивания ин-фы в профиле)

<script  type="text/javascript"> var L0='<img class="imgON_Off" src="';
    var L1='" style="width:153;margin-top:3px;" />'; //153 - размер картинки по горизонтали

    var ImgON="http://savepic.ru/4647873.png";  // Картинка Online;
    var ImgOff="http://savepic.org/3595913.png";  // Картинка OffLine;

    $("#pun-viewtopic .post .post-author ul").each(function ()   {
    if ($(this).find(".pa-online").html()!=null){$(this).append(L0+ImgON+L1)
        }else $(this).append(L0+ImgOff+L1);
    });
</script>

Для работы скрипта необходим лишь пункт .pa-online -( его можно скрыть css)
Остальные пункты скрываем показываем настройками в Администрирование - Поля Профиля

Отредактировано Герда (20.05.2013 06:19:55)

+2

2

А можно нечто подобное, но только для одного пункта? (награды, в частности)

0

3

L Micaelis
Ну выкини разделение второй  картинкой, и не нужные пункты выключаем двумя слешами (либо просто оставляем нужные пункты в скрипте - остальные не прописываем

Отредактировано Deff (01.04.2012 09:11:57)

0

4

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

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

А не целесообразней ли новый скрипт написать? А то получается лишний код, который нифига не делает, а просто висит и страничку нагружает.

Отредактировано mintemero (31.03.2012 23:18:37)

0

5

L Micaelis написал(а):

А можно нечто подобное, но только для одного пункта? (награды, в частности)

Спойлер наград на Rusff в Профиле, в Топике

Код:
<!-- спойлер наград на Rusff в Профиле, в Топике -->
<style>
.post-author-Sp{
background-color:#EBE9C6!important;
}
ul.wrapper{
margin-left:-15px;
width:167px!important;
margin-bottom:-15px;
display:none;
}
ul.wrapper,
ul.wrapper li.pa-awards{
border-color:transparent;
}
</style>
<script>
// кнопка - ссылка на Картинку
img="http://uploads.ru/i/f/D/F/fDFe4.png"

wrapp1="<li class='post-author-Sp'><img style='cursor:pointer' src='";
wrappEnd="'><ul class=wrapper></ul></li>";
wrapp1=wrapp1+img+wrappEnd;

$(window).load(function () {
$(".post .post-author .pa-awards").each(function() {
 if($(this).css("display")!="none"){
  $(this).before(wrapp1);a=$(this).parents('.post').find('.post-author-Sp ul')
  $(this).appendTo(a)
  }
});});
$(".post .post-author-Sp ").live("click", function(){
 $(this).find('ul:first').toggle('slow')
});</script>
<!--Конец//=спойлер наград в Профиле, в Топике-->

Отредактировано Deff (28.04.2012 11:21:36)

+1

6

Deff,
спасибо)

0

7

А можно ли сделать больше спойлеров? Скажем, 5?

0

8

А как награды вставлять О.О

0

9

А как сделать не спойлер, а вкладки в профиле? Что бы в одной вкоадке были "Сообщения, зарегистрировался и т.д.", во второй вкладке информация дополнительного поля, и в третьей так же?
http://kolubel.ru/ - вот как у них здесь.

0

10

параноик
Разбор кода
во :)

0

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляйте ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удалите символы: "http://", "https://" или "www."